/* ==========================================================================
   WooCommerce — habillage minimal aux couleurs/typo de la marque STBP.
   La structure/grille reste celle de WooCommerce (CSS natif du plugin) :
   ce fichier ne fait qu'ajuster boutons, couleurs, rayons, formulaires.
   ========================================================================== */

.woocommerce-container {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* La page de commande (et la page de remerciement, même page WordPress —
   cf. woocommerce/checkout/thankyou.php) est une page WP normale
   ([woocommerce_checkout] en contenu, gabarit page.php) : elle n'utilise
   jamais le wrapper `.woocommerce-container` ci-dessus (réservé aux gabarits
   natifs WooCommerce — boutique, fiche produit...), juste le `.container`
   générique de page.php, sans marge verticale propre — d'où le contenu
   collé à la banderole et au footer (bug rapporté 2026-09-23). `is_checkout()`
   est vrai sur les deux écrans, d'où cette classe commune aux deux.
   `.page-content` (cf. page.php) cible précisément CETTE div de contenu —
   pas `.container` seul, qui matche aussi navbar__topbar-inner/
   navbar__main-inner/page-header__inner (même classe "container" réutilisée
   partout) : viser `.container` tout court y ajoutait le même padding
   géant, d'où les grands espaces blancs/bleus signalés dans le header et la
   navbar (bug rapporté 2026-09-24). */
body.woocommerce-checkout .page-content {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* Le formulaire de commande n'a par défaut aucune largeur propre : il
   s'étire sur toute la largeur du site (1280px), très différent de la
   colonne resserrée des autres pages "formulaire" (adhésion, tarifs...) et
   de la page de remerciement juste après (.thankyou-page, 680px) — d'où
   l'effet "presque plein écran" signalé par l'utilisateur. */
.woocommerce-checkout form.checkout {
	max-width: 900px;
	margin: 0 auto;
}

/*
 * WooCommerce ajoute `.woocommerce img, .woocommerce-page img { height: auto; }`
 * (woocommerce-layout.css) — un sélecteur `class + élément` (spécificité 0,1,1)
 * qui l'emporte sur nos classes uniques `.navbar__logo`/`.footer__logo`
 * (0,1,0), désactivant leur hauteur fixe sur toute page WooCommerce (boutique,
 * panier, paiement, compte). On restaure les dimensions voulues avec une
 * spécificité supérieure (0,2,0), sans jamais modifier le CSS du plugin.
 * .navbar-sticky__logo (bandeau condensé desktop, cf. navbar.css) manquait à
 * l'appel ici — logo énorme (non contraint) une fois ce bandeau visible sur
 * les pages WooCommerce, bug rapporté 2026-09-23 sur la page de commande.
 */
body.woocommerce .navbar__logo,
body.woocommerce-page .navbar__logo {
	height: 76.8px;
	width: auto;
}

body.woocommerce .navbar__mobile-logo,
body.woocommerce-page .navbar__mobile-logo {
	height: 32px;
	width: auto;
}

body.woocommerce .navbar-sticky__logo,
body.woocommerce-page .navbar-sticky__logo {
	height: 80px;
	width: auto;
}

body.woocommerce .footer__logo,
body.woocommerce-page .footer__logo {
	height: 70px;
	width: auto;
}

/* --- Boutons --- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background-color: var(--color-secondary);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 14px;
	padding: 12px 24px;
	transition: background-color var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--color-primary);
	color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--color-primary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--color-primary-dark);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
	opacity: 0.5;
}

/*
 * Depuis WooCommerce 8+, les pages Panier/Paiement générées automatiquement
 * utilisent les blocs Gutenberg WooCommerce (wc-blocks), pas les shortcodes
 * classiques : leurs boutons ont leurs propres classes, en plus de `.button`.
 */
.wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--color-secondary);
	color: #fff;
	border-radius: var(--radius-sm);
	font-weight: 700;
}

.wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-primary);
	color: #fff;
}

/* Bloc "Nouveau dans la boutique" (panier vide) : bouton Gutenberg natif. */
.woocommerce-cart .wp-block-button__link,
.woocommerce-page .wp-block-button__link {
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
}

.woocommerce-cart .wp-block-button__link:hover,
.woocommerce-page .wp-block-button__link:hover {
	background-color: var(--color-primary);
}

/* --- Prix, badges --- */

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-primary);
	font-weight: 700;
}

.woocommerce span.onsale {
	background-color: var(--color-accent);
	font-weight: 700;
	border-radius: var(--radius-circle);
}

.woocommerce .star-rating {
	color: var(--color-accent);
}

/* --- Formulaires (checkout, compte, filtres) --- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page table.shop_table select {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 12px 14px;
	font-family: var(--font-family-base);
	font-size: 15px;
	transition: border-color var(--transition-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--color-secondary);
}

/* --- Tableaux (panier, commandes) --- */

.woocommerce table.shop_table {
	border-radius: var(--radius-md);
	border-color: var(--color-border);
}

.woocommerce table.shop_table th {
	font-weight: 700;
	color: var(--color-text-secondary);
}

/* --- Notices --- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--color-secondary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-secondary);
}

.woocommerce-error {
	border-top-color: #dc2626;
}

/* --- Mon compte : navigation --- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--color-border-light);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-secondary);
	font-weight: 700;
}

/* --- Connexion / Inscription (Mon compte, formulaires natifs WooCommerce) --- */

.account-login-header {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.account-login-header .section-title {
	margin-bottom: 16px;
}

.account-login-header__lead {
	text-align: center;
	max-width: 480px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/*
 * Inscription désactivée en permanence (cf. memberships.php,
 * pre_option_woocommerce_enable_myaccount_registration) : le plugin n'imprime
 * même plus le wrapper `#customer_login`/`.u-column1` dans ce cas (cf.
 * templates/myaccount/form-login.php) — seuls restent le <h2> et le
 * formulaire, en enfants directs de `div.woocommerce`.
 */

/*
 * Spécificité (0,2,2) : bat volontairement le `.woocommerce form.login`
 * natif (0,2,1, cf. woocommerce.css du plugin) qui pose une bordure — sans
 * ça la règle du plugin l'emporte malgré l'ordre de chargement.
 */
body.woocommerce-account form.woocommerce-form-login {
	max-width: 420px;
	margin: 0 auto;
	border: none;
}

/*
 * Le titre natif "Se connecter" est remplacé par l'en-tête section-title
 * injecté avant le formulaire (cf. inc/woocommerce.php +
 * template-parts/account/login-header.php). Quand l'inscription est
 * désactivée (cf. plus haut), le plugin n'imprime NI `#customer_login` NI
 * `.u-column1` : le <h2> est un enfant direct de `div.woocommerce`, juste
 * avant le formulaire.
 */
body.stbp-account-login div.woocommerce > h2 {
	display: none;
}

.woocommerce-form-register h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 20px;
}

/* Alignement pixel-perfect avec le bouton .btn-primary du formulaire
   d'adhésion (cf. adhesion-page.css) — même fond/rayon déjà hérités des
   règles boutons WooCommerce génériques ci-dessus, seuls le padding et la
   bordure différaient. */
/* Spécificité (0,2,2), au-delà du `.woocommerce button.button` natif (0,2,1)
   qui fixe sinon son propre padding/absence de bordure. */
body.woocommerce-account button.woocommerce-form-login__submit {
	padding: 13px 28px;
	border: 2px solid var(--color-secondary);
}

body.woocommerce-account button.woocommerce-form-login__submit:hover,
body.woocommerce-account button.woocommerce-form-login__submit:focus-visible {
	border-color: var(--color-primary);
}

.woocommerce-form-login .woocommerce-form-row label,
.woocommerce-form-register .woocommerce-form-row label {
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin-bottom: 6px;
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin-bottom: 16px;
}

.woocommerce-LostPassword.lost_password {
	margin-top: 14px;
	font-size: 13px;
}

.woocommerce-LostPassword.lost_password a {
	color: var(--color-primary-light);
	font-weight: 600;
}

.woocommerce-form-register p {
	font-size: 13px;
	color: var(--color-text-muted);
}

/* --- Panier (page "Panier", blocs WooCommerce/Gutenberg) : classes
   `.wc-block-*`. La page de commande, elle, est repassée au formulaire
   classique juste en dessous (shortcode [woocommerce_checkout]) — les blocs
   Checkout imposent toujours une adresse de facturation dès qu'aucune
   livraison n'est nécessaire (cas de ce site : uniquement des accès
   numériques), sans réglage natif pour la désactiver ; le shortcode classique,
   lui, respecte pleinement `woocommerce_checkout_fields` (cf. stbp-core,
   customer-accounts.php) pour ne garder que l'e-mail. Demande utilisateur
   2026-09-23. --- */

.wc-block-components-checkout-step__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-text);
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="url"] {
	border-radius: 10px;
	border-color: var(--color-border);
}

.wc-block-components-form .wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-form .wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="tel"]:focus {
	border-color: var(--color-secondary);
}

.wc-block-components-text-input label {
	font-size: 15px;
}

.wc-blocks-components-select__container {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
}

.wc-blocks-components-select__container select {
	font-family: var(--font-family-base);
}

.wc-block-components-radio-control__option {
	border-radius: var(--radius-sm);
	border-color: var(--color-border) !important;
}

.wc-block-components-radio-control__option-checked {
	border-color: var(--color-secondary) !important;
}

.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input {
	accent-color: var(--color-secondary);
}

/* Panneau "Résumé de la commande" (colonne de droite) : carte identifiable,
   même traitement que les autres cartes du site plutôt que le fond neutre
   par défaut du plugin. */
.wc-block-components-sidebar.wc-block-checkout__sidebar {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 24px;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label {
	color: var(--color-text);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--color-primary);
	font-weight: 800;
}

/* Champ code promo — toujours ouvert (cf. main.js initAutoExpandCoupon),
   le bouton "Ajouter des codes promo" disparaît une fois déplié. */
.wc-block-components-totals-coupon .wc-block-components-panel__button[aria-expanded="true"] {
	display: none;
}

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.wc-block-components-totals-coupon__button {
	flex-shrink: 0;
}

/* --- Commande (formulaire classique, shortcode [woocommerce_checkout]) --- */

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

.woocommerce-billing-fields .form-row label,
.woocommerce-additional-fields .form-row label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

/* Code promo toujours visible dès l'arrivée sur la page — pas de lien
   "cliquer ici pour l'afficher" (demande utilisateur 2026-09-23). Le plugin
   masque le formulaire en style inline (`display:none`), d'où l'!important. */
.woocommerce-form-coupon-toggle {
	display: none;
}

/* Formulaire séparé de `form.checkout` (frère, pas enfant) : le max-width
   posé plus haut sur `.woocommerce-checkout form.checkout` ne l'atteint
   pas, d'où ce bloc bien plus large que le reste du formulaire juste en
   dessous (bug rapporté 2026-09-24) — même largeur ici, explicitement. */
form.checkout_coupon.woocommerce-form-coupon {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
	background-color: var(--color-background-alt);
	border-radius: var(--radius-md);
	padding: 16px;
}

form.checkout_coupon.woocommerce-form-coupon .form-row {
	margin: 0;
	flex: 1 1 200px;
}

/* Moyens de paiement : une seule option (virement) — WooCommerce masque
   alors le bouton radio lui-même (rien à choisir), on garde juste une carte
   avec le libellé et les instructions. */
.wc_payment_method {
	list-style: none;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}

.wc_payment_method label {
	font-weight: 700;
	color: var(--color-text);
}

.wc_payment_method .payment_box {
	margin-top: 8px;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--color-text-muted);
}

.wc_payment_method .payment_box::before {
	display: none;
}

.woocommerce-terms-and-conditions-wrapper {
	margin: 20px 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

.woocommerce-form__input-checkbox {
	accent-color: var(--color-secondary);
}

/* Bouton pleine largeur retiré : un bouton normal, centré, comme les
   autres CTA du site (demande utilisateur 2026-09-23). Le plugin le flotte
   à droite par défaut via `.woocommerce #payment #place_order{float:right}`
   (woocommerce-layout.css) — `text-align:center` seul sur le parent n'a
   donc aucun effet ; il faut reprendre le même sélecteur (2 ID) pour gagner
   en spécificité, un simple `#place_order` (1 ID) ne suffit pas. */
.woocommerce-checkout .place-order {
	text-align: center;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: none;
	display: inline-block;
	width: auto;
}

/* --- Page de remerciement (cf. woocommerce/checkout/thankyou.php) --- */

.thankyou-page {
	max-width: 680px;
	margin: 0 auto;
}

.thankyou-page__hero {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.thankyou-page__hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-circle);
	background-color: rgba(55, 170, 103, 0.12);
	color: var(--color-secondary);
	margin-bottom: 16px;
}

.thankyou-page__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 900;
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.thankyou-page__lead {
	color: var(--color-text-muted);
	font-size: 15px;
}

.thankyou-page__overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.thankyou-page__overview-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
}

.thankyou-page__overview-item dt {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-light);
	margin-bottom: 6px;
}

.thankyou-page__overview-item dd {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	overflow-wrap: anywhere;
}

/* Numéro de commande : bien identifiable, l'utilisateur en a besoin pour
   référencer son virement (demande utilisateur 2026-09-23). */
.thankyou-page__overview-item--highlight {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	grid-column: 1 / -1;
}

.thankyou-page__overview-item--highlight dt {
	color: rgba(255, 255, 255, 0.75);
}

.thankyou-page__overview-item--highlight dd {
	color: var(--color-background);
	font-size: 22px;
	font-weight: 900;
}

/* Message le plus important de l'écran (l'utilisateur doit comprendre que
   son inscription n'est pas encore active) : gras et plus grand que le
   reste du texte courant, demande utilisateur 2026-09-23. */
.thankyou-page__notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background-color: rgba(55, 170, 103, 0.08);
	border: 1px solid rgba(55, 170, 103, 0.25);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	margin-bottom: 24px;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
}

.thankyou-page__notice svg {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-secondary);
	margin-top: 2px;
}

.thankyou-page__notice p {
	margin: 0;
}

.thankyou-page__payment-instructions {
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin-bottom: 32px;
	font-size: 14px;
	color: var(--color-text-secondary);
}

.thankyou-page__payment-instructions p:last-child {
	margin-bottom: 0;
}

.thankyou-page__section-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 12px;
}

.thankyou-page__items {
	margin-bottom: 28px;
}

.thankyou-page__thanks {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 14px;
}

.thankyou-page__failed {
	text-align: center;
	padding: 32px 0;
}

.thankyou-page__failed-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

/* --- Onglet "Mon adhésion" --- */

.stbp-membership__status {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 20px;
	background-color: var(--color-background-alt);
	color: var(--color-text-secondary);
}

.stbp-membership__status--active {
	background-color: rgba(55, 170, 103, 0.12);
	color: var(--color-secondary);
}

.stbp-membership__status--pending_review,
.stbp-membership__status--pending_payment {
	background-color: rgba(245, 158, 11, 0.12);
	color: var(--color-accent);
}

.stbp-membership__status--rejected,
.stbp-membership__status--expired {
	background-color: rgba(220, 38, 38, 0.1);
	color: #dc2626;
}

.stbp-membership__notice--error {
	color: #dc2626;
	font-weight: 600;
}

.stbp-membership__notice--warning {
	background-color: rgba(245, 158, 11, 0.1);
	color: #92400e;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.stbp-membership__notice--warning a {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 700;
}

.stbp-membership__hint {
	color: var(--color-text-muted);
	font-size: 14px;
}

.stbp-membership__payment-instructions {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background-color: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	margin-top: 4px;
}

.stbp-membership__payment-icon {
	flex-shrink: 0;
	color: var(--color-accent);
	margin-top: 2px;
}

.stbp-membership__payment-text {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin-bottom: 8px;
}

.stbp-membership__payment-email {
	display: inline-block;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: underline;
}

.stbp-membership__receipts {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.stbp-membership__receipts-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

.stbp-membership__receipts-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.stbp-membership__form,
.stbp-membership__renew {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 16px;
}

.stbp-membership__form label,
.stbp-membership__renew label {
	font-weight: 600;
	font-size: 14px;
}

.stbp-membership__renew {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

.stbp-membership__renew select {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 10px 12px;
}

/* --- Onglet "Mon laboratoire" --- */

.stbp-laboratoire__form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px;
	max-width: 460px;
}

.stbp-laboratoire__form label {
	font-weight: 600;
	font-size: 14px;
	margin-top: 14px;
}

.stbp-laboratoire__form input[type="text"],
.stbp-laboratoire__form input[type="email"],
.stbp-laboratoire__form input[type="url"],
.stbp-laboratoire__form select,
.stbp-laboratoire__form textarea {
	border-radius: 10px;
	border: 1.5px solid var(--color-border);
	padding: 11px 14px;
	font-family: var(--font-family-base);
}

.stbp-laboratoire__form textarea {
	resize: vertical;
}

.stbp-laboratoire__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important;
}

.stbp-laboratoire__form button {
	margin-top: 20px;
	align-self: flex-start;
}

/* ==========================================================================
   Mon compte — mise en page d'ensemble
   ========================================================================== */

/*
 * Le conteneur grid réel : "Mon compte" est une Page classique (page.php) —
 * `woocommerce_before/after_main_content` (inc/woocommerce.php, qui ajoute
 * `.woocommerce-container`) ne se déclenche que sur les templates WooCommerce
 * natifs (boutique, produit...), jamais sur une Page avec le shortcode
 * [woocommerce_my_account]. Le vrai parent direct de nav/contenu est le
 * <div class="woocommerce"> du shortcode lui-même.
 */
body.woocommerce-account div.woocommerce {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: start;
	gap: 28px;
}

/*
 * Écran de connexion (non connecté) : ni navigation ni
 * `.woocommerce-MyAccount-content` ne sont présents, seuls l'en-tête et
 * `#customer_login` — la grille nav+contenu ci-dessus n'a pas lieu d'être et
 * placerait ces deux blocs côte à côte au lieu de les empiler.
 */
body.stbp-account-login div.woocommerce {
	display: block;
}

/* Placement explicite (pas d'auto-placement) : évite toute ambiguïté avec
   l'ordre de sortie WooCommerce natif. */
body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
}

body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
}

/*
 * WooCommerce core (woocommerce-layout.css) positionne nav/contenu avec
 * `float` + `width: 30%/68%` (même spécificité, 0,2,0, que nos règles) : selon
 * l'ordre de chargement des feuilles de style, cette règle native peut
 * l'emporter sur le passage en grid ci-dessus. On neutralise explicitement
 * les deux avec une spécificité supérieure (préfixe `body`), plutôt que de
 * dépendre de l'ordre d'enqueue.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* --- Navigation (carte, icônes) --- */

body.woocommerce-account .woocommerce-MyAccount-navigation {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 8px;
	position: sticky;
	top: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: none;
	border-radius: 0;
	overflow: visible;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 2px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-secondary);
	transition: all var(--transition-base);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background-color: var(--color-background-alt);
	color: var(--color-text);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: rgba(55, 170, 103, 0.1);
	color: var(--color-secondary);
	font-weight: 700;
}

.stbp-account-nav__icon {
	display: flex;
	flex-shrink: 0;
}

.stbp-account-nav__label {
	flex: 1;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-border-light);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--color-text-muted);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background-color: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

/* --- Contenu (carte) --- */

body.woocommerce-account .woocommerce-MyAccount-content {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: clamp(24px, 3vw, 40px);
}

/* --- Tableau de bord --- */

.stbp-dashboard__welcome {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.stbp-dashboard__avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	overflow: hidden;
	flex-shrink: 0;
}

.stbp-dashboard__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stbp-dashboard__avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}

.stbp-dashboard__welcome-text {
	flex: 1;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.stbp-dashboard__greeting {
	font-size: 18px;
	color: var(--color-text);
}

.stbp-dashboard__welcome .stbp-membership__status {
	margin-bottom: 0;
	align-self: flex-start;
}

.stbp-dashboard__logout {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-muted);
	padding: 9px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
}

.stbp-dashboard__logout:hover,
.stbp-dashboard__logout:focus-visible {
	border-color: #dc2626;
	color: #dc2626;
}

.stbp-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.stbp-dashboard__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-base);
}

.stbp-dashboard__card:hover,
.stbp-dashboard__card:focus-visible {
	border-color: var(--color-secondary);
	box-shadow: 0 4px 16px rgba(55, 170, 103, 0.12);
	transform: translateY(-1px);
}

.stbp-dashboard__card-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(26, 79, 168, 0.08);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.stbp-dashboard__card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stbp-dashboard__card-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
}

.stbp-dashboard__card-desc {
	font-size: 12px;
	color: var(--color-text-muted);
}

.stbp-dashboard__card svg {
	flex-shrink: 0;
	color: var(--color-text-light);
}

/* --- Titres/contenus natifs de l'onglet (ex. formulaires, listes) --- */

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 17px;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 16px;
}

/* --- Commandes --- */

.woocommerce-account .woocommerce-orders-table {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-account .woocommerce-orders-table thead th {
	background-color: var(--color-background-alt);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover {
	background-color: var(--color-background-alt);
}

.woocommerce-account .woocommerce-orders-table .button {
	padding: 8px 16px;
	font-size: 12px;
}

.woocommerce-account mark.order-status {
	background: none;
	font-weight: 700;
	color: var(--color-secondary);
}

/* --- Adresses --- */

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.woocommerce-account .woocommerce-Addresses .u-column1 {
	grid-column: 1;
	grid-row: 1;
}

.woocommerce-account .woocommerce-Addresses .u-column2 {
	grid-column: 2;
	grid-row: 1;
}

@media (max-width: 540px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-Addresses .u-column1,
	.woocommerce-account .woocommerce-Addresses .u-column2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/*
 * Même piège que #customer_login (cf. plus haut) : WooCommerce core applique
 * `float` + `width: 48%` à `.col2-set .col-1/.col-2` (même sélecteur que
 * `.u-column1`/`.u-column2` ici) — même spécificité (0,3,0) que notre règle
 * ci-dessous, donc pas de garantie de gagner selon l'ordre de chargement des
 * feuilles de style. Préfixe `body` pour une spécificité supérieure garantie.
 */
body.woocommerce-account .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-Addresses .u-column2 {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* --- Formulaires (détails du compte, adresses) --- */

body.woocommerce-account .woocommerce-MyAccount-content .form-row label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-top: 24px;
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-weight: 800;
	padding: 0 8px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
	body.woocommerce-account div.woocommerce {
		grid-template-columns: 1fr;
	}

	/* Sans ce reset, le placement explicite (grid-column: 2) du contenu créerait
	   une 2e colonne implicite au lieu d'empiler nav/contenu sur une seule. */
	body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-navigation,
	body.woocommerce-account div.woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		flex: 1 1 auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		float: none;
	}

	.stbp-dashboard__welcome {
		flex-direction: column;
		align-items: flex-start;
	}

	.stbp-dashboard__logout {
		align-self: stretch;
		justify-content: center;
	}

	.stbp-account-nav__label {
		font-size: 13px;
	}
}