/* Artisans : le SMS prêt à envoyer au client et la facture avec son QR code (entreprise fictive, aucun montant).
   Mobile : le téléphone cadré serré sur le SMS, la facture posée dessous.
   À partir de 600 px : composition centrée (460 px au plus, 24 px de marge), la facture posée contre le bord du téléphone. */

.tools{position:relative;display:grid;justify-items:center;width:100%;padding:18px 16px 16px}
.phone--sms{--pw:min(286px,100%);--ph:520px}
/* Mobile : on ne garde que le haut du téléphone (le SMS et son lien d'avis), la coupe passe sous la facture */
.tools .phone--sms{max-height:322px;overflow:hidden;border-radius:46px 46px 0 0;box-shadow:0 0 0 1.5px #2C3554,0 0 0 3px #4A577C}
.tools .phone--sms::before,.tools .phone--sms::after{display:none}
@media (max-width:359px){.tools .phone--sms{max-height:342px}}

/* SMS : en-tête centré, bulle envoyée, lien d'avis, accusé de distribution, champ de saisie */
.sms-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;justify-items:center;align-items:center;row-gap:3px;flex:none;padding:0 14px 10px;border-bottom:1px solid var(--trait)}
.sms-top>.i{grid-row:1/span 2;color:var(--bleu)}
.sms-top .av{grid-column:2}
.sms-name{grid-column:2;color:var(--ink);font:800 .8125rem/1.2 var(--font)}
.chat--sms{background:#fff;justify-content:flex-start}
.chat--sms .chat-day{display:none;background:none;padding:0;margin:0 0 2px}
.chat--sms .b--out{max-width:90%}
.b-link{align-self:flex-end;display:flex;align-items:center;gap:10px;width:90%;padding:9px 10px;border:1px solid var(--trait);border-radius:16px;background:#fff}
.lc-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--ciel);color:var(--bleu-700)}
.phone .lc-tile .i{width:16px;height:16px}
.b-link strong,.b-link small{display:block;font:800 .75rem/1.3 var(--font);color:var(--ink)}
.b-link small{font-weight:600;color:var(--muted)}
.delivered{align-self:flex-end;margin-right:4px;color:var(--muted);font:600 .6875rem/1 var(--font)}
.composer--sms{padding-left:12px}

/* Facture : libellés seuls, puis le QR code qui renvoie vers l'avis */
.invoice{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;width:100%;max-width:360px;margin-top:-17px;padding:14px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(10,22,51,.06),0 18px 40px -16px rgba(10,22,51,.35)}
.inv-k{grid-column:2;color:var(--muted);font:700 .6875rem/1.2 var(--font)}
.inv-n{grid-column:2;margin-top:1px;color:var(--ink);font:800 .875rem/1.3 var(--font);letter-spacing:-.01em}
.inv-lines{display:none;list-style:none;margin-top:8px}
.inv-lines li{padding:6px 0;border-bottom:1px solid var(--trait);color:var(--text);font:600 .75rem/1.3 var(--font)}
.inv-lines li:first-child{border-top:1px solid var(--trait)}
.inv-qr{display:contents}
.inv-qr img{grid-row:1/span 3;grid-column:1;width:72px;height:72px;padding:4px;border:1px solid var(--trait);border-radius:10px}
.inv-qr p{grid-column:2;margin-top:6px;color:var(--ink);font:700 .75rem/1.4 var(--font)}

@media (min-width:600px){
  .stage--tools{min-height:560px}
  .tools{display:block;width:min(100% - 48px,460px);padding:0}
  .tools .phone--sms{position:absolute;right:0;top:50%;max-height:none;border-radius:50px;transform:translateY(-50%);box-shadow:0 0 0 1.5px #2C3554,0 0 0 3px #4A577C,0 44px 80px -36px rgba(3,8,26,.5),0 16px 34px -16px rgba(3,8,26,.35)}
  .tools .phone--sms::before,.tools .phone--sms::after{display:block}
  .phone--sms{--pw:272px;--ph:500px}
  .chat--sms{justify-content:flex-end}
  .chat--sms .chat-day{display:block}
  .invoice{position:absolute;left:0;bottom:14%;display:block;width:210px;margin:0;padding:16px 16px 14px}
  .inv-k,.inv-n,.inv-qr p{grid-column:auto}
  .inv-lines{display:block}
  .inv-qr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:12px}
  .inv-qr img{grid-row:auto;width:64px;height:64px;padding:0;border:0;border-radius:0}
  .inv-qr p{margin:0}
}
@media (min-width:960px){.stage--tools{min-height:620px}}
/* 960-1179 px : scène étroite (~440 px), la facture couvre le bord du téléphone sans toucher au SMS */
@media (min-width:960px) and (max-width:1179px){
  .phone--sms{--pw:240px;--ph:480px}
  .invoice{width:180px}
  .inv-qr{grid-template-columns:1fr;justify-items:start}
}