/* ===== Bac à sable Démo Chatbot Métier (/demo-ia) — Mockup Smartphone Réaliste ===== */
.dia-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3rem,5.5vw,4.5rem) 0 clamp(2.4rem,4.5vw,3.4rem);
}
.dia-hero-wrap{
  position:relative;
  z-index:2;
  max-width:860px;
}

/* Sélecteur commun Atelier (Démo IA <-> Configurateur de Style) */
.atelier-switch{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem;
  padding:.3rem;
  margin-bottom:1.25rem;
  border-radius:999px;
  background:rgba(10,25,62,.78);
  border:1px solid rgba(120,175,255,.32);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.atelier-pill{
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  padding:.48rem 1rem;
  border-radius:999px;
  color:#c6d9fb;
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
  transition:all .22s ease;
}
.atelier-pill svg{width:15px;height:15px}
.atelier-pill:hover{color:#fff;background:rgba(255,255,255,.08)}
.atelier-pill.is-on{
  background:linear-gradient(135deg,#0b5cff,#00a6ff);
  color:#fff;
  box-shadow:0 8px 20px -6px rgba(11,92,255,.65);
}

.dia-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .85rem;
  padding:.32rem .88rem;
  border-radius:999px;
  background:rgba(16,185,129,.16);
  border:1px solid rgba(52,211,153,.35);
  color:#a7f3d0;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dia-dot{
  width:8px;height:8px;border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.7);
  animation:dia-pulse 2s infinite;
}
@keyframes dia-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.65)}
  60%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
}
.dia-grad{
  background:linear-gradient(110deg,#60a5fa 0%,#38bdf8 48%,#34d399 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.dia-sec{
  --sec-accent:#0b5cff;
  padding:2.3rem 0 3.6rem;
  background:linear-gradient(180deg,#eef4ff 0%,#f8faff 48%,#fff 100%);
}
.dia-sec [hidden]{display:none!important}
.dia-container{
  max-width:980px;
}

/* Sélecteur compact des 4 secteurs */
.dia-sectors{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.68rem;
  margin-bottom:1.6rem;
}
.dia-sector{
  appearance:none;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.75rem .88rem;
  border-radius:1.1rem;
  background:#fff;
  border:1.5px solid #dbe6f7;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 22px -16px rgba(10,25,62,.14);
  transition:transform .22s ease,border-color .2s ease,box-shadow .22s ease,background .2s ease;
}
.dia-sector:hover{transform:translateY(-2px);border-color:#8cb8ff}
.dia-sector.is-active{
  background:linear-gradient(145deg,#071633,#0d2859);
  border-color:var(--sec-accent);
  color:#fff;
  box-shadow:0 16px 32px -14px rgba(11,92,255,.38);
}
.dia-sec-ic{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:.75rem;
  background:#edf4ff;color:#0b5cff;
}
.dia-sector.is-active .dia-sec-ic{background:var(--sec-accent);color:#fff}
.dia-sec-ic svg{width:18px;height:18px}
.dia-sec-txt{display:flex;flex-direction:column;min-width:0}
.dia-sec-txt strong{font-size:.84rem;line-height:1.22;color:#0b1a38}
.dia-sector.is-active .dia-sec-txt strong{color:#fff}
.dia-sec-txt small{margin-top:.1rem;font-size:.71rem;color:#5c7094}
.dia-sector.is-active .dia-sec-txt small{color:#bfd6fc}

/* Grille équilibrée : Smartphone Mockup (400px) + Fiche CRM (reste) */
.dia-stage{
  display:grid;
  grid-template-columns:400px minmax(0,1fr);
  gap:1.5rem;
  align-items:start;
  margin-bottom:2rem;
}

/* Podium sombre mettant en valeur le téléphone */
.dia-phone-pedestal{
  padding:1.05rem 1.15rem 1.35rem;
  border-radius:1.85rem;
  background:radial-gradient(circle at 50% 25%,#122b60 0%,#061128 75%);
  border:1px solid rgba(110,174,255,.28);
  box-shadow:0 24px 60px -22px rgba(6,18,45,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.dia-phone-toolbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.9rem;
}
.dia-phone-hint{
  font-size:.73rem;
  font-weight:700;
  color:#9db7e6;
  letter-spacing:.02em;
}
.dia-head-btns{display:flex;gap:.38rem}
.dia-mini-btn{
  appearance:none;
  padding:.32rem .66rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  color:#eaf2ff;
  font:600 .72rem/1.2 "Public Sans",sans-serif;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.dia-mini-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}

/* ===== CHÂSSIS IPHONE TITANE RÉALISTE ===== */
.dia-iphone{
  position:relative;
  width:100%;
  max-width:356px;
  padding:11px;
  border-radius:46px;
  background:linear-gradient(145deg,#3b4761 0%,#141b2d 42%,#0b101d 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 0 4px rgba(0,0,0,.85),
    0 28px 55px -16px rgba(0,0,0,.72);
}
/* Boutons physiques latéraux */
.dia-hw{
  position:absolute;
  width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,#526282,#242e45);
}
.dia-hw.h1{left:-3px;top:98px;height:28px}
.dia-hw.h2{left:-3px;top:140px;height:48px}
.dia-hw.h3{right:-3px;top:132px;height:64px}

.dia-screen{
  display:flex;
  flex-direction:column;
  height:612px;
  border-radius:36px;
  background:#dce7fa;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

/* Barre d'état iOS + Dynamic Island */
.dia-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem 1.2rem .35rem;
  background:#0a1936;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
}
.dia-sb-time{letter-spacing:.01em}
.dia-island{
  width:86px;height:22px;
  border-radius:99px;
  background:#02050c;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.dia-island i{
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#1e3a8a 25%,#090d1a 70%);
}
.dia-sb-icons{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dia-sb-icons svg{height:10px;width:auto;fill:currentColor}

/* Mini barre navigateur du site client en fond */
.dia-site-peek{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .9rem .55rem;
  background:linear-gradient(180deg,#0a1936,#132c5c);
  color:#bfd5fb;
  font-size:.69rem;
}
.dia-peek-dot{width:6px;height:6px;border-radius:50%;background:#38bdf8}
.dia-peek-url{font-weight:600;color:#e2eeff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dia-peek-tag{
  margin-left:auto;
  padding:.1rem .45rem;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  font-size:.62rem;
}

/* Feuille du widget Chatbot dans l'écran mobile */
.dia-widget-sheet{
  flex:1;
  min-height:0;
  margin-top:-6px;
  border-radius:20px 20px 0 0;
  background:#f5f8ff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 -8px 24px rgba(4,12,30,.28);
}
.dia-chat-head{
  padding:.72rem .95rem;
  background:linear-gradient(130deg,#081838,#0e2c63);
  color:#fff;
  border-bottom:2px solid var(--sec-accent);
}
.dia-brand{display:flex;align-items:center;gap:.62rem}
.dia-avatar{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--sec-accent);
  color:#fff;
  font:800 .78rem/1 "Bricolage Grotesque",sans-serif;
  flex:none;
}
.dia-brand strong{display:block;font-size:.84rem;color:#fff;line-height:1.2}
.dia-status{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.68rem;color:#a7f3d0;
}
.dia-status i{width:6px;height:6px;border-radius:50%;background:#10b981}

.dia-messages{
  flex:1;
  min-height:0;
  padding:.85rem .82rem;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.58rem;
}
.dia-msg{
  max-width:87%;
  padding:.62rem .82rem;
  border-radius:1rem;
  font-size:.8rem;
  line-height:1.44;
  animation:dia-msg-in .26s cubic-bezier(.16,1,.3,1);
}
@keyframes dia-msg-in{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:none}
}
.dia-msg.bot{
  align-self:flex-start;
  background:#fff;
  color:#0f2042;
  border:1px solid #dde8fa;
  border-bottom-left-radius:.28rem;
  box-shadow:0 4px 12px -8px rgba(10,25,62,.14);
}
.dia-msg.user{
  align-self:flex-end;
  background:var(--sec-accent);
  color:#fff;
  border-bottom-right-radius:.28rem;
  font-weight:500;
}
.dia-msg-card{
  margin-top:.48rem;
  padding:.56rem .68rem;
  border-radius:.72rem;
  background:#eef5ff;
  border:1px solid #cce0fc;
  font-size:.74rem;
  color:#17305c;
}
.dia-msg-card strong{display:block;color:#0b5cff;margin-bottom:.16rem;font-size:.76rem}

.dia-typing{
  align-self:flex-start;
  display:inline-flex;
  gap:4px;
  padding:.58rem .78rem;
  border-radius:.9rem;
  background:#fff;
  border:1px solid #dde8fa;
}
.dia-typing i{
  width:6px;height:6px;border-radius:50%;
  background:#6b85b3;
  animation:dia-dot 1.1s infinite ease-in-out;
}
.dia-typing i:nth-child(2){animation-delay:.18s}
.dia-typing i:nth-child(3){animation-delay:.36s}
@keyframes dia-dot{
  0%,80%,100%{transform:translateY(0);opacity:.45}
  40%{transform:translateY(-3px);opacity:1}
}

.dia-quick-wrap{
  padding:.52rem .75rem;
  background:#fff;
  border-top:1px solid #e6eefb;
}
.dia-quick-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.dia-chip{
  appearance:none;
  padding:.34rem .68rem;
  border-radius:999px;
  border:1px solid #c9ddff;
  background:#f3f8ff;
  color:#0b4cd6;
  font:600 .73rem/1.22 "Public Sans",sans-serif;
  cursor:pointer;
  transition:all .16s ease;
}
.dia-chip:hover{
  background:var(--sec-accent);
  border-color:var(--sec-accent);
  color:#fff;
}

.dia-input-bar{
  display:flex;
  gap:.42rem;
  padding:.52rem .72rem;
  background:#fff;
  border-top:1px solid #e6eefb;
}
.dia-input-bar input{
  flex:1;
  min-width:0;
  padding:.48rem .78rem;
  border-radius:999px;
  border:1.5px solid #d5e2f6;
  background:#f8fbff;
  font:500 .78rem/1.25 "Public Sans",sans-serif;
  color:#0a1630;
}
.dia-input-bar input:focus{outline:none;border-color:var(--sec-accent);background:#fff}
.dia-input-bar button{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  border:0;
  background:var(--sec-accent);
  color:#fff;
  cursor:pointer;
  flex:none;
}
.dia-input-bar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.dia-home-bar{
  background:#fff;
  padding:5px 0 7px;
  display:grid;
  place-items:center;
}
.dia-home-bar span{
  width:108px;height:4px;
  border-radius:99px;
  background:#cbd5e1;
}

/* ===== Panneau CRM Dirigeant à droite (raffiné & équilibré) ===== */
.dia-crm-card{
  display:flex;
  flex-direction:column;
  padding:1.55rem 1.6rem;
  border-radius:1.85rem;
  background:linear-gradient(165deg,#071633 0%,#0b214a 100%);
  border:1px solid rgba(110,174,255,.32);
  color:#fff;
  box-shadow:0 22px 55px -24px rgba(6,18,43,.45);
}
.dia-crm-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.75rem;
}
.dia-crm-badge{
  padding:.24rem .68rem;
  border-radius:99px;
  background:rgba(56,189,248,.18);
  color:#7dd3fc;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dia-crm-live{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.74rem;
  color:#6ee7b7;
  font-weight:600;
}
.dia-crm-live i{width:7px;height:7px;border-radius:50%;background:#10b981}
.dia-crm-card h2{
  margin:0 0 .35rem;
  font-size:1.25rem;
  color:#fff;
}
.dia-crm-sub{
  margin:0 0 1.05rem;
  font-size:.84rem;
  color:#b9cef2;
  line-height:1.45;
}

.dia-score-box{
  padding:.82rem .95rem;
  border-radius:1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(147,197,253,.2);
  margin-bottom:1rem;
}
.dia-score-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  margin-bottom:.42rem;
}
.dia-score-head strong{color:#6ee7b7}
.dia-score-bar{
  height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.dia-score-bar span{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,#10b981);
  transition:width .45s cubic-bezier(.16,1,.3,1);
}

.dia-fields{
  margin:0 0 1.15rem;
  display:grid;
  gap:.55rem;
}
.dia-frow-crm{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.7rem;
  padding:.62rem .85rem;
  border-radius:.82rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .35s ease,border-color .35s ease;
}
.dia-frow-crm.is-filled{
  background:rgba(16,185,129,.13);
  border-color:rgba(52,211,153,.4);
}
.dia-frow-crm dt{font-size:.77rem;color:#9db7e5}
.dia-frow-crm dd{margin:0;font-size:.83rem;font-weight:700;color:#fff;text-align:right}
.dia-frow-crm:not(.is-filled) dd{color:#7892bf;font-weight:500;font-style:italic}

.dia-roi-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  margin-bottom:1.15rem;
}
.dia-roi-strip > div{
  padding:.6rem .5rem;
  border-radius:.8rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.dia-roi-strip small{display:block;font-size:.68rem;color:#9bb4e0}
.dia-roi-strip strong{display:block;margin-top:.12rem;font-size:.82rem;color:#fff}

.dia-crm-cta{display:grid;gap:.55rem;margin-top:auto}
.dia-crm-cta .btn{width:100%;justify-content:center;font-size:.86rem;padding:.72rem 1rem}
.dia-crm-cta .btn.alt{color:#fff;border-color:rgba(255,255,255,.28)}

/* Bloc commande / devis bas de page */
.dia-order-card{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:1.6rem;
  padding:1.85rem;
  border-radius:1.75rem;
  background:#fff;
  border:1px solid #d7e3f7;
  box-shadow:0 20px 50px -24px rgba(10,25,62,.14);
  scroll-margin-top:6rem;
}
.dia-eyebrow{
  display:inline-block;
  margin-bottom:.45rem;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#0b5cff;
}
.dia-order-copy h2{margin:0 0 .55rem;font-size:1.42rem}
.dia-order-copy p{color:#4d6185;margin:0 0 1rem;font-size:.92rem}

.dia-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dia-selected-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.36rem .82rem;
  margin-bottom:.9rem;
  border-radius:999px;
  background:#eef4ff;
  border:1px solid #cfe0ff;
  font-size:.8rem;
  color:#274478;
}
.dia-selected-pill strong{color:#0b5cff}
.dia-frow{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  align-items:end;
}
.dia-field{margin-bottom:.75rem}
.dia-field label{display:block;margin-bottom:.26rem;font-size:.79rem;font-weight:700;color:#182c52}
.dia-field input,
.dia-field textarea{
  width:100%;
  padding:.64rem .85rem;
  border-radius:.78rem;
  border:1.5px solid #d4e1f5;
  background:#f9fbff;
  font:500 .89rem/1.4 "Public Sans",sans-serif;
  color:#0a1630;
}
.dia-field input:focus,
.dia-field textarea:focus{outline:none;border-color:#0b5cff;background:#fff}
.dia-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.2rem 0 .95rem;
  font-size:.82rem;
  line-height:1.45;
  font-weight:500;
  color:#4f6284;
  cursor:pointer;
}
.dia-consent input{
  flex:none;
  width:1.125rem;
  height:1.125rem;
  min-width:1.125rem;
  min-height:0;
  margin:.16rem 0 0;
  padding:0;
  accent-color:#0b5cff;
  cursor:pointer;
}
.dia-submit-btn{width:100%;justify-content:center}
.dia-feedback{
  margin:.85rem 0 0;
  padding:.75rem .95rem;
  border-radius:.85rem;
  font-size:.85rem;
  font-weight:600;
}
.dia-feedback.is-ok{background:#dcfce7;color:#065f46;border:1px solid #86efac}
.dia-feedback.is-err{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}

@media (max-width:920px){
  .dia-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dia-stage{grid-template-columns:minmax(0,1fr)}
  .dia-order-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:580px){
  .dia-sectors,.dia-frow,.dia-roi-strip{grid-template-columns:minmax(0,1fr)}
  .dia-phone-pedestal{padding:.85rem .75rem 1.1rem}
  .dia-screen{height:560px}
  .dia-order-card{padding:1.3rem}
}