/* My account, redesigned 28 Oct 2026 (Ben's note 6.4: "account: I want somethhing more clean!", with a minimal sign in screen
   as the reference). Mobile first, the site's tokens (main.css), in the look of checkout and the cart: white, thin forest
   lines, no box per section. The fields and the forest order panel come from checkout.css. */

.acct-band { padding: 20px 0 64px; }
@media (min-width: 900px) { .acct-band { padding: 40px 0 88px; } }
.acct-band .woocommerce-notices-wrapper:not(:empty) { max-width: 760px; margin: 0 auto 16px; }
.acct-band .woocommerce-error, .acct-band .woocommerce-message, .acct-band .woocommerce-info { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--r-2); background: var(--paper); border: 1px solid var(--navy); font-size: 14px; line-height: 1.5; list-style: none; }
.acct-band .woocommerce-error { border-color: var(--sale); color: var(--sale); }
.acct-band .woocommerce-error a, .acct-band .woocommerce-message a:not(.btn, .button), .acct-band .woocommerce-info a:not(.btn, .button) { font-weight: 600; color: inherit; text-decoration: underline; }
.acct-band .woocommerce-message { border-color: var(--glo-success); }
.acct-band :is(.woocommerce-error, .woocommerce-message, .woocommerce-info):focus { outline: none; } /* WooCommerce focuses a new notice for screen readers */
.acct__body:has(> .acct__form) > .woocommerce-notices-wrapper { max-width: 640px; margin-inline: auto; }
/* A notice with its own button (WooCommerce's "Confirm your email address" on Your orders): the line, then the button */
.acct-band :is(.woocommerce-info, .woocommerce-message):has(> a.button) { display: grid; align-items: center; justify-items: start; gap: 12px 20px; }
@media (min-width: 600px) { .acct-band :is(.woocommerce-info, .woocommerce-message):has(> a.button) { grid-template-columns: minmax(0, 1fr) auto; } }
.acct-band :is(.woocommerce-info, .woocommerce-message) > a.button { order: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--navy); border-radius: 4px; background: #fff; font: 600 14px/1.1 var(--f-body); color: var(--navy); text-align: center; transition: background-color var(--base), color var(--base); }
.acct-band :is(.woocommerce-info, .woocommerce-message) > a.button:hover { background: var(--navy); color: #fff; }

/* A checkbox on white */
.acheck { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 14px/1.3 var(--f-body); color: var(--ink); cursor: pointer; }
.acheck input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--navy); border-radius: 4px; background: #fff center / 16px no-repeat; cursor: pointer; transition: background-color var(--fast); }
.acheck input:checked { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3e4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.acheck input:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }

/* Show the password (WooCommerce's button beside a password field), and the strength line under a new one */
.acct .password-input { position: relative; display: block; }
.acct .show-password-input { position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--navy); cursor: pointer; }
.acct .show-password-input::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat; }
.acct .show-password-input.display-password::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); }
.acct .show-password-input:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 0; }
.acct .woocommerce-password-strength { margin: 8px 0 0 2px; font: 600 13px/1.3 var(--f-body); color: var(--navy); }
.acct .woocommerce-password-strength:is(.short, .bad) { color: var(--sale); }
.acct .woocommerce-password-strength.strong { color: var(--glo-success); }
.acct .woocommerce-password-hint { display: block; margin: 4px 0 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Signed out: a store photo beside one short form ------------------------------------------------------------------- */
.gate { display: grid; gap: 4px; max-width: 1120px; margin: 0 auto; }
.gate__photo { position: relative; isolation: isolate; min-height: 150px; margin: 0; overflow: hidden; border-radius: var(--r-2); background: var(--navy); }
.gate__photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.gate__photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(28, 30, 27, .1) 20%, rgba(28, 30, 27, .74)); }
.gate__say { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; padding: 18px 20px; text-align: center; color: #fff; }
.gate__say b { font: 700 22px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.gate__say span { display: none; max-width: 40ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.gate__form { display: grid; align-content: center; justify-items: center; padding: 28px 0 4px; }
.gate__pane { width: 100%; max-width: 400px; scroll-margin-top: calc(var(--glo-head-h) + 20px); }
.gate__pane--register { display: none; }
.gate:has(#acct-register:target) #acct-login { display: none; }
.gate:has(#acct-register:target) .gate__pane--register { display: block; animation: rise-in .25s var(--ease); }
.gate__head { display: grid; justify-items: center; gap: 10px; margin-bottom: 24px; text-align: center; }
.gate__head :is(h1, h2) { font: 800 clamp(32px, 2.6vw + 18px, 44px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; color: var(--navy); }
.gate__head p { max-width: 36ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.gate__mark { width: 44px; height: 44px; stroke-width: 1.8; color: var(--navy); }
.gate form { display: grid; gap: 12px; }
.gate__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; margin-bottom: 4px; }
.gate__link { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.gate__link:hover { color: var(--spruce); }
.gate__swap { display: grid; gap: 10px; margin-top: 32px; text-align: center; }
.gate__swap p, .gate__note { font-size: 14px; color: var(--muted); }
.gate .woocommerce-privacy-policy-text { font-size: 13px; line-height: 1.5; color: var(--muted); }
.gate .woocommerce-privacy-policy-text a { font-weight: 600; color: var(--navy); text-decoration: underline; }
.gate__pane > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 4px; }
@media (min-width: 900px) {
	.gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: 660px; }
	.gate__say { gap: 12px; padding: 40px 48px 44px; }
	.gate__say b { font-size: 40px; }
	.gate__say span { display: block; }
	.gate__form { padding: 48px 40px; }
}

/* Signed in: the head, the account menu, the page ------------------------------------------------------------------- */
.acct { max-width: 1080px; margin: 0 auto; }
.acct__head { display: grid; justify-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.acct__head .lede { margin-inline: auto; }
.acct__nav { margin-bottom: 40px; }
.acct__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.acct__tab { display: grid; justify-items: center; align-content: center; gap: 6px; height: 100%; min-height: 70px; padding: 10px 2px; border: 1px solid var(--navy); border-radius: var(--r-2); background: #fff; color: var(--navy); text-align: center; transition: background-color var(--base), color var(--base), box-shadow var(--base); }
.acct__tab .ico { width: 24px; height: 24px; transition: color var(--base); }
@media (max-width: 599px) { .acct__tabs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* five tiles in one phone row left ~60px a word: "Se déconnecter" ran out of its tile */
.acct__tab span { max-width: 100%; font: 600 12px/1.1 var(--f-body); overflow-wrap: break-word; }
.acct__tab:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.acct__tab[aria-current=page] { background: var(--navy); color: var(--birch); }
.acct__tab[aria-current=page] .ico { color: var(--blaze-light); }
.acct__tab:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
@media (min-width: 600px) {
	.acct__tabs { gap: 10px; max-width: 880px; } /* seven tiles since Back in stock (8 Nov 2026): 760px left 100px a tile, too narrow for "Se déconnecter" */
	.acct__tab { min-height: 88px; gap: 8px; }
	.acct__tab .ico { width: 28px; height: 28px; }
	.acct__tab span { font: 700 17px/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
}
@media (min-width: 600px) and (max-width: 899px) { .acct__tabs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* seven in a row left 85px a tile at 700px: "Commandes" broke mid-word */

.acct__body { max-width: 760px; margin: 0 auto; }
.acct__body:has(> .vo) { max-width: none; }
.acct__sec + .acct__sec, .acct__sec + .acct__pair { margin-top: 56px; }
.acct__text { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); }
.acct__go { display: flex; justify-content: center; margin-top: 20px; }
.acct__empty { display: grid; justify-items: center; gap: 16px; padding: 8px 0; text-align: center; color: var(--muted); }
.acct__pair { display: grid; gap: 56px; }
.acct__pair .acct__sec { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 0; margin: 0; text-align: center; }
.acct__pair .acct__text { margin-bottom: 18px; }
@media (min-width: 700px) { .acct__pair { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* An order as a framed row: photos, number and status, total and View */
.ords { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ord { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "media info" "end end"; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--navy); border-radius: var(--r-2); background: #fff; }
.ord__media { grid-area: media; display: flex; gap: 6px; }
.ord__media .corev__media { width: 64px; }
.ord__media .corev__media:nth-child(n+2), .ord__more { display: none; }
.ord__more { place-items: center; width: 64px; aspect-ratio: 1; border-radius: 4px; background: var(--field-light); font: 600 17px/1 var(--f-head); color: var(--navy); }
.ord__info { grid-area: info; display: grid; gap: 4px; min-width: 0; }
.ord__num { font: 700 19px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.ord__num a { color: var(--navy); }
.ord__num a:hover { color: var(--spruce); }
.ord__meta { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ord__status { display: flex; align-items: center; gap: 6px; font: 600 13.5px/1.2 var(--f-body); color: var(--navy); }
.ord__status .ico { flex: none; width: 17px; height: 17px; }
.ord__status--completed { color: var(--glo-success); }
.ord__status:is(.ord__status--cancelled, .ord__status--failed, .ord__status--refunded) { color: var(--sale); }
.ord__end { grid-area: end; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ord__total { font: 600 24px/1 var(--f-head); letter-spacing: .01em; color: var(--ink); }
.ord__end .btn { min-height: 44px; min-width: 112px; }
@media (min-width: 600px) {
	.ord { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "media info end"; gap: 18px; padding: 14px 18px 14px 14px; }
	.ord__media .corev__media:nth-child(n+2) { display: block; }
	.ord__more { display: grid; }
	.ord__end { display: grid; justify-items: end; gap: 10px; }
}
.acct__pages { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }

/* Back in stock alerts (woocommerce/myaccount/stock-notifications.php): the order row, a product's name for the number. */
.alert__name { font: 700 19px/1.15 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); overflow-wrap: anywhere; }
.alert__name a { color: var(--navy); }
.alert__name a:hover { color: var(--spruce); }
.ord__status--pending { color: var(--muted); }
.alert .ord__end { justify-content: flex-end; flex-wrap: wrap; }

/* Your address */
.addrs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.addr { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px; border: 1px solid var(--navy); border-radius: var(--r-2); background: #fff; }
.addr h2 { margin-bottom: 6px; font: 700 19px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.addr address, .addr p { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); }
.addr .btn { grid-column: 1 / -1; }
@media (min-width: 600px) {
	.addr { grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; }
	.addr .btn { grid-column: auto; min-width: 112px; }
}

/* The forms: the address and your details */
.acct__form { display: grid; gap: 20px; max-width: 640px; margin: 0 auto; }
.acct__form .woocommerce-address-fields { display: grid; gap: 20px; }
.acct .form-row--half { grid-column: span 3; }
.acct__pw summary { display: flex; width: fit-content; margin: 4px auto 0; list-style: none; cursor: pointer; }
.acct__pw summary::-webkit-details-marker { display: none; }
.acct__pw[open] summary { margin-bottom: 16px; }
.acct__pw > .co__fields { animation: rise-in .25s var(--ease); }

/* One order, laid out as the thank you page (checkout.css) */
.vo .ty__actions { flex-wrap: wrap; gap: 12px; }
.vo .vo__updates { margin-top: 32px; }
.vo .ty__step span p { margin: 0; }