/* ========================================================================== */
/* V24.1 — responsive/canonical hotfix (2026-10-03)                         */
/* Purpose: fix late-cascade overrides on the Solutions hero and harden      */
/* mobile layouts without changing the validated visual direction.           */
/* ========================================================================== */
@media(max-width:1100px){
  .solutions-page-hero-v19{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .solutions-page-hero-v19>*,
  .solutions-detail-head>*,
  .solution-deep-top-v19>*,
  .solution-deep-columns-v19>*{
    min-width:0;
  }
  .solutions-hero-card-v19{
    width:100%;
    max-width:100%;
  }
}

@media(max-width:760px){
  :root{--shell:min(100% - 24px,1240px)}

  /* Global mobile rhythm */
  .hero-copy h1{font-size:clamp(42px,13vw,52px);line-height:.98}
  .section-intro h2{font-size:clamp(36px,11vw,42px)}
  .hero-actions .btn{max-width:100%;white-space:normal;text-align:center}

  /* Keep the globe fully visible on narrow phones instead of cropping it. */
  .hero-visual{min-height:390px;overflow:hidden}
  .globe-stage{width:100%;height:390px}
  #globeCanvas{width:min(340px,88vw);height:min(340px,88vw)}
  .globe-aura{width:min(290px,74vw);height:min(290px,74vw)}
  .globe-ring.gr-a{width:min(310px,80vw);height:min(310px,80vw)}
  .globe-ring.gr-b,.globe-ring.gr-c{width:min(345px,89vw);height:min(184px,47vw)}

  /* Solutions: the V19 desktop declarations came after the older mobile
     rules and were winning in the cascade. Re-assert the intended mobile
     layout here, at the end of the stylesheet. */
  .solutions-page-main{padding-top:80px}
  .solutions-page-hero-v19{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    padding:44px 0 34px;
    min-height:0;
  }
  .solutions-page-hero-v19 h1{
    font-size:clamp(38px,11.5vw,48px);
    line-height:.98;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
  }
  .solutions-page-hero-v19>div>p{font-size:15px;line-height:1.68}
  .solutions-hero-card-v19{
    width:100%;
    max-width:100%;
    padding:22px 18px;
    border-radius:22px;
  }
  .solutions-hero-card-v19 strong{font-size:24px;line-height:1.18}
  .solutions-anchor-row-v19 a{
    max-width:100%;
    height:auto;
    min-height:38px;
    padding:9px 12px;
    white-space:normal;
    text-align:center;
  }
  .solutions-intro-emphasis-v20{
    padding:14px 14px!important;
    border-radius:0 12px 12px 0;
  }
  .solution-deep-card-v19 .solution-meta{
    flex-wrap:wrap;
    align-items:flex-start;
    row-gap:8px;
  }
  .solution-deep-card-v19 h3{font-size:clamp(32px,10vw,42px)}
  .solution-promise-v19{overflow-wrap:anywhere}
  .solution-audience-v19{overflow-wrap:anywhere}
  .solutions-page-cta-v19{padding:26px 18px!important}
  .solutions-page-v19 .btn{
    max-width:100%;
    height:auto;
    min-height:42px;
    padding-top:10px;
    padding-bottom:10px;
    white-space:normal;
    text-align:center;
  }
  .footer,.footer-links{max-width:100%}
  .footer-links{display:flex;flex-wrap:wrap;gap:10px 16px}
}

@media(max-width:360px){
  :root{--shell:min(100% - 20px,1240px)}
  .header .nav{padding-inline:10px}
  .brand strong{font-size:19px}
  .hero-copy h1{font-size:clamp(39px,13vw,46px)}
  .showcase-stage{padding:12px;min-height:520px}
  .tool-scene{inset:12px;padding:44px 10px 14px}
  .btn-primary{max-width:100%}
  .solutions-page-hero-v19 h1{font-size:clamp(36px,11vw,42px)}
  .solution-deep-card-v19{padding:20px 15px}
}

/* ========================================================================== */
/* ViaSolva V24 — mobile animation refinement (2026-10-03)                    */
/* Scope: homepage interactive scenes + Vigie only. Desktop and Solutions stay */
/* unchanged.                                                                  */
/* ========================================================================== */
@media (max-width: 760px) {
  /* Give each mobile scene enough vertical room without forcing desktop scale. */
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]) { min-height: 760px; }
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]) { min-height: 690px; }
  .showcase-stage:has(.tool-scene.active[data-tool="packimmo"]) { min-height: 720px; }

  /* Messagerie: desktop left-to-right flow becomes a readable vertical flow. */
  .tool-scene[data-tool="inbox"] .inbox-demo-v11 {
    gap: 12px !important;
    padding-top: 2px;
  }
  .tool-scene[data-tool="inbox"] .inbox-flow-row {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: 96px 18px 120px 18px 128px;
    gap: 7px !important;
    min-height: 0 !important;
    align-items: stretch;
  }
  .tool-scene[data-tool="inbox"] .mail-drop,
  .tool-scene[data-tool="inbox"] .scan-core,
  .tool-scene[data-tool="inbox"] .reply-card {
    width: min(100%, 290px);
    justify-self: center;
    height: auto !important;
    min-height: 0;
    border-radius: 17px;
  }
  .tool-scene[data-tool="inbox"] .mail-drop {
    flex-direction: row;
    justify-content: flex-start;
    gap: 18px;
    padding: 12px 18px;
    overflow: hidden;
  }
  .tool-scene[data-tool="inbox"] .mailbox { width: 58px; height: 44px; flex: 0 0 auto; }
  .tool-scene[data-tool="inbox"] .envelope { width: 30px; height: 21px; top: 14px; left: 31px; }
  .tool-scene[data-tool="inbox"] .mail-drop small {
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: .13em;
  }
  .tool-scene[data-tool="inbox"] .digital-line {
    width: 2px;
    height: 18px;
    justify-self: center;
    background: linear-gradient(180deg,rgba(83,162,216,.08),rgba(83,162,216,.88),rgba(83,162,216,.08));
  }
  .tool-scene[data-tool="inbox"] .packet {
    top: 0;
    left: -2px;
    width: 6px;
    height: 10px;
    animation: packetRunMobile 2.4s linear infinite;
  }
  @keyframes packetRunMobile {
    0% { top: 0; opacity: 0; }
    16% { opacity: 1; }
    100% { top: calc(100% - 10px); opacity: 0; }
  }
  .tool-scene[data-tool="inbox"] .scan-core {
    padding: 12px 16px;
  }
  .tool-scene[data-tool="inbox"] .scan-core span {
    width: 54px;
    height: 54px;
    margin-bottom: 8px;
    box-shadow: 0 0 0 7px rgba(134,209,255,.05),0 -1px 16px rgba(255,72,72,.08);
  }
  .tool-scene[data-tool="inbox"] .scan-core strong { font-size: 12px; margin-top: 5px; }
  .tool-scene[data-tool="inbox"] .scan-core small { font-size: 8px; }
  .tool-scene[data-tool="inbox"] .reply-card {
    padding: 13px 16px 12px;
  }
  .tool-scene[data-tool="inbox"] .reply-card b { height: 8px; margin-top: 10px; }
  .tool-scene[data-tool="inbox"] .reply-card em {
    margin-top: 12px;
    padding: 6px 10px;
    font-size: 10px;
  }
  .tool-scene[data-tool="inbox"] .inbox-report {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }
  .tool-scene[data-tool="inbox"] .inbox-report > div { padding: 2px 4px 10px 0; }
  .tool-scene[data-tool="inbox"] .report-metric strong { font-size: 24px; }
  .tool-scene[data-tool="inbox"] .report-topic span,
  .tool-scene[data-tool="inbox"] .report-class b { font-size: 8px; }

  /* Ventes: replace tiny absolute desktop cards with a clear 2-column sequence. */
  .tool-scene[data-tool="commercial"] .sales-demo-v11 {
    grid-template-rows: auto auto !important;
    gap: 12px !important;
  }
  .tool-scene[data-tool="commercial"] .sales-process-v13 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(3, 76px);
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px;
    overflow: hidden !important;
  }
  .tool-scene[data-tool="commercial"] .sales-card,
  .tool-scene[data-tool="commercial"] .sales-reminder {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    margin: 0;
  }
  .tool-scene[data-tool="commercial"] .sales-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px 8px !important;
    border-radius: 14px;
  }
  .tool-scene[data-tool="commercial"] .sales-card small { font-size: 6px; margin-bottom: 5px; }
  .tool-scene[data-tool="commercial"] .sales-card strong { font-size: 10px; line-height: 1.25; }
  .tool-scene[data-tool="commercial"] .sc-request { grid-column: 1; grid-row: 1; }
  .tool-scene[data-tool="commercial"] .sc-proposal { grid-column: 2; grid-row: 1; }
  .tool-scene[data-tool="commercial"] .sc-wait { grid-column: 1; grid-row: 2; }
  .tool-scene[data-tool="commercial"] .sc-review { grid-column: 2; grid-row: 2; }
  .tool-scene[data-tool="commercial"] .sales-reminder {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px !important;
    border-radius: 14px;
  }
  .tool-scene[data-tool="commercial"] .sales-reminder small { font-size: 6px; }
  .tool-scene[data-tool="commercial"] .sales-reminder strong { font-size: 9px; line-height: 1.25; }
  .tool-scene[data-tool="commercial"] .reminder-bell { width: 25px; height: 25px; flex: 0 0 auto; }
  .tool-scene[data-tool="commercial"] .sc-follow { grid-column: 2; grid-row: 3; }
  .tool-scene[data-tool="commercial"] .sales-flow-v13,
  .tool-scene[data-tool="commercial"] .sales-process:after { display: none !important; }
  .tool-scene[data-tool="commercial"] .sales-dashboard {
    display: block !important;
    min-height: 0 !important;
    padding: 12px !important;
  }
  .tool-scene[data-tool="commercial"] .dash-head { margin-bottom: 10px !important; }
  .tool-scene[data-tool="commercial"] .dash-head strong { font-size: 13px; }
  .tool-scene[data-tool="commercial"] .dash-funnel { gap: 8px; }
  .tool-scene[data-tool="commercial"] .dash-funnel strong { font-size: 19px; }
  .tool-scene[data-tool="commercial"] .dash-funnel small { display: block; margin: 2px 0 0; font-size: 7px; }
  .tool-scene[data-tool="commercial"] .dash-status {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .tool-scene[data-tool="commercial"] .dash-status span { font-size: 7px; padding: 5px 7px; }

  /* Immo: keep the city, but let the CRM card show its complete content. */
  .tool-scene[data-tool="packimmo"] .immo-demo {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
    height: auto !important;
  }
  .tool-scene[data-tool="packimmo"] .city-canvas-wrap {
    width: 100%;
    height: 280px !important;
    flex: 0 0 280px;
  }
  .tool-scene[data-tool="packimmo"] .crm-panel {
    width: 100%;
    height: auto !important;
    min-height: 300px;
    overflow: visible !important;
    padding: 15px;
    flex: 0 0 auto;
  }
  .tool-scene[data-tool="packimmo"] .crm-head { margin-bottom: 12px; }
  .tool-scene[data-tool="packimmo"] .crm-body { gap: 9px; }
  .tool-scene[data-tool="packimmo"] .crm-tag-row span { padding: 6px 9px; font-size: 10px; }
  .tool-scene[data-tool="packimmo"] .crm-check { margin-top: 3px; padding: 10px 12px; }
  .tool-scene[data-tool="packimmo"] .crm-legal { font-size: 6.5px; line-height: 1.35; margin-top: 2px; }

  /* Vigie: mobile gets a compact control panel instead of a tall empty canvas. */
  .guardian-panel { gap: 0; }
  .guardian-demo.guardian-v9 {
    min-height: 250px !important;
    height: 250px;
    padding: 14px;
  }
  .guardian-v9 .g9-track {
    left: 4%;
    right: 4%;
    top: 47%;
    grid-template-columns: 38px 1fr 38px 1fr 38px 38px 34px 1fr 38px;
  }
  .guardian-v9 .g9-node { width: 38px; height: 38px; border-radius: 11px; }
  .guardian-v9 .g9-node i { width: 13px; height: 13px; }
  .guardian-v9 .g9-lock { width: 34px; height: 34px; border-radius: 10px; }
  .guardian-v9 .g9-lock span { transform: scale(.78); }
  .guardian-v9 .g9-guardian-badge { right: 6%; top: 9%; transform: scale(.82); }
  .guardian-v9 .g9-notification {
    left: 6%;
    right: 6%;
    bottom: 12px;
    padding: 10px 12px;
    gap: 9px;
  }
  .guardian-v9 .g9-notification strong { font-size: 9px; }
  .guardian-copy { padding: 18px 18px 20px; gap: 0; }
  .guardian-line { grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; }
  .guardian-line p { font-size: 14px; line-height: 1.5; }
}

@media (max-width: 360px) {
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]) { min-height: 780px; }
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]) { min-height: 710px; }
  .showcase-stage:has(.tool-scene.active[data-tool="packimmo"]) { min-height: 735px; }
  .tool-scene[data-tool="commercial"] .sales-process-v13 { gap: 8px; padding: 10px; }
  .tool-scene[data-tool="commercial"] .sales-card strong { font-size: 9px; }
  .tool-scene[data-tool="inbox"] .mail-drop,
  .tool-scene[data-tool="inbox"] .scan-core,
  .tool-scene[data-tool="inbox"] .reply-card { width: 100%; }
}

/* ========================================================================== */
/* ViaSolva V25 — mobile polish pass (2026-10-03)                             */
/* Fixes requested after live mobile test:                                     */
/* - Ventes: restore visible arrows / flow cues                                */
/* - Messagerie: recenter 'Prêt à valider'                                     */
/* - Conciergerie: realign branch lines                                        */
/* - Site web: keep 'Système visuel' panel inside frame                        */
/* ========================================================================== */
@media (max-width: 760px) {
  /* ------------------------------ */
  /* SITE WEB                        */
  /* ------------------------------ */
  .tool-scene[data-tool="website"] .webbuild-demo {
    min-height: 560px;
    gap: 10px;
    padding-inline: 0;
  }
  .tool-scene[data-tool="website"] .webbuild-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 12px 10px;
    overflow: hidden;
    align-self: start;
  }
  .tool-scene[data-tool="website"] .panel-head {
    margin-bottom: 2px;
  }
  .tool-scene[data-tool="website"] .panel-head strong {
    font-size: 10px;
    line-height: 1.2;
  }
  .tool-scene[data-tool="website"] .panel-control {
    min-width: 0;
  }
  .tool-scene[data-tool="website"] .panel-control small {
    font-size: 6px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .tool-scene[data-tool="website"] .panel-progress {
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
  }

  /* ------------------------------ */
  /* MESSAGERIE                      */
  /* ------------------------------ */
  .tool-scene[data-tool="inbox"] .reply-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 150px;
    padding: 13px 16px 14px;
    overflow: hidden;
  }
  .tool-scene[data-tool="inbox"] .reply-card em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: 2px;
    align-self: flex-start;
    position: relative;
    left: 0;
    bottom: 0;
    white-space: nowrap;
  }

  /* ------------------------------ */
  /* CONCIERGERIE                    */
  /* ------------------------------ */
  .tool-scene[data-tool="concierge"] .concierge-vertical {
    height: 500px;
  }
  .tool-scene[data-tool="concierge"] .cv-node {
    width: 170px;
  }
  .tool-scene[data-tool="concierge"] .cv1 { top: 12px; }
  .tool-scene[data-tool="concierge"] .cv2 { top: 92px; }
  .tool-scene[data-tool="concierge"] .cv3 { top: 172px; }
  .tool-scene[data-tool="concierge"] .cv4 { top: 252px; }
  .tool-scene[data-tool="concierge"] .cv5 { top: 332px; }
  .tool-scene[data-tool="concierge"] .cv-spine {
    top: 42px;
    bottom: 120px;
  }
  .tool-scene[data-tool="concierge"] .cv-branches {
    display: none;
  }
  .tool-scene[data-tool="concierge"] .cv-exception {
    width: 130px;
    bottom: 16px;
  }
  .tool-scene[data-tool="concierge"] .cv-refuse {
    left: 14px;
  }
  .tool-scene[data-tool="concierge"] .cv-silence {
    right: 14px;
  }
  .tool-scene[data-tool="concierge"] .cv-refuse::before,
  .tool-scene[data-tool="concierge"] .cv-silence::before {
    content: "";
    position: absolute;
    top: -34px;
    width: 104px;
    height: 2px;
    background: linear-gradient(90deg, rgba(247,177,83,.18), rgba(247,177,83,.72));
    box-shadow: 0 0 8px rgba(255,174,78,.16);
    transform-origin: center;
  }
  .tool-scene[data-tool="concierge"] .cv-refuse::before {
    right: 22px;
    transform: rotate(-34deg);
  }
  .tool-scene[data-tool="concierge"] .cv-silence::before {
    left: 22px;
    transform: rotate(34deg);
  }
  .tool-scene[data-tool="concierge"] .cv-refuse::after,
  .tool-scene[data-tool="concierge"] .cv-silence::after {
    content: "";
    position: absolute;
    top: -9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffd28e;
    box-shadow: 0 0 16px rgba(255,169,66,.72);
  }
  .tool-scene[data-tool="concierge"] .cv-refuse::after { right: 88px; }
  .tool-scene[data-tool="concierge"] .cv-silence::after { left: 88px; }

  /* ------------------------------ */
  /* VENTES                          */
  /* ------------------------------ */
  .tool-scene[data-tool="commercial"] .sales-process-v13 {
    overflow: visible !important;
  }
  .tool-scene[data-tool="commercial"] .sales-card,
  .tool-scene[data-tool="commercial"] .sales-reminder {
    overflow: visible;
  }
  .tool-scene[data-tool="commercial"] .sales-card::after,
  .tool-scene[data-tool="commercial"] .sales-card::before,
  .tool-scene[data-tool="commercial"] .sales-reminder::after,
  .tool-scene[data-tool="commercial"] .sales-reminder::before {
    pointer-events: none;
  }

  /* Arrow: request -> proposal */
  .tool-scene[data-tool="commercial"] .sc-request::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, rgba(112,205,250,.22), rgba(112,205,250,.85));
    transform: translateY(-50%);
  }
  .tool-scene[data-tool="commercial"] .sc-request::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(112,205,250,.85);
    border-right: 2px solid rgba(112,205,250,.85);
    transform: translate(0,-50%) rotate(45deg);
  }

  /* Arrow: proposal -> review (down) */
  .tool-scene[data-tool="commercial"] .sc-proposal::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, rgba(112,205,250,.22), rgba(112,205,250,.85));
    transform: translateX(-50%);
  }
  .tool-scene[data-tool="commercial"] .sc-proposal::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(112,205,250,.85);
    border-bottom: 2px solid rgba(112,205,250,.85);
    transform: translate(-50%,0) rotate(45deg);
  }

  /* Arrow: reminder -> follow */
  .tool-scene[data-tool="commercial"] .sales-reminder::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, rgba(112,205,250,.22), rgba(112,205,250,.85));
    transform: translateY(-50%);
  }
  .tool-scene[data-tool="commercial"] .sales-reminder::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(112,205,250,.85);
    border-right: 2px solid rgba(112,205,250,.85);
    transform: translate(0,-50%) rotate(45deg);
  }

  /* Small hint between wait and review for sequence readability */
  .tool-scene[data-tool="commercial"] .sc-wait::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, rgba(112,205,250,.18), rgba(112,205,250,.7));
    transform: translateY(-50%);
  }
  .tool-scene[data-tool="commercial"] .sc-wait::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(112,205,250,.7);
    border-right: 2px solid rgba(112,205,250,.7);
    transform: translate(0,-50%) rotate(45deg);
  }
}

@media (max-width: 360px) {
  .tool-scene[data-tool="website"] .webbuild-panel {
    padding: 11px 10px 10px;
  }
  .tool-scene[data-tool="website"] .panel-control small {
    font-size: 5.5px;
  }
  .tool-scene[data-tool="commercial"] .sc-request::after,
  .tool-scene[data-tool="commercial"] .sc-wait::after,
  .tool-scene[data-tool="commercial"] .sales-reminder::after {
    right: -14px;
    width: 15px;
  }
  .tool-scene[data-tool="commercial"] .sc-request::before,
  .tool-scene[data-tool="commercial"] .sc-wait::before,
  .tool-scene[data-tool="commercial"] .sales-reminder::before {
    right: -14px;
  }
}

/* ========================================================================== */
/* ViaSolva V26 — FINAL mobile animation layout                               */
/* Purpose: stable, readable mobile-only layouts validated before next deploy. */
/* ========================================================================== */
.cv-mobile-branches{display:none}

@media (max-width:760px){
  /* Keep the active scene itself clipped and give each tool enough real room. */
  .tool-scene{overflow:hidden}
  .showcase-stage:has(.tool-scene.active[data-tool="concierge"]){min-height:670px}
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]){min-height:850px}
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:900px}
  .showcase-stage:has(.tool-scene.active[data-tool="website"]){min-height:670px}

  /* ---------------------------------------------------------------------- */
  /* CONCIERGERIE — one clean vertical spine + two controlled branches      */
  /* ---------------------------------------------------------------------- */
  .tool-scene[data-tool="concierge"] .concierge-vertical{
    height:500px!important;
    width:100%!important;
    max-width:360px;
    margin:0 auto;
    overflow:visible;
  }
  .tool-scene[data-tool="concierge"] .cv-node{
    width:min(76%,210px)!important;
    min-height:56px;
    left:50%!important;
    transform:translateX(-50%)!important;
  }
  .tool-scene[data-tool="concierge"] .cv1{top:10px!important}
  .tool-scene[data-tool="concierge"] .cv2{top:90px!important}
  .tool-scene[data-tool="concierge"] .cv3{top:170px!important}
  .tool-scene[data-tool="concierge"] .cv4{top:250px!important}
  .tool-scene[data-tool="concierge"] .cv5{top:330px!important}
  .tool-scene[data-tool="concierge"] .cv-spine{
    left:50%!important;
    top:38px!important;
    bottom:116px!important;
    width:2px!important;
    transform:translateX(-50%)!important;
    z-index:2;
  }
  .tool-scene[data-tool="concierge"] .cv-branches{display:none!important}
  .tool-scene[data-tool="concierge"] .cv-refuse::before,
  .tool-scene[data-tool="concierge"] .cv-refuse::after,
  .tool-scene[data-tool="concierge"] .cv-silence::before,
  .tool-scene[data-tool="concierge"] .cv-silence::after{display:none!important}
  .tool-scene[data-tool="concierge"] .cv-mobile-branches{
    display:block!important;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:3;
    pointer-events:none;
    overflow:visible;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-branches path{
    fill:none;
    stroke:#d99a4e;
    stroke-width:.55;
    vector-effect:non-scaling-stroke;
    stroke-linecap:round;
    opacity:.72;
    filter:drop-shadow(0 0 3px rgba(255,177,80,.15));
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-silence{
    stroke-dasharray:4 5;
    opacity:.55!important;
  }
  .tool-scene[data-tool="concierge"] .cv-exception{
    bottom:12px!important;
    width:42%!important;
    min-height:62px;
    padding:10px 8px!important;
    z-index:4;
  }
  .tool-scene[data-tool="concierge"] .cv-refuse{left:3%!important}
  .tool-scene[data-tool="concierge"] .cv-silence{right:3%!important}
  .tool-scene[data-tool="concierge"] .cf-value{
    display:none!important;
  }

  /* ---------------------------------------------------------------------- */
  /* MESSAGERIE — fixed row heights; report can never overlap draft card    */
  /* ---------------------------------------------------------------------- */
  .tool-scene[data-tool="inbox"] .inbox-demo-v11{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    height:auto!important;
    padding-top:2px!important;
  }
  .tool-scene[data-tool="inbox"] .inbox-flow-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:96px 18px 120px 18px 158px!important;
    gap:8px!important;
    min-height:0!important;
    height:auto!important;
    flex:0 0 auto;
  }
  .tool-scene[data-tool="inbox"] .mail-drop,
  .tool-scene[data-tool="inbox"] .scan-core,
  .tool-scene[data-tool="inbox"] .reply-card{
    width:min(100%,300px)!important;
    justify-self:center!important;
    box-sizing:border-box;
    min-height:0!important;
  }
  .tool-scene[data-tool="inbox"] .mail-drop{height:96px!important}
  .tool-scene[data-tool="inbox"] .scan-core{height:120px!important}
  .tool-scene[data-tool="inbox"] .reply-card{
    height:158px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    padding:13px 16px 14px!important;
    overflow:hidden!important;
  }
  .tool-scene[data-tool="inbox"] .reply-card em{
    position:static!important;
    align-self:flex-start!important;
    margin-top:auto!important;
    margin-bottom:0!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .tool-scene[data-tool="inbox"] .inbox-report{
    position:relative!important;
    margin-top:0!important;
    min-height:170px!important;
    height:auto!important;
    flex:0 0 auto;
    box-sizing:border-box;
  }

  /* ---------------------------------------------------------------------- */
  /* VENTES — deliberately simple vertical journey on mobile                */
  /* ---------------------------------------------------------------------- */
  .tool-scene[data-tool="commercial"] .sales-demo-v11{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    height:auto!important;
    padding-top:0!important;
  }
  .tool-scene[data-tool="commercial"] .sales-process-v13{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:24px!important;
    height:auto!important;
    min-height:0!important;
    padding:12px 10px!important;
    overflow:visible!important;
  }
  .tool-scene[data-tool="commercial"] .sales-flow-v13,
  .tool-scene[data-tool="commercial"] .sales-process:after,
  .tool-scene[data-tool="commercial"] .sales-reminder{
    display:none!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:min(88%,300px)!important;
    height:64px!important;
    min-height:64px!important;
    margin:0!important;
    padding:10px 12px!important;
    flex:0 0 auto;
    overflow:visible!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card small{font-size:7px!important;margin-bottom:6px!important}
  .tool-scene[data-tool="commercial"] .sales-card strong{font-size:11px!important;line-height:1.25!important}
  .tool-scene[data-tool="commercial"] .sc-request{order:1}
  .tool-scene[data-tool="commercial"] .sc-proposal{order:2}
  .tool-scene[data-tool="commercial"] .sc-wait{order:3}
  .tool-scene[data-tool="commercial"] .sc-follow{order:4;border-color:rgba(255,191,87,.28)!important;background:linear-gradient(180deg,rgba(47,36,29,.84),rgba(22,24,30,.92))!important}
  .tool-scene[data-tool="commercial"] .sc-review{order:5}
  .tool-scene[data-tool="commercial"] .sales-card::before{display:none!important}
  .tool-scene[data-tool="commercial"] .sales-card::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:-20px!important;
    width:2px!important;
    height:16px!important;
    background:linear-gradient(180deg,rgba(112,205,250,.22),rgba(112,205,250,.88))!important;
    transform:translateX(-50%)!important;
    box-shadow:0 0 6px rgba(112,205,250,.22)!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card:not(.sc-review)::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:-22px!important;
    width:7px!important;
    height:7px!important;
    border-right:2px solid rgba(112,205,250,.88)!important;
    border-bottom:2px solid rgba(112,205,250,.88)!important;
    border-top:0!important;
    transform:translateX(-50%) rotate(45deg)!important;
    background:none!important;
  }
  .tool-scene[data-tool="commercial"] .sc-review::after,
  .tool-scene[data-tool="commercial"] .sc-review::before{display:none!important}
  .tool-scene[data-tool="commercial"] .sales-dashboard{
    min-height:0!important;
    height:auto!important;
    flex:0 0 auto;
    box-sizing:border-box;
  }

  /* ---------------------------------------------------------------------- */
  /* SITE WEB — demo and visual-system panel are both inside scene           */
  /* ---------------------------------------------------------------------- */
  .tool-scene[data-tool="website"] .webbuild-demo{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    height:auto!important;
    min-height:0!important;
    padding:4px 0 0!important;
  }
  .tool-scene[data-tool="website"] .webbuild-laptop{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
  }
  .tool-scene[data-tool="website"] .webbuild-screen{height:285px!important}
  .tool-scene[data-tool="website"] .webbuild-panel{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:12px!important;
    margin:0!important;
    overflow:hidden!important;
    flex:0 0 auto!important;
  }
  .tool-scene[data-tool="website"] .panel-head{grid-column:1/-1!important;margin:0 0 4px!important}
  .tool-scene[data-tool="website"] .panel-control{min-width:0!important;margin:0!important}
  .tool-scene[data-tool="website"] .panel-control small{font-size:6px!important;white-space:nowrap!important}
  .tool-scene[data-tool="website"] .panel-progress{grid-column:1/-1!important;width:100%!important;margin:4px 0 0!important}

  /* ---------------------------------------------------------------------- */
  /* VIGIE — one anomaly dot only; remove inherited red circular cross       */
  /* ---------------------------------------------------------------------- */
  .guardian-v9 .n-error .error-cross{display:none!important}
  .guardian-v9 .n-error i{
    width:13px!important;
    height:13px!important;
  }
}

@media(max-width:360px){
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]){min-height:870px}
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:920px}
  .showcase-stage:has(.tool-scene.active[data-tool="website"]){min-height:690px}
  .tool-scene[data-tool="concierge"] .cv-node{width:78%!important}
  .tool-scene[data-tool="commercial"] .sales-card{width:92%!important}
}

/* V26 compact mobile heights after local render QA */
@media (max-width:760px){
  .showcase-stage:has(.tool-scene.active[data-tool="concierge"]){min-height:610px}
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]){min-height:760px}
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:700px}
  .showcase-stage:has(.tool-scene.active[data-tool="website"]){min-height:560px}
}
@media(max-width:360px){
  .showcase-stage:has(.tool-scene.active[data-tool="concierge"]){min-height:625px}
  .showcase-stage:has(.tool-scene.active[data-tool="inbox"]){min-height:780px}
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:720px}
  .showcase-stage:has(.tool-scene.active[data-tool="website"]){min-height:580px}
}

/* ========================================================================== */
/* ViaSolva V27 — mobile scenario polish                                      */
/* Conciergerie: green positive + orange negative moving scenario markers.    */
/* Ventes: coherent 6-step journey ending with "Relance à envoyer".           */
/* ========================================================================== */
.sales-card.sc-send{display:none}

@media (max-width:760px){
  /* Concierge mobile scenario markers. The SVG scales with the mobile scene,
     so the markers stay on the exact same route at 320 / 390 / 430 px. */
  .tool-scene[data-tool="concierge"] .cv-mobile-dot{
    vector-effect:non-scaling-stroke;
    stroke-width:.35;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-dot-positive{
    fill:#63e6ad;
    stroke:#baf8dc;
    filter:drop-shadow(0 0 2px rgba(99,230,173,.95)) drop-shadow(0 0 5px rgba(99,230,173,.55));
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-dot-negative{
    fill:#ffb45c;
    stroke:#ffe0aa;
    filter:drop-shadow(0 0 2px rgba(255,180,92,.95)) drop-shadow(0 0 5px rgba(255,156,54,.55));
  }

  /* Sales mobile: one explicit sequence, no duplicate "relance à valider". */
  .tool-scene[data-tool="commercial"] .sales-process-v13{
    gap:18px!important;
  }
  .tool-scene[data-tool="commercial"] .sc-send{
    display:block!important;
    order:6;
    border-color:rgba(99,230,173,.28)!important;
    background:linear-gradient(180deg,rgba(18,55,58,.88),rgba(11,31,39,.96))!important;
  }
  .tool-scene[data-tool="commercial"] .sc-review::after{
    display:block!important;
  }
  .tool-scene[data-tool="commercial"] .sc-review::before{
    display:block!important;
  }
  .tool-scene[data-tool="commercial"] .sc-send::after,
  .tool-scene[data-tool="commercial"] .sc-send::before{
    display:none!important;
  }
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:770px}
}

@media(max-width:360px){
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){min-height:790px}
}

/* V27.1 — keep concierge mobile scenario dots perfectly circular */
@media (max-width:760px){
  .tool-scene[data-tool="concierge"] .cv-mobile-dot{display:none!important}
  .tool-scene[data-tool="concierge"] .cv-mobile-run{
    position:absolute;
    z-index:3;
    width:10px;
    height:10px;
    margin:-5px 0 0 -5px;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-run-positive{
    left:50%;
    top:7%;
    background:#63e6ad;
    border:1px solid rgba(219,255,239,.9);
    box-shadow:0 0 8px rgba(99,230,173,.95),0 0 18px rgba(99,230,173,.45);
    animation:cvMobilePositive 10s linear infinite;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-run-negative{
    left:50%;
    top:7%;
    background:#ffb45c;
    border:1px solid rgba(255,235,196,.92);
    box-shadow:0 0 8px rgba(255,180,92,.95),0 0 18px rgba(255,156,54,.45);
    animation:cvMobileNegative 10s linear infinite;
  }
  @keyframes cvMobilePositive{
    0%{left:50%;top:7%;opacity:0}
    3%{opacity:1}
    38%{left:50%;top:77.5%;opacity:1}
    46%,100%{left:50%;top:77.5%;opacity:0}
  }
  @keyframes cvMobileNegative{
    0%,48%{left:50%;top:7%;opacity:0}
    53%{left:50%;top:7%;opacity:1}
    84%{left:50%;top:77.5%;opacity:1}
    92%{left:26%;top:86.5%;opacity:1}
    100%{left:26%;top:86.5%;opacity:0}
  }
  .tool-scene[data-tool="commercial"] .sc-send{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
}


/* ========================================================================== */
/* ViaSolva V28 — final mobile sync fixes                                      */
/* Conciergerie: markers synced to Confirmation / Réaffectation.               */
/* Ventes: arrows centered in gaps and confined to process frame.              */
/* ========================================================================== */
@media (max-width:760px){
  /* --- CONCIERGERIE --- */
  .tool-scene[data-tool="concierge"] .cv-mobile-branches{
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-refuse,
  .tool-scene[data-tool="concierge"] .cv-mobile-silence{
    stroke-width:.7!important;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-run{
    width:10px!important;
    height:10px!important;
    margin:-5px 0 0 -5px!important;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-run-positive{
    animation:cvMobilePositiveSync 10s linear infinite!important;
  }
  .tool-scene[data-tool="concierge"] .cv-mobile-run-negative{
    animation:cvMobileNegativeSync 10s linear infinite!important;
  }
  @keyframes cvMobilePositiveSync{
    0%{left:50%;top:7%;opacity:0}
    3%{opacity:1}
    36%{left:50%;top:71.6%;opacity:1}
    48%{left:50%;top:71.6%;opacity:1}
    54%,100%{left:50%;top:71.6%;opacity:0}
  }
  @keyframes cvMobileNegativeSync{
    0%,48%{left:50%;top:7%;opacity:0}
    52%{left:50%;top:7%;opacity:1}
    80%{left:50%;top:71.6%;opacity:1}
    92%{left:24%;top:91.4%;opacity:1}
    100%{left:24%;top:91.4%;opacity:0}
  }

  /* --- VENTES --- */
  .tool-scene[data-tool="commercial"] .sales-process-v13{
    gap:28px!important;
    padding:12px 10px 12px!important;
    overflow:hidden!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card{
    width:min(86%,296px)!important;
    overflow:visible!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card::before,
  .tool-scene[data-tool="commercial"] .sales-card::after{
    display:none!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card:not(.sc-send)::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    bottom:-21px!important;
    width:2px!important;
    height:13px!important;
    background:linear-gradient(180deg,rgba(112,205,250,.20),rgba(112,205,250,.88))!important;
    transform:translateX(-50%)!important;
    box-shadow:0 0 6px rgba(112,205,250,.18)!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card:not(.sc-send)::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    bottom:-21px!important;
    width:7px!important;
    height:7px!important;
    border-right:2px solid rgba(112,205,250,.88)!important;
    border-bottom:2px solid rgba(112,205,250,.88)!important;
    transform:translateX(-50%) rotate(45deg)!important;
    background:none!important;
  }
  .tool-scene[data-tool="commercial"] .sc-send::before,
  .tool-scene[data-tool="commercial"] .sc-send::after{
    display:none!important;
  }
  .tool-scene[data-tool="commercial"] .sales-dashboard{
    margin-top:2px!important;
  }
}

@media (max-width:360px){
  .tool-scene[data-tool="commercial"] .sales-process-v13{
    gap:30px!important;
  }
  .tool-scene[data-tool="commercial"] .sales-card{
    width:min(90%,296px)!important;
  }
}


/* ========================================================================== */
/* ViaSolva V29 — final validation sync + commercial frame fix                */
/* ========================================================================== */
@media (max-width:760px){
  /* --- CONCIERGERIE: node highlights synchronized with travelling markers --- */
  .tool-scene[data-tool="concierge"] .cv5{
    animation:cvPositiveConfirmSyncMobile 10s ease-in-out infinite!important;
  }
  .tool-scene[data-tool="concierge"] .cv-refuse{
    animation:cvRefuseConfirmSyncMobile 10s ease-in-out infinite!important;
  }
  @keyframes cvPositiveConfirmSyncMobile{
    0%,35%,100%{
      border-color:rgba(114,219,188,.18);
      box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
    }
    36%,48%{
      border-color:rgba(110,236,197,.62);
      box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 30px rgba(80,224,181,.20),inset 0 1px 0 rgba(255,255,255,.03);
    }
    52%,99%{
      border-color:rgba(114,219,188,.18);
      box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
    }
  }
  @keyframes cvRefuseConfirmSyncMobile{
    0%,91%{
      border-color:rgba(255,188,98,.17);
      box-shadow:none;
    }
    92%,100%{
      border-color:rgba(255,182,86,.56);
      box-shadow:0 0 28px rgba(255,154,54,.16);
    }
  }

  /* --- VENTES: keep dashboard fully inside the card/frame --- */
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){
    min-height:980px!important;
  }
  .tool-scene[data-tool="commercial"]{
    overflow:hidden!important;
    padding-bottom:22px!important;
  }
  .tool-scene[data-tool="commercial"] .sales-demo-v11{
    gap:14px!important;
  }
  .tool-scene[data-tool="commercial"] .sales-process-v13{
    gap:24px!important;
    padding:10px 10px 6px!important;
  }
  .tool-scene[data-tool="commercial"] .sales-dashboard{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
    align-self:stretch!important;
  }
}

@media (max-width:360px){
  .showcase-stage:has(.tool-scene.active[data-tool="commercial"]){
    min-height:1020px!important;
  }
}

/* V24.2 — final mobile hero title fit */
@media (max-width:760px){
  .hero-copy .hero-title-v17{
    font-size:clamp(38px,10.8vw,42px);
  }
}
@media (max-width:360px){
  .hero-copy .hero-title-v17{
    font-size:38px;
  }
}


/* V24.3 — Immo pricing mobile: four plans fully contained */
@media (max-width:760px){
  .showcase-stage:has(.pricing-scene.active[data-tool="packimmo"]){min-height:860px!important}
  .pricing-scene[data-tool="packimmo"]{overflow:hidden!important}
  .pricing-scene[data-tool="packimmo"] .pricing-grid{grid-template-columns:1fr!important;gap:10px!important}
  .pricing-scene[data-tool="packimmo"] .price-card{min-height:0!important;padding:13px 16px!important}
  .pricing-scene[data-tool="packimmo"] .price-card h4{margin:6px 0 5px!important;font-size:17px!important}
  .pricing-scene[data-tool="packimmo"] .price-card .price{font-size:24px!important;margin-bottom:7px!important}
  .pricing-scene[data-tool="packimmo"] .pricing-note-v22{font-size:10px!important;line-height:1.35!important}
  .pricing-scene[data-tool="packimmo"] .pricing-meta-v25{margin-top:7px!important;padding-top:7px!important;font-size:9px!important}
}
@media (max-width:360px){
  .showcase-stage:has(.pricing-scene.active[data-tool="packimmo"]){min-height:900px!important}
}