@charset "UTF-8";

*{box-sizing:border-box}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scrollbar-width:thin;scrollbar-color:#c3d3d3 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#c3d3d3;border-radius:var(--r-pill);border:3px solid transparent;background-clip:content-box}
html,body{min-height:100%}
body{margin:0;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
     background:url('/img/app-bg.svg') right top / min(1100px,95vw) auto no-repeat fixed, var(--bg);
     /* product surface: the shared rounded-rectangle buttons, no lift shadow */
     --ui-btn-shadow:none}
a:not(.ui-btn){color:var(--teal-ink);text-decoration:none}
a:not(.ui-btn):hover{color:var(--teal-hover);text-decoration:underline}
button,input,select{font:inherit;color:inherit}
:where(:focus-visible){outline:2px solid var(--teal);outline-offset:2px}

/* Split pages: the form on white (left), the pastel panel (right, both rows), region and help under the form. */
.au{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;
    grid-template-areas:"form aside" "foot aside";background:var(--surface)}
.au-form{grid-area:form;display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px) clamp(16px,3.4vw,48px) 0}
/* The one column every signed-out form uses (sign-in, sign-up, password, email check, client sign-in and code,
   waitlist): set here once, never per page. Guarded by tests/Feature/Ui/AccountLayoutTest.php. */
.au{--au-col:420px}
.au-form-in{width:min(100%,var(--au-col))}

.au-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);margin-bottom:clamp(22px,3.4vh,36px)}
.au-brand:not(.ui-btn),.au-brand:not(.ui-btn):hover{text-decoration:none;color:var(--text)}
.au-brand img{display:block;flex:none}
.au-brand .wordmark{font-size:22px}

.au h1,.au-wide h1{margin:0;font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.au h1{text-wrap:pretty} /* balance split « appointment-based » at its hyphen */
.au-lead{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:60ch}
/* A lead that reads as a note (the trial line on /start): a mint box with its icon. */
.au-lead-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border-radius:var(--r-field);background:var(--tint-mint);color:var(--soft)}
.au-lead-note .ui-icon,.au-lead-note svg{flex:none;margin-top:2px;color:var(--teal-ink)}

form.au-fields{margin-top:24px}
.au-field{margin-bottom:14px}
.au-top .ui-btn{margin:0}
.au-foot{max-width:1080px;margin:0 auto;padding:18px clamp(16px,4vw,40px) 28px;font-size:12.5px;line-height:1.55;color:var(--muted);display:grid;gap:4px}
.au-foot-col{grid-area:foot;display:flex;justify-content:center;padding:0 clamp(16px,3.4vw,48px)}
.au-foot-col .au-foot{width:min(100%,var(--au-col));padding:36px 0 28px;max-width:none}
.au-foot p{margin:0}
.au-foot-region{margin:0 0 6px -10px}
.au-foot-region .rs-panel{left:0;right:auto;top:auto;bottom:calc(100% + 6px)}

.au-reveal{position:relative}
.au-reveal .ui-input{padding-right:50px}
.au-reveal .au-reveal-btn{position:absolute;right:4px;top:calc(50% - var(--ui-h-sm) / 2)}
.au-eye-off{display:none}
.au-reveal-btn[aria-pressed=true] .au-eye-off{display:inline}
/* What a new password needs, ticked as it is typed. */
.au-rules{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.au-rules li{display:flex;align-items:center;gap:7px}
.au-rules svg{flex:none}
.au-rules .au-rule-tick{display:none}
.au-rules li.is-met{color:var(--ok-ink)}
.au-rules li.is-met .au-rule-dot{display:none}
.au-rules li.is-met .au-rule-tick{display:inline}

.au-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 0;font-size:13px;flex-wrap:wrap}
.au-row .ui-check{min-height:44px;font-weight:500;color:var(--soft)}
.au-row a{font-weight:600}
.au-submit{margin-top:18px}
.au-transfer{margin:4px 0 0}
.au-transfer .ui-check{min-height:44px;font-weight:500}
.au-transfer-hint{margin:0 0 10px 30px;font-size:12.5px;color:var(--muted);line-height:1.5}
.au-transfer .au-transfer-from{margin:0 0 0 30px}
.au-transfer:not(:has(input[name="data_transfer"]:checked)) .au-transfer-from{display:none}
/* Sign-up step 2: « Décrivez votre entreprise » only once « Autre » is the chosen type (or while it shows an error). */
.au-type:not(:has(option[value="autre"]:checked)) .au-type-other:not(:has([aria-invalid="true"])){display:none}

/* The two-step sign-up (auth.partials.signup-steps): « Étape 1 sur 2 » over two short bars. */
.au-steps{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.au-steps-bars{display:flex;gap:4px}
.au-steps-bars i{display:block;width:28px;height:4px;border-radius:var(--r-pill);background:var(--line)}
.au-steps-bars i.is-done{background:var(--teal)}
.au-alt .ui-btn--link{min-height:44px;font-weight:600;font-size:inherit}

.au-note{border-radius:var(--r-field);padding:12px 14px;font-size:13px;margin:20px 0 0;border:1px solid}
.au-note.ok{background:var(--ok-soft);border-color:#cfeadd;color:var(--ok-ink)}
.au-note.bad{background:var(--bad-soft);border-color:#f3cdd5;color:#a3263c}
.au-note.info,.ob-claim{background:var(--teal-dim);border-color:#c4e7e3;color:var(--teal-ink)}
.au-fields>.au-note.info{margin:0 0 4px}
.ob-claim{border:1px solid #c4e7e3;border-radius:var(--r-field);padding:12px 14px;font-size:13.5px;line-height:1.5;margin:0 0 16px}

.au-alt{margin:22px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.au-alt a{font-weight:600}
.au-fine{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.5}

/* The side panel: a light pastel card, the illustration does the talking; text stays --text / --soft. */
.au-aside{grid-area:aside;position:relative;overflow:hidden;margin:16px 16px 16px 0;border-radius:var(--r-lg);background:var(--tint-mint);
          display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,4vw,56px)}
.au-aside-in{position:relative;width:100%;max-width:520px;margin:0 auto}
/* Computers: the panel stays one screen tall and follows the scroll, so a long form (/start) never leaves it floating in an empty block. */
@media(min-width:900px){ .au-aside{position:sticky;top:16px;align-self:start;height:calc(100vh - 32px);height:calc(100dvh - 32px)} }
.au-aside-title{margin:0;font-family:var(--display);font-weight:var(--fw-display-sub);letter-spacing:var(--track-display-sub);
                font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--text);text-wrap:balance}
.au-aside-body{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--soft);max-width:46ch}
/* The artwork in an inset tile on the tint, on the illustrations' own ground (--tint-hero), a hairline edge, like the mock. */
.au-art{position:relative;margin:32px 0 0;aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--tint-hero);border:1px solid color-mix(in srgb,var(--teal) 12%,transparent)}
.au-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;border-radius:inherit} /* the drawing's ground is #F3F8F6 = the tile's: no blend, no seam */
.is-client .au-art{aspect-ratio:16/10}
/* The square drawing is shown whole (contain) on its own ground: cover would cut the calendar's top. */
.is-client .au-art img{object-fit:contain;object-position:50% 50%}
.au-pcard{position:absolute;left:-16px;top:16px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
          box-shadow:var(--shadow);padding:14px 16px;max-width:24ch}
.au-pcard b{display:block;font-family:var(--display);font-size:30px;line-height:1;font-weight:var(--fw-display);letter-spacing:var(--track-display);
            color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.au-pcard b small{margin-left:5px;font-family:var(--sans);font-size:14px;font-weight:var(--fw-medium);letter-spacing:0;color:var(--muted)}
.au-pcard span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.au-ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.au-ticks li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:var(--r-pill);background:var(--surface);
             border:1px solid var(--line);font-size:14px;font-weight:var(--fw-medium);line-height:1.35;color:var(--text)}
.au-tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--teal-dim);color:var(--teal-ink)}

/* ---------- onboarding (wide) ---------- */
.au-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px clamp(16px,4vw,40px);max-width:1080px;margin:0 auto}
.au-top .au-brand{margin:0}
.au-top form{margin:0}
.au-wide{max-width:1080px;margin:0 auto;padding:12px clamp(16px,4vw,40px) 80px}
.au-wide h1{font-size:clamp(26px,3vw,36px)}
.ob-step{font-size:12.5px;font-weight:600;color:var(--teal-ink);margin:0 0 8px}
.ob-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:clamp(18px,2.4vw,28px);margin-top:22px}
.ob-card fieldset{border:0;margin:0;padding:0;min-width:0}
.ob-card legend{padding:0;font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.ob-h1{font-size:clamp(24px,2.6vw,32px);margin:0;letter-spacing:var(--track-display);line-height:1.12;font-family:var(--display);font-weight:var(--fw-display)}
.ob-search{margin:4px 0 18px;max-width:520px}
.ob-error{margin:0 0 12px}
.ob-postal{grid-column:span 1 !important}
.ob-group{margin-top:18px}
.ob-group:first-of-type{margin-top:0}
.ob-group h2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--soft);margin:0 0 10px}
.ob-group h2 .ui-icon{color:var(--teal)}
.ob-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.tile{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--control);border-radius:var(--r-field);
      background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:500;line-height:1.3;transition:border-color .15s ease,background-color .15s ease}
.tile:hover{border-color:var(--teal);background:#fbfdfd}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--control);flex:none;display:grid;place-items:center}
.tile:has(input:checked){border-color:var(--teal);background:var(--teal-dim);color:var(--teal-ink);font-weight:600}
.tile:has(input:checked) .dot{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px var(--teal-dim)}
.tile:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.tile.other{border-style:dashed;grid-column:1/-1}
.ob-other{margin-top:12px;max-width:520px}
.ob-none{margin:6px 0 0;color:var(--muted);font-size:13px}
.ob-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 14px;margin-top:14px}
.ob-grid .c6{grid-column:span 6}.ob-grid .c4{grid-column:span 4}.ob-grid .c3{grid-column:span 3}.ob-grid .c2{grid-column:span 2}
.ob-chosen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:13px;color:var(--muted)}
.ob-chosen b{color:var(--teal-ink);background:var(--teal-dim);border-radius:var(--r-pill);padding:3px 11px;font-size:12.5px}
/* The primary action stays reachable while scrolling a long list of types. */
/* /app/bienvenue: « Je veux qu’on transfère mes données » under the address, in a light tile. */
.ob-transfer{margin-top:20px;padding:12px 14px 4px;border-radius:var(--r-field);background:var(--bg);display:grid;gap:4px}
.ob-transfer-hint{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--muted)}
.ob-actions{display:flex;justify-content:flex-end;margin-top:22px;position:sticky;bottom:0;z-index:2;padding:12px 0;
  background:linear-gradient(to top,var(--bg) 70%,color-mix(in srgb,var(--bg) 0%,transparent))}


@media(max-width:899px){
  /* Phones: the form first, the panel under it as a short illustrated card, then region and help. */
  .au{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"form" "aside" "foot"}
  .au-form{padding:20px 16px 0}
  .au-brand{margin-bottom:18px}
  .au-aside{margin:32px 16px 0;padding:24px 20px;border-radius:var(--r-card);justify-content:flex-start}
  .au-aside-title{font-size:20px}
  .au-aside-body{font-size:14.5px}
  .au-art{margin-top:16px;aspect-ratio:16/9}
  .au-art img{object-position:50% 70%}
  .is-client .au-art img{object-position:50% 50%}
  /* « rendez-vous » never splits at its hyphen in a narrow panel title */
  .au-aside-title{text-wrap:pretty}
  .au-pcard{display:none}
  .au-ticks{margin-top:16px;flex-direction:column;align-items:flex-start;gap:8px}
  .au-foot-col{padding:0 16px}
  .au-foot-col .au-foot{width:100%;padding:24px 0 32px}
  .ob-grid{grid-template-columns:minmax(0,1fr)}
  .ob-grid .c6,.ob-grid .c4,.ob-grid .c3,.ob-grid .c2{grid-column:auto}
  .ob-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ob-actions .ui-btn{width:100%}
  .ob-postal{grid-column:auto !important}
}
/* Page to page (cross-document view transitions, like the booking steps): sign-up step 1 → step 2 → the texted
   code, sign-in ↔ sign-up. The wordmark, the side panel and the footer stay put; only the form column slides on
   (the new one rising in), and the step's new bar fills in. Browsers without it simply load the page. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .au-brand{view-transition-name:au-brand}
  .au-aside{view-transition-name:au-aside}
  .au-foot-col{view-transition-name:au-foot}
  .au-form-in{view-transition-name:au-form}
  ::view-transition-group(au-brand),::view-transition-old(au-brand),::view-transition-new(au-brand),
  ::view-transition-group(au-aside),::view-transition-old(au-aside),::view-transition-new(au-aside),
  ::view-transition-group(au-foot),::view-transition-old(au-foot),::view-transition-new(au-foot){animation:none}
  ::view-transition-group(au-form){animation-duration:.34s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  ::view-transition-old(au-form){animation:au-out .18s ease-in both}
  ::view-transition-new(au-form){animation:au-in .38s .06s cubic-bezier(.22,1,.36,1) both}
  .au-steps-bars i.is-done:last-child{background:linear-gradient(var(--teal),var(--teal)) 0 0/0 100% no-repeat var(--line);animation:au-fill .5s .2s cubic-bezier(.22,1,.36,1) forwards}
}
@keyframes au-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes au-in{from{opacity:0;transform:translateX(32px)}}
@keyframes au-fill{to{background-size:100% 100%}}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}