/**
 * Dahu Theme Annad 2026 — socle de la ZONE CLAIRE, partagé par Mon compte, la FAQ et le Panier.
 *
 * EXCEPTION CLAIRE ASSUMÉE : le reste du site est sombre ; ces écrans suivent les maquettes en thème
 * clair. Deux portées, mêmes règles :
 * - .annad-light-page : gabarit entier en clair (Mon compte, FAQ, Panier) — pose aussi le fond de page ;
 * - .annad-light-zone  : simple bloc clair posé au milieu d une page sombre (carte de formulaire de
 *   « Devenir revendeur ») — mêmes tokens, champs et boutons, sans fond de page.
 * Le propre de Mon compte reste dans account.css, celui du panier dans cart.css, celui de la FAQ dans
 * faq-page.css.
 * Couleurs : tokens --color-light-* (header.css), hors palette theme.json.
 */

.annad-light-page,
.annad-light-zone {
	--light-radius: 0.625rem; /* ~10px : sidebar, champs */
	--light-card-radius: 0.75rem; /* ~12px : cartes */
	--light-card: linear-gradient(180deg, var(--color-light-card-top), var(--color-light-card-bottom));
	--light-subcard: color-mix(in srgb, var(--color-light-card-bottom) 94%, var(--color-on-surface-light));
	--light-line: color-mix(in srgb, var(--color-on-surface-light) 22%, transparent);
	--light-muted: color-mix(in srgb, var(--color-on-surface-light) 60%, transparent);
	--light-soft: color-mix(in srgb, var(--color-on-surface-light) 45%, transparent);
	--light-field: var(--color-light-field);

	/* Boutons .annad-btn dans la zone : variante claire par tokens (buttons.css inchangé) */
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: var(--color-light-bg);
	--annad-btn-bg-hover: var(--color-light-card-top);
	--annad-btn-border: var(--light-line);
	--annad-btn-radius: 999px;
	--annad-btn-shadow: none;
	--annad-btn-shadow-hover: 0 1px 3px color-mix(in srgb, var(--color-on-surface-light) 15%, transparent);
	--annad-btn-shadow-active: none;

	color: var(--color-on-surface-light);
}

/* Gabarit entier en zone claire : fond de page et gouttières. Une carte isolée au milieu d'une page
   sombre (.annad-light-zone, ex. le formulaire de « Devenir revendeur ») pose son propre fond. */
.annad-light-page {
	padding: 2.5rem var(--gutter) 4rem;
	background-color: var(--color-light-bg);
}

@media (min-width: 64em) {
	:is(.annad-light-page, .annad-light-zone) {
		padding-block: 3rem 5rem;
	}
}

/* Largeur de page : .woocommerce est l'enfant unique sur Mon compte et le Panier (shortcodes),
   .annad-light-page__inner sur les gabarits sans WooCommerce (FAQ). */
:is(.annad-light-page, .annad-light-zone) > .woocommerce,
:is(.annad-light-page, .annad-light-zone) > .annad-light-page__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

:is(.annad-light-page, .annad-light-zone) a {
	color: inherit;
}

:is(.annad-light-page, .annad-light-zone) a:focus-visible,
:is(.annad-light-page, .annad-light-zone) button:focus-visible,
:is(.annad-light-page, .annad-light-zone) input:focus-visible,
:is(.annad-light-page, .annad-light-zone) select:focus-visible,
:is(.annad-light-page, .annad-light-zone) textarea:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 2px;
}

/* ---------- Carte claire (dégradé de la maquette) : base commune ---------- */

.annad-light-card,
.annad-account-card {
	padding: 1.5rem;
	background: var(--light-card);
	border: 0;
	border-radius: var(--light-card-radius);
	box-shadow: none;
}

/* ---------- Boutons de la zone (variantes claires, buttons.css inchangé) ---------- */

:is(.annad-light-page, .annad-light-zone) .annad-btn {
	font-weight: 600;
}

/* Vert plein, texte noir, fine bordure foncée (« Suivi de commande ») */
:is(.annad-light-page, .annad-light-zone) .annad-btn--brand {
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: var(--color-brand-green);
	--annad-btn-bg-hover: color-mix(in srgb, var(--color-brand-green) 88%, var(--color-on-surface-light));
	--annad-btn-border: var(--color-on-surface-light);
}

/* Gris clair, texte noir, sans bordure (« Contacter / Messages ») */
:is(.annad-light-page, .annad-light-zone) .annad-btn--light {
	--annad-btn-color: var(--color-on-surface-light);
	--annad-btn-bg: var(--color-light-card-top);
	--annad-btn-bg-hover: var(--color-light-card-bottom);
	--annad-btn-border: transparent;
}

/* Boutons WooCommerce (.button, envois de formulaires) : même pilule verte que l'action principale */
:is(.annad-light-page, .annad-light-zone) .button,
:is(.annad-light-page, .annad-light-zone) button[type="submit"]:not(.annad-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--color-on-surface-light);
	background-color: var(--color-brand-green);
	border-radius: 999px;
	box-shadow: none;
	transition: background-color var(--annad-transition-fast) var(--annad-ease);
}

:is(.annad-light-page, .annad-light-zone) .button:hover,
:is(.annad-light-page, .annad-light-zone) button[type="submit"]:not(.annad-btn):hover {
	color: var(--color-on-surface-light);
	background-color: color-mix(in srgb, var(--color-brand-green) 88%, var(--color-on-surface-light));
}

/* ---------- Écrans sans maquette : formulaires et contenus WooCommerce ---------- */

:is(.annad-light-page, .annad-light-zone) .woocommerce-form-row,
:is(.annad-light-page, .annad-light-zone) .form-row {
	margin: 0 0 1rem;
}

/* Libellés de champ : petites capitales grises, comme les libellés des cartes */
:is(.annad-light-page, .annad-light-zone) label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--light-muted);
}

:is(.annad-light-page, .annad-light-zone) label.woocommerce-form__label-for-checkbox,
:is(.annad-light-page, .annad-light-zone) .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-on-surface-light);
}

:is(.annad-light-page, .annad-light-zone) .input-text,
:is(.annad-light-page, .annad-light-zone) input[type="text"],
:is(.annad-light-page, .annad-light-zone) input[type="email"],
:is(.annad-light-page, .annad-light-zone) input[type="tel"],
:is(.annad-light-page, .annad-light-zone) input[type="password"],
:is(.annad-light-page, .annad-light-zone) input[type="number"],
:is(.annad-light-page, .annad-light-zone) select:not(.annad-orders-filter__select),
:is(.annad-light-page, .annad-light-zone) textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	font: inherit;
	color: var(--color-on-surface-light);
	background-color: var(--light-field);
	border: 1px solid var(--light-line);
	border-radius: var(--light-radius);
}

:is(.annad-light-page, .annad-light-zone) .select2-container .select2-selection--single {
	min-height: 2.75rem;
	background-color: var(--light-field);
	border: 1px solid var(--light-line);
	border-radius: var(--light-radius);
}

:is(.annad-light-page, .annad-light-zone) .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 2.75rem;
	color: var(--color-on-surface-light);
}

:is(.annad-light-page, .annad-light-zone) .select2-container .select2-selection--single .select2-selection__arrow {
	height: 2.75rem;
}

:is(.annad-light-page, .annad-light-zone) fieldset {
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--light-line);
	border-radius: var(--light-card-radius);
}

:is(.annad-light-page, .annad-light-zone) legend {
	padding-inline: 0.5rem;
	font-weight: 700;
}

:is(.annad-light-page, .annad-light-zone) .required {
	color: inherit;
	text-decoration: none;
	border: 0;
}

/* Connexion / inscription, adresses : deux colonnes au-dessus de 64em */
:is(.annad-light-page, .annad-light-zone) .u-columns.col2-set,
:is(.annad-light-page, .annad-light-zone) .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 64em) {
	:is(.annad-light-page, .annad-light-zone) .u-columns.col2-set,
	:is(.annad-light-page, .annad-light-zone) .woocommerce-Addresses.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce :is(.annad-light-page, .annad-light-zone) .col2-set .col-1,
.woocommerce :is(.annad-light-page, .annad-light-zone) .col2-set .col-2 {
	float: none;
	width: auto;
}

:is(.annad-light-page, .annad-light-zone) .col2-set::before,
:is(.annad-light-page, .annad-light-zone) .col2-set::after {
	content: none;
}

/* Blocs de formulaire et d'adresse : même carte que le tableau de bord */
:is(.annad-light-page, .annad-light-zone) .woocommerce-form-login,
:is(.annad-light-page, .annad-light-zone) .woocommerce-form-register,
:is(.annad-light-page, .annad-light-zone) .woocommerce-ResetPassword,
:is(.annad-light-page, .annad-light-zone) .woocommerce-Address,
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm,
:is(.annad-light-page, .annad-light-zone) .woocommerce-address-fields {
	margin: 0;
	padding: 1.5rem;
	background: var(--light-card);
	border: 0;
	border-radius: var(--light-card-radius);
}

/* « Détails du compte » (form-edit-account.php natif) : champs sur une grille de 3 colonnes de
   250px maximum, au lieu de champs pleine largeur. Le fieldset « Changement de mot de passe »
   occupe toute la ligne et reprend la même grille pour ses 3 champs. Une colonne sur mobile. */
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm,
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm fieldset {
	--annad-account-col: 250px;
	display: grid;
	grid-template-columns: minmax(0, var(--annad-account-col));
	gap: 0 1rem;
}

@media (min-width: 48em) {
	:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm,
	:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm fieldset {
		grid-template-columns: repeat(3, minmax(0, var(--annad-account-col)));
	}
}

/* Tout ce qui n'est pas un champ (fieldset, bouton, contenus ajoutés par des extensions) : ligne entière */
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm > :not(.form-row),
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm fieldset > legend {
	grid-column: 1 / -1;
}

/* Champs : annule float et largeurs 47 % / 100 % de woocommerce.css */
.woocommerce :is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm .form-row {
	float: none;
	width: auto;
	min-width: 0;
}

/* Séparateurs de float devenus inutiles (sinon cellules vides de la grille) */
:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm .clear {
	display: none;
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-EditAccountForm fieldset {
	margin: 0.5rem 0 1.5rem;
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-Address-title h2,
:is(.annad-light-page, .annad-light-zone) .woocommerce-Address-title h3,
:is(.annad-light-page, .annad-light-zone) .u-column1 > h2,
:is(.annad-light-page, .annad-light-zone) .u-column2 > h2 {
	font-size: 1.125rem;
	font-weight: 700;
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-Address address {
	font-style: normal;
}

/* Tableaux (moyens de paiement, devis, détail de commande) : lignes fines, sur carte claire */
:is(.annad-light-page, .annad-light-zone) .shop_table {
	width: 100%;
	margin: 0 0 1.5rem;
	overflow: hidden;
	font-size: 0.9375rem;
	background: var(--light-card);
	border: 0;
	border-collapse: collapse;
	border-radius: var(--light-card-radius);
}

:is(.annad-light-page, .annad-light-zone) .shop_table th,
:is(.annad-light-page, .annad-light-zone) .shop_table td {
	padding: 0.875rem 1rem;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--light-line);
}

:is(.annad-light-page, .annad-light-zone) .shop_table thead th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--light-muted);
}

:is(.annad-light-page, .annad-light-zone) .shop_table tr:last-child > td,
:is(.annad-light-page, .annad-light-zone) .shop_table tr:last-child > th {
	border-bottom: 0;
}

/* Notices WooCommerce */
:is(.annad-light-page, .annad-light-zone) .woocommerce-message,
:is(.annad-light-page, .annad-light-zone) .woocommerce-info,
:is(.annad-light-page, .annad-light-zone) .woocommerce-error,
:is(.annad-light-page, .annad-light-zone) .woocommerce-notices-wrapper > * {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	list-style: none;
	color: var(--color-on-surface-light);
	background: var(--light-card);
	border: 0;
	border-left: 4px solid var(--color-brand-green);
	border-radius: var(--light-radius);
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-message::before,
:is(.annad-light-page, .annad-light-zone) .woocommerce-info::before,
:is(.annad-light-page, .annad-light-zone) .woocommerce-error::before {
	display: none;
}

:is(.annad-light-page, .annad-light-zone) .woocommerce-message .button,
:is(.annad-light-page, .annad-light-zone) .woocommerce-info .button {
	margin-left: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.annad-account-nav__link,
	.annad-order__chevron,
	:is(.annad-light-page, .annad-light-zone) .button,
	:is(.annad-light-page, .annad-light-zone) button[type="submit"]:not(.annad-btn) {
		transition: none;
	}
}

