/* Mockup téléphone RCS — porté de leadtonic.fr, couleurs isolées sur .stage (palette leadtonic identique à canalmail). Chargé sur la home uniquement. */
.stage { --ink:#0F1F46; --ink-2:#3A4A6B; --ink-3:#6B7A98; --ink-4:#9AA7C0; --line:#E6EAF2; --line-2:#D0D7E2; --green:#BFE514; --green-deep:#74C400; --blue-rcs:#0A91EB; --bg-2:#F7F8FB; --bg-3:#EFF3F8; }
  /* ===== Stage : phone + annotations flottantes ===== */
  .stage{ position:relative; }
  .stage-grid{
    position:absolute; inset:-40px;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(60% 60% at 60% 50%, #000 30%, transparent 75%);
    opacity:0.6;
    pointer-events:none;
  }
  .anno{
    position:absolute; font-family:'JetBrains Mono',monospace; font-size:11px;
    color:#fff; background: rgba(0,0,0,0.80);
    border:1px solid rgba(255,255,255,0.08);
    padding:6px 10px; border-radius:999px; white-space:nowrap;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    z-index:5;
    opacity:0; transform: translate(var(--tx, -50%), 6px);
    animation: anno-pop .55s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .anno .dotg{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:6px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 30%, transparent); }
  .anno.a1{ --tx: calc(-50% - 210px); top: 90px;  left: 50%; animation-delay: .15s; }
  .anno.a2{ --tx: calc(-50% + 210px); top: 300px; left: 50%; animation-delay: 1.6s; }
  .anno.a3{ --tx: calc(-50% - 200px); bottom: 60px; left: 50%; animation-delay: 3.0s; }
  @keyframes anno-pop{
    to{ opacity:1; transform: translate(var(--tx, -50%), 0); }
  }
  @media (max-width:1080px){ .anno{ display:none; } }

  /* ===== Phone mock — Solar ENR conversation (hero) ===== */
  .phone{
    position:relative; width:380px; max-width:calc(100vw - 40px); margin:0 auto;
    background:#fff; border:1px solid var(--line-2);
    border-radius:38px; padding:10px;
    box-shadow: 0 1px 0 #fff inset, 0 30px 60px -30px rgba(17,20,14,0.18), 0 6px 12px -8px rgba(17,20,14,0.08);
  }
  .phone-bezel{
    background:#F4F7FC; border-radius:28px; padding:0; overflow:hidden;
    border:1px solid var(--line);
  }
  .phone-status{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 18px 4px;
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-2);
  }
  .phone-status .right{ display:inline-flex; gap:6px; align-items:center; }
  .signal-bars{ display:inline-flex; gap:2px; align-items:flex-end; }
  .signal-bars i{ display:block; width:3px; background:var(--ink-2); border-radius:1px; }
  .signal-bars i:nth-child(1){ height:4px } .signal-bars i:nth-child(2){ height:6px }
  .signal-bars i:nth-child(3){ height:8px } .signal-bars i:nth-child(4){ height:10px }
  .battery{ width:22px; height:11px; border:1px solid var(--ink-2); border-radius:3px; position:relative; padding:1.5px; }
  .battery::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:4px; background:var(--ink-2); border-radius:0 1px 1px 0; }
  .battery i{ display:block; width:80%; height:100%; background:var(--green); border-radius:1px; }
  .convo-header{
    display:flex; align-items:center; gap:10px;
    padding:6px 14px 10px; border-bottom:1px solid var(--line);
  }
  .avatar{
    width:36px; height:36px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:grid; place-items:center;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:18px;
    position:relative;
  }
  .avatar.solar{ background:#fff; border:1px solid var(--line); padding:5px; }
  .avatar.solar img{ width:100%; height:100%; object-fit:contain; display:block; }
  .avatar.auto{ font-size:0; }
  .avatar.auto .car-svg{ width:22px; height:auto; color:#fff; display:block; }
  .avatar .ring{ position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--green); }
  .convo-name{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; }
  .convo-name .verified{
    width:14px; height:14px; border-radius:50%;
    background:var(--blue-rcs); color:#fff;
    display:inline-grid; place-items:center; font-size:9px;
  }
  .convo-sub{ font-size:11px; color:var(--ink-3); font-family:'JetBrains Mono',monospace; letter-spacing:0.02em; }
  .convo-body{
    padding:12px 12px 14px; min-height:220px;
    display:flex; flex-direction:column; gap:6px;
    background:
      radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--green-soft) 80%, transparent), transparent 70%),
      #fff;
  }
  .bubble{
    max-width:80%; padding:8px 12px; border-radius:16px;
    font-size:13px; line-height:1.35;
    animation: pop .45s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes pop{
    from{ opacity:0; transform: translateY(8px) scale(.96) }
    to{ opacity:1; transform:none }
  }
  .bubble.in{ background:var(--bg-2); color:var(--ink); align-self:flex-start; border-bottom-left-radius:6px; }
  .bubble.out{ background:var(--blue-rcs); color:#fff; align-self:flex-end; border-bottom-right-radius:6px; }
  .bubble.in.card{
    padding:0; background:#fff; border:1px solid var(--line); overflow:hidden; max-width:88%;
  }
  .bubble.in.card .photo{
    height:104px;
    background-size:cover; background-position:center;
    position:relative;
  }
  .bubble.in.card.full{
    width: 260px; max-width:88%;
  }
  .bubble.in.card.full .photo{
    width:100%; height:auto;
    aspect-ratio: 1672 / 941;
    /* fallback ratio sans aspect-ratio */
    padding-bottom: 56.28%;
  }
  @supports (aspect-ratio: 1 / 1){
    .bubble.in.card.full .photo{ padding-bottom:0; }
  }
  .bubble.in.card .photo-brand{
    position:absolute; top:10px; left:10px;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.93);
    backdrop-filter:blur(6px);
    padding:4px 10px 4px 4px; border-radius:999px;
    font-size:11px; font-weight:700; color:var(--ink);
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.15);
  }
  .bubble.in.card .photo-brand img{ width:22px; height:22px; }
  .bubble.in.card .body{ padding:8px 12px 10px; }
  .bubble.in.card .title{ font-weight:600; font-size:13px; margin-bottom:2px; }
  .bubble.in.card .desc{ font-size:12px; color:var(--ink-3); }
  .typing{
    display:inline-flex; gap:3px; padding:10px 13px; align-self:flex-start;
    background:var(--bg-2); border-radius:18px; border-bottom-left-radius:6px;
  }
  .typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blink 1.2s infinite ease-in-out; }
  .typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
  @keyframes blink{ 0%,80%,100%{ opacity:.3; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)} }
  .suggestions{ display:flex; gap:6px; align-self:flex-start; flex-wrap:wrap; max-width:88%; }
  .suggestions button{
    background:#fff; border:1px solid var(--line-2); color:var(--blue-rcs);
    border-radius:999px; padding:7px 11px; font-size:12px; font-weight:500;
    font-family:inherit; cursor:pointer;
  }
  .meta-row{ display:flex; gap:6px; font-size:10px; color:var(--ink-4); align-self:flex-end; font-family:'JetBrains Mono',monospace; }
  .meta-row .seen{ color:var(--blue-rcs); }
  .phone-input{
    padding:6px 10px; border-top:1px solid var(--line);
    display:flex; align-items:center; gap:8px;
    background:#EEF3FB;
  }
  .phone-input .pill{
    flex:1; background:#fff; border:1px solid var(--line);
    border-radius:999px; padding:8px 12px; font-size:12px; color:var(--ink-4);
  }
  .phone-input .send{ width:30px; height:30px; border-radius:50%; background:var(--blue-rcs); color:#fff; display:grid; place-items:center; }