/* Client voucher: public/voucher.php and public/espace-client.php.
   The voucher is meant to be printed, so the print rules at the bottom are as
   important as the screen ones: a voucher that breaks across two sheets of A4
   with a half-visible table is not much use to an agency. */

/* ------------------------------------------------- voucher panel (booking.php) */
/* The post-submit popup lives in app.css instead: booking.php does not load this
   stylesheet, so rules written here would never apply to it. */

/* ---------------------------------------------------------------- client space */
.client-main{padding-block:44px 76px;min-height:calc(100vh - 204px)}
.client-lookup{max-width:640px;margin-bottom:38px}
.client-lookup h1{font:700 clamp(28px,4vw,40px)/1.15 Manrope,sans-serif;letter-spacing:-1.2px;margin:0 0 12px}
.client-lede{max-width:520px;color:var(--muted);font-size:13px;line-height:1.7}
.client-form{margin-top:22px;display:grid;gap:9px}
.client-form label{font-size:10px;font-weight:700;color:#59665c;text-transform:uppercase;letter-spacing:.9px}
.client-form-row{display:flex;gap:10px;flex-wrap:wrap}
.client-form input{flex:1 1 240px;min-width:0;height:48px;padding:0 15px;border:1px solid #dfe5dc;border-radius:8px;background:#fff;color:var(--ink);font:600 15px 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase;outline:0}
.client-form input:focus{border-color:#90a48d;box-shadow:0 0 0 3px rgba(145,167,140,.13)}
.client-form input::placeholder{color:#a9b2a8;letter-spacing:1.2px}
.client-form .button{height:48px;white-space:nowrap}
.client-hint{color:#889188;font-size:11px;margin:0}
.client-missing{margin:16px 0 0;padding:12px 15px;border:1px solid #ebd4ac;background:#fff9ed;border-radius:9px;color:#6f5222;font-size:12px}

.client-booking{margin-bottom:38px;padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(25,48,38,.05)}
.client-booking-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid #edf0eb}
.client-booking-head h2{font:700 22px Manrope,sans-serif;letter-spacing:-.6px;margin:0 0 5px}
.client-booking-meta{margin:0;color:var(--muted);font-size:12px}
.client-booking-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.client-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin:22px 0 0}
.client-summary dt{margin-bottom:5px;color:#889188;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.client-summary dd{margin:0;font-size:13px;color:var(--ink)}
.client-summary dd strong{font:700 15px Manrope,sans-serif}
.client-next{margin:22px 0 0;padding:13px 16px;border-radius:9px;background:#f3f6ee;color:#365f44;font-size:12px;line-height:1.65}

.client-steps{padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:var(--sand)}
.client-steps h2{font:700 17px Manrope,sans-serif;margin:0 0 14px}
.client-steps ol{margin:0;padding-left:20px;display:grid;gap:9px;color:var(--muted);font-size:12px;line-height:1.65}
.client-steps strong{color:var(--ink)}
.client-help{margin:18px 0 0;padding-top:15px;border-top:1px solid #e2e0d6;font-size:12px}
.client-help a{color:var(--green);font-weight:700}

/* ------------------------------------------------------------------- voucher */
.voucher-main{padding-block:34px 70px;min-height:calc(100vh - 204px)}
.voucher-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.voucher-hint{margin:20px 0 0;color:var(--muted);font-size:12px;text-align:center}
.voucher-missing{max-width:520px;margin:40px auto;text-align:center}
.voucher-missing h1{font:700 32px Manrope,sans-serif;letter-spacing:-1px;margin:0 0 12px}
.voucher-missing p{color:var(--muted);font-size:13px}
.voucher-missing .button{margin-top:10px}

.voucher{padding:36px 40px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 34px rgba(25,48,38,.05)}
.voucher-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:2px solid var(--green-dark)}
.voucher-brand{display:flex;align-items:center;gap:11px}
.voucher-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--green-dark);color:var(--lime);font:800 19px Manrope,sans-serif}
.voucher-brand strong{display:block;font:700 16px Manrope,sans-serif;letter-spacing:-.4px}
.voucher-brand small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.voucher-code{text-align:right}
.voucher-head-side{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.voucher-code-label{margin:0;color:#889188;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.voucher-code-value{margin:5px 0 0;font:800 24px/1 Manrope,sans-serif;letter-spacing:2px;color:var(--green-dark)}
/* The symbol is a link as well as an image, so tapping it on a phone opens the
   voucher directly. The caption is hidden from assistive tech because the link
   already announces itself through its href and the visible text. */
.voucher-qr{display:grid;justify-items:center;gap:4px;color:#59665c;text-decoration:none}
.voucher-qr svg{display:block;width:104px;height:104px}
.voucher-qr span{max-width:104px;font-size:8px;font-weight:700;line-height:1.35;text-align:center;text-transform:uppercase;letter-spacing:.4px}
.voucher-qr:hover span,.voucher-qr:focus-visible span{color:var(--green-dark)}

.voucher-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid #edf0eb}
.voucher-pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.3px}
.voucher-pill-pending{background:#fff4e2;color:#8a6320}
.voucher-pill-confirmed{background:#e6f0e2;color:#2f5c37}
.voucher-pill-cancelled{background:#fbe6e4;color:#8c2f27}
.voucher-pill-completed{background:#e4edf3;color:#2c5570}
.voucher-service{color:var(--muted);font-size:11px}
.voucher-issued{margin-left:auto;color:#889188;font-size:11px}

.voucher-block{padding:20px 0;border-bottom:1px solid #edf0eb}
.voucher-block h2{margin:0 0 13px;font:700 11px Manrope,sans-serif;text-transform:uppercase;letter-spacing:1.4px;color:#59665c}
.voucher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 26px;margin:0}
.voucher-grid dt{margin-bottom:3px;color:#889188;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.9px}
.voucher-grid dd{margin:0;font-size:13px;line-height:1.5}
.voucher-notes{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.voucher-notes-more{display:none;margin:6px 0 0;color:#889188;font-size:9px;font-style:italic}
.voucher-more-row{display:none}

.voucher-table{width:100%;border-collapse:collapse;font-size:12px}
.voucher-table th,.voucher-table td{padding:9px 8px;text-align:left;border-bottom:1px solid #edf0eb;vertical-align:top}
.voucher-table thead th{color:#889188;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.9px}
.voucher-table small{display:block;margin-top:2px;color:#889188;font-size:10px}
.voucher-num{text-align:right;white-space:nowrap}
.voucher-table tfoot th{padding-top:14px;border-bottom:0;font-size:12px;color:var(--ink)}
.voucher-total{font:700 15px Manrope,sans-serif;color:var(--green-dark)}

.voucher-terms p{margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.7}
.voucher-terms p:last-child{margin-bottom:0}
.voucher-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:20px}
.voucher-foot>div:first-child{display:grid;gap:3px;color:var(--muted);font-size:11px}
.voucher-foot a{color:var(--green);font-weight:700}
.voucher-sign{display:grid;gap:7px;min-width:190px;color:#889188;font-size:10px;text-align:center}
.voucher-sign-line{display:block;border-bottom:1px solid #cfd6cc;height:44px}

@media(max-width:720px){
  .client-main,.voucher-main{padding-block:28px 56px}
  .client-booking,.client-steps,.voucher{padding:20px}
  .voucher-head{gap:16px}
  .voucher-code{text-align:left}
  .voucher-issued{margin-left:0}
  .voucher-grid{grid-template-columns:1fr}
  .voucher-form-row,.client-form-row{flex-direction:column}
  .voucher-foot{align-items:flex-start}
  .voucher-qr svg{width:88px;height:88px}
  .voucher-qr span{max-width:88px}
}

/* --------------------------------------------------------------------- print */
@media print{
  /* Everything that is navigation rather than document is dropped, so the
     voucher fills the sheet instead of sharing it with the site chrome. */
  .site-header,.site-footer,.voucher-toolbar,.voucher-hint,.back-link,.client-lookup,.client-steps,.client-booking-actions{display:none!important}
  html,body{background:#fff!important}
  .voucher-main,.client-main{padding:0!important;min-height:0!important}
  .container{width:100%!important;max-width:none!important}
  .voucher{padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .voucher-head{border-bottom:2px solid #000}
  .voucher-mark{background:#000!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .voucher-code-value,.voucher-total{color:#000!important}
  /* Keep each block whole rather than letting a heading strand at a page break. */
  .voucher-block{break-inside:avoid;page-break-inside:avoid}
  .voucher-table{break-inside:auto}
  .voucher-table tr{break-inside:avoid;page-break-inside:avoid}
  .voucher-pill{border:1px solid #000!important;background:#fff!important;color:#000!important}
  .client-booking{border:0!important;box-shadow:none!important;padding:0!important}
  /* One page is the requirement, so the sheet is sized and the rhythm tightened
     rather than left to chance. The upper blocks sit side by side and the long
     prose runs in columns: an A4 sheet has far more width than a single column of
     text needs, and that space is what buys the second page back. */
  @page{size:A4 portrait;margin:10mm}
  .voucher{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:0;align-content:start;align-items:start}
  .voucher-head,.voucher-status,.voucher-prestation,.voucher-tariff,.voucher-notes-block,.voucher-terms,.voucher-foot{grid-column:1/-1}
  /* Full width is what the addresses need: at half width they wrap to six lines
     each, which costs more height than pairing the block with the client saves. */
  .voucher-prestation .voucher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .voucher-prestation .voucher-field-wide{grid-column:1/-1}
  .voucher-client .voucher-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Columns, not truncation: every word the client wrote still prints. */
  .voucher-notes{column-count:4;column-gap:16px;column-rule:1px solid #e6e9e3}
  /* Free-form prose is the one field with no fixed length, so on paper it is the
     one field allowed to be cut. The cut is stated on the sheet rather than
     hidden, and the QR on the same sheet opens the full text. */
  .voucher-notes-clip{max-height:26mm;overflow:hidden}
  .voucher-notes-more{display:block;font-size:8.5px;margin-top:4px}
  /* The browser keeps every option; the sheet shows what fits and counts the
     rest. Both halves are printed, so the total on the sheet always adds up. */
  .voucher-option-overflow{display:none}
  .voucher-more-row{display:table-row}
  .voucher-more-row td{font-size:8.5px;font-style:italic;color:#59665c}
  .voucher-terms{column-count:2;column-gap:22px}
  .voucher-head{gap:12px;padding-bottom:12px}
  .voucher-head-side{gap:12px;flex-wrap:nowrap}
  .voucher-code-value{font-size:19px}
  .voucher-status{padding:5px 0}
  /* 18mm still leaves every module above a millimetre, which is what a phone
     needs to lock on when the sheet is scanned off a flat surface. */
  .voucher-qr svg{width:17mm;height:17mm}
  .voucher-qr span{max-width:19mm;font-size:7px;letter-spacing:0}
  .voucher-mark{width:22px;height:22px;font-size:12px;border-radius:7px}
  .voucher-brand{gap:8px}
  .voucher-brand strong{font-size:12px}
  .voucher-brand small{font-size:8.5px}
  .voucher-block{padding:3px 0}
  .voucher-block h2{margin-bottom:4px;font-size:9px}
  .voucher-grid{gap:5px 16px}
  .voucher-grid dt{font-size:8px;margin-bottom:1px}
  .voucher-grid dd{font-size:10px;line-height:1.3}
  .voucher-notes{font-size:9px;line-height:1.35}
  .voucher-table{font-size:9.5px}
  .voucher-table th,.voucher-table td{padding:2px 5px}
  .voucher-table small{font-size:8px;margin-top:1px}
  /* The per-unit qualifier sits on the label's own line on screen, which is
     roomier but doubles the height of every option row. Inline, an option costs
     one line, which is what keeps a long option list on the sheet. */
  .voucher-table small{display:inline;margin:0 0 0 5px}
  .voucher-table thead th{font-size:8px}
  .voucher-table tfoot th{padding-top:6px}
  .voucher-total{font-size:11.5px}
  .voucher-terms p{margin-bottom:3px;font-size:8.5px;line-height:1.4}
  .voucher-terms{column-count:3}
  .voucher-foot{padding-top:7px;gap:14px;flex-wrap:nowrap;font-size:9px}
  .voucher-sign{min-width:130px;font-size:8.5px;gap:2px}
  .voucher-sign-line{height:20px}
}