/* Mon compte */
.compte-pad, .sign, .acc { padding-block-start: clamp(16px, 4vh, 48px); }
@media (max-width: 900px) { .sign, .acc { padding-block-start: 20px; } }
.sign[hidden], .acc[hidden], .sign__card[hidden], .pnl[hidden] { display: none; }

/* signed out */
.sign { padding-inline: clamp(20px, 3.4vw, 48px); padding-block-end: clamp(64px, 12vh, 140px); }
.sign__in { display: grid; gap: 18px; max-inline-size: 520px; margin-inline: auto; }
.sign .h1 { font-size: clamp(48px, 5.4vw, 84px); }
.sign__card { display: grid; gap: 20px; margin-block-start: 14px; padding: clamp(22px, 3vw, 36px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); animation: cardUp .45s cubic-bezier(.16,1,.3,1); }
@keyframes cardUp { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .sign__card { animation: none; } }
.sign fieldset { border: 0; margin: 0; padding: 0; } .sign legend { padding: 0; margin-block-end: 10px; }
.sign .choice svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sent { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--menthe); font: 400 15px/1.45 var(--font-text); }
.sent svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: var(--zellige); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.code { font: 400 30px/1 var(--font-serif); letter-spacing: .4em; text-align: center; padding-inline-start: calc(16px + .4em); }
.sign__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 500 14px/1 var(--font-text); }
.sign__alt .link-btn[disabled] { opacity: .5; cursor: default; text-decoration: none; }

/* signed in */
.acc { padding-block-end: clamp(64px, 10vh, 120px); }
.acc__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; }
.acc__head .h1 { font-size: clamp(48px, 5.4vw, 84px); }
.acc__who { margin: 12px 0 0; font: 400 16px/1.4 var(--font-text); color: var(--encre-soft); }
.acc__dot { margin-inline: 10px; }
.acc__out { color: var(--encre); font-weight: 500; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); transition: text-decoration-color .25s, text-underline-offset .25s; }
.acc__out:hover { text-decoration-color: currentColor; text-underline-offset: 5px; }
.acc__who b { font-weight: 600; }
.tabs.wrap { padding-inline: 0; inline-size: auto; max-inline-size: none; margin-inline: clamp(20px, 3.4vw, 48px); }
.tabs { display: flex; gap: 6px 28px; overflow-x: auto; scrollbar-width: none; margin-block-start: clamp(28px, 5vh, 48px); border-block-end: 1px solid rgba(18,20,18,.14); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { all: unset; flex: none; cursor: pointer; padding-block: 14px 16px; margin-block-end: -1px; border-block-end: 2px solid transparent; font: 400 clamp(20px, 1.7vw, 24px)/1 var(--font-serif); color: rgba(18,20,18,.55); transition: color .25s, border-color .25s; }
.tabs button:hover { color: var(--encre); }
.tabs button[aria-selected="true"] { color: var(--encre); border-color: var(--encre); }
.tabs button:focus-visible { outline: 2px solid var(--zellige); outline-offset: 2px; border-radius: 4px; }
.panels { padding-block-start: clamp(28px, 5vh, 48px); }
.pnl:focus-visible { outline: 2px solid var(--zellige); outline-offset: 8px; border-radius: 6px; }

/* orders */
.orders { display: grid; gap: 20px; max-inline-size: 960px; }
.ord { display: grid; gap: 4px; padding: clamp(20px, 2.4vw, 28px); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 16px 40px -30px rgba(18,20,18,.35); }
.ord__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.ord__ref { margin: 0 0 6px; font: 400 26px/1.15 var(--font-serif); letter-spacing: -.01em; }
.ord__head .small { margin: 0; }
.pill.is-done { background: var(--menthe); } .pill.is-off { background: #eee; color: rgba(18,20,18,.6); }
.ord__lines { list-style: none; margin: 14px 0 0; padding: 0; }
.ord__lines li { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding-block: 10px; border-block-start: 1px solid rgba(18,20,18,.08); }
.ord__lines img { inline-size: 52px; block-size: 62px; object-fit: cover; border-radius: 6px; }
.ord__lines a { display: block; font: 400 19px/1.2 var(--font-serif); color: inherit; text-decoration: none; }
.ord__lines a:hover { text-decoration: underline; }
.ord__lines small { font: 400 13px/1.3 var(--font-text); opacity: .62; }
.ord__p { font: 500 15px/1 var(--font-text); white-space: nowrap; }
.ord__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block-start: 16px; border-block-start: 1px solid rgba(18,20,18,.12); }
.ord__total { font: 400 15px/1 var(--font-text); } .ord__total b { margin-inline-start: 6px; font: 600 18px/1 var(--font-text); }
.ord__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ord__acts .b { padding: 12px 18px; font-size: 15px; }
.ord__acts .link-btn { font: 500 14px/1 var(--font-text); }

/* addresses */
.addr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.addr__list { display: grid; gap: 12px; }
.adr { display: grid; gap: 14px; padding: 20px 22px; border: 1px solid rgba(18,20,18,.14); border-radius: 12px; background: #fff; }
.adr.is-main { border-color: var(--zellige); box-shadow: inset 0 0 0 1px var(--zellige); }
.adr p { margin: 0; font: 400 15px/1.55 var(--font-text); }
.adr__l { display: flex; align-items: center; gap: 10px; margin-block-end: 6px !important; font: 400 23px/1.2 var(--font-serif) !important; }
.adr__acts { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 14px/1 var(--font-text); }
.adr--none { border-style: dashed; background: none; }
.addr__form { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 32px); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 16px 40px -30px rgba(18,20,18,.35); }
.addr__form .field > span { font: 500 14px/1.2 var(--font-text); }
.addr__form label small { font-weight: 400; opacity: .6; }
.addr__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* reminders */
.rem { display: grid; gap: clamp(24px, 4vh, 40px); max-inline-size: 960px; }
.rem__head { display: grid; gap: 12px; }
.rem__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rm { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid rgba(18,20,18,.12); border-radius: 12px; background: #fff; transition: border-color .25s, background-color .25s; }
.rm.is-on { border-color: var(--zellige); background: color-mix(in oklab, var(--menthe) 40%, #fff); }
.rm img { inline-size: 56px; block-size: 66px; object-fit: cover; border-radius: 6px; }
.rm__n { margin: 0 0 4px; font: 400 21px/1.2 var(--font-serif); }
.rm__txt .small { margin: 0; }
.rm__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 12px 20px; }
.rm__ch .select { padding: 10px 36px 10px 14px; border-radius: 99px; font-size: 14px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23121412' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
.rm__ch .select:disabled { opacity: .45; }
.rm--none { grid-template-columns: minmax(0, 1fr); border-style: dashed; background: none; } .rm--none p { margin: 0; font: 400 15px/1.5 var(--font-text); }
.sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 400 14px/1.2 var(--font-text); white-space: nowrap; }
.sw input { appearance: none; position: relative; inline-size: 40px; block-size: 24px; margin: 0; border-radius: 99px; background: rgba(18,20,18,.2); cursor: pointer; transition: background-color .25s; flex: none; }
.sw input::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: #fff; transition: translate .3s cubic-bezier(.16,1,.3,1); }
.sw input:checked { background: var(--zellige); } .sw input:checked::after { translate: 16px 0; }
.sw input:focus-visible { outline: 2px solid var(--zellige); outline-offset: 2px; }

/* appointments (Rendez-vous) */
.rdv { display: grid; gap: clamp(24px, 4vh, 40px); max-inline-size: 960px; }
.rdv__head { display: grid; gap: 12px; }
.rdv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(18px, 2.2vw, 26px); border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 16px 40px -30px rgba(18,20,18,.35); transition: opacity .3s; }
.rv.is-off { box-shadow: none; border: 1px solid rgba(18,20,18,.12); background: none; }
.rv.is-off .rv__date, .rv.is-off .rv__t, .rv.is-off .rv__when { opacity: .55; }
.rv__date { display: grid; place-items: center; align-content: center; gap: 2px; inline-size: 72px; block-size: 76px; border-radius: 10px; background: var(--menthe); color: var(--encre); text-align: center; }
.rv__date b { font: 400 32px/1 var(--font-serif); }
.rv__date small { font: 500 12px/1.1 var(--font-text); opacity: .75; }
.rv__date svg { inline-size: 26px; block-size: 26px; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rv__txt { display: grid; gap: 8px; min-inline-size: 0; }
.rv__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px 16px; }
.rv__t { margin: 0; font: 400 24px/1.15 var(--font-serif); letter-spacing: -.01em; }
.rv__when { display: flex; gap: 8px; align-items: flex-start; margin: 0; font: 400 16px/1.45 var(--font-text); }
.rv__when svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rv__txt .small { margin: 0; }
.rv__ref { opacity: .7; }
.rv__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-start: 6px; }
.rv__acts:empty { display: none; }
.rv__acts .b { padding: 11px 18px; font-size: 15px; }
.rv__acts .link-btn { font: 500 14px/1 var(--font-text); }
.rv__ask { display: grid; gap: 12px; margin-block-start: 6px; padding: 14px 16px; border-radius: 10px; background: color-mix(in oklab, var(--menthe) 45%, #fff); animation: cardUp .35s cubic-bezier(.16,1,.3,1); }
.rv__ask[hidden] { display: none; }
.rv__ask p { margin: 0; font: 400 15px/1.45 var(--font-text); }
.rv__ask div { display: flex; flex-wrap: wrap; gap: 10px; }
.rv__ask .b { padding: 10px 16px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .rv__ask { animation: none; } }
.rv--none { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; border: 1px dashed rgba(18,20,18,.2); box-shadow: none; background: none; } .rv--none p { margin: 0; font: 400 15px/1.5 var(--font-text); }
@media (max-width: 600px) {
  .rv { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .rv__date { inline-size: 56px; block-size: 62px; } .rv__date b { font-size: 26px; }
  .rv__t { font-size: 21px; }
}

/* right-to-left */
[dir="rtl"] .rm { padding: 14px 14px 14px 18px; }
[dir="rtl"] .sw input:checked::after { translate: -16px 0; }
[dir="rtl"] .rm__ch .select { padding: 10px 14px 10px 36px; background-position: left 12px center; }
[dir="rtl"] .code { letter-spacing: .4em; direction: ltr; }

@media (max-width: 900px) { .addr { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .rm { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; }
  .rm img { inline-size: 48px; block-size: 58px; }
  .rm__ctl { grid-column: 1 / -1; justify-content: space-between; }
  .ord__head { flex-direction: column-reverse; gap: 10px; }
  .ord__acts { inline-size: 100%; }
}
@media (max-width: 600px) {
  .rm__ctl { flex-wrap: nowrap; }
  .tabs { gap: 18px; } .tabs button { font-size: 18px; }
  .acc__head { align-items: start; }
}

/* right-to-left: phone numbers and e-mail addresses are typed left to right */
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }

/* sign-in: errors, and the note while e-mail is not connected yet */
.sign__err { font-size: 14px; line-height: 1.45; }
.sign__soon { justify-items: start; }
.sign__soon p { margin: 0; font: 400 16px/1.55 var(--font-text); color: var(--encre-soft); }
.sign__soon[hidden] { display: none; }
#sg-id { text-align: start; }
[dir="rtl"] #sg-id, [dir="rtl"] #pf-mail, [dir="rtl"] #pf-phone { text-align: end; }

/* nothing yet */
.ord--none { justify-items: start; gap: 14px; }
.ord--none p { margin: 0; font: 400 17px/1.5 var(--font-text); }
.ord__total small { margin-inline-start: 6px; font-size: 13px; color: var(--encre-soft); font-weight: 400; }

/* profile and deleting the account */
.prof { display: grid; max-inline-size: 760px; }
.prof__form { display: grid; gap: 18px; }
.prof__form .field small { font-size: 13px; color: var(--encre-soft); }
#pf-mail[readonly] { background: transparent; color: var(--encre-soft); }
.prof__del { display: grid; gap: 12px; justify-items: start; margin-block-start: 12px; padding-block-start: 24px; border-block-start: 1px dashed rgba(18,20,18,.16); }
.prof__del p { margin: 0; max-inline-size: 38em; font: 400 15px/1.55 var(--font-text); color: var(--encre-soft); }
.prof__ask { display: grid; gap: 12px; padding: 16px 18px; border-radius: 12px; background: #f3e6dc; }
.prof__ask[hidden] { display: none; }
.prof__ask p { color: var(--encre); font-weight: 500; }
.prof__ask div { display: flex; flex-wrap: wrap; gap: 10px; }

/* "Continue with Google", under the code button */
.sign__or[hidden] { display: none; }
.sign__or { display: grid; gap: 14px; }
.sign__or > span { display: flex; align-items: center; gap: 12px; color: var(--encre-soft); font: 400 14px/1 var(--font-text); }
.sign__or > span::before, .sign__or > span::after { content: ""; flex: 1; border-block-start: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.sign__g { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.sign__g svg { inline-size: 18px; block-size: 18px; flex: none; }

/* settings: one column of sections, a hairline between them */
.set { display: grid; gap: 18px; padding-block: clamp(28px, 4.5vh, 44px); border-block-start: 1px solid rgba(18,20,18,.14); }
.set:first-child { padding-block-start: 0; border: 0; }
.set .h3 { margin: 0 0 4px; }
.set__sub { margin: 0; font: 400 22px/1.2 var(--font-serif); letter-spacing: -.01em; }
.set__note { margin: 0; max-inline-size: 38em; font: 400 15px/1.55 var(--font-text); color: var(--encre-soft); }
.set__lang { max-inline-size: 320px; }
.set__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.set__act small { font: 400 14px/1.45 var(--font-text); color: var(--encre-soft); }
.set__rows { display: grid; gap: 0; margin: 0; }
.set__rows > div { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 8px 24px; padding-block: 16px; border-block-end: 1px solid rgba(18,20,18,.08); }
.set__rows > div:first-child { padding-block-start: 4px; }
.set__rows dt { font: 500 15px/1.4 var(--font-text); }
.set__rows dd { display: grid; justify-items: start; gap: 6px; margin: 0; font: 400 15px/1.5 var(--font-text); }
.set__rows dd b { font-weight: 600; word-break: break-all; }
.set__rows dd small, .set__rows dd > span { color: var(--encre-soft); font-size: 14px; }
.set__rows .link-btn { font: 500 14px/1 var(--font-text); color: var(--terre); }
@media (max-width: 600px) { .set__rows > div { grid-template-columns: minmax(0, 1fr); } }

/* an on/off switch that reads as one: the whole row toggles */
.switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 14px; background: #fff; cursor: pointer; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 16px 40px -32px rgba(18,20,18,.35); transition: box-shadow .25s; }
.switch:hover { box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 18px 40px -26px rgba(18,20,18,.4); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { position: relative; inline-size: 44px; block-size: 26px; margin-block-start: 2px; border-radius: 999px; background: rgba(18,20,18,.22); transition: background-color .25s var(--ease-out); }
.switch__ui::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease-out); }
.switch input:checked + .switch__ui { background: var(--zellige); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
:dir(rtl) .switch input:checked + .switch__ui::after { transform: translateX(-18px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--zellige); outline-offset: 3px; }
.switch__txt { display: grid; gap: 4px; }
.switch__txt b { font: 500 16px/1.3 var(--font-text); }
.switch__txt small { font: 400 14px/1.5 var(--font-text); color: var(--encre-soft); }
@media (prefers-reduced-motion: reduce) { .switch__ui, .switch__ui::after { transition: none; } }
.prof__form .row2 { align-items: start; }
@media (max-width: 600px) { .acc__dot { display: none; } .acc__out { display: block; margin-block-start: 6px; } }