.service-builder{
  margin:0 0 20px;
  overflow:hidden;
  border:1px solid var(--b-line);
  border-radius:22px;
  background:var(--b-surface);
  box-shadow:var(--b-shadow-sm);
}

.service-builder-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:23px 24px;
  border-bottom:1px solid var(--b-line);
  background:linear-gradient(135deg,var(--b-surface),var(--b-surface-2));
}

.service-builder-head h2{
  margin:4px 0 7px;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:28px;
  font-weight:400;
}

.service-builder-head p{
  max-width:720px;
  margin:0;
  color:var(--b-muted);
  font-size:11px;
  line-height:1.65;
}

.service-builder-draft{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid rgba(160,99,58,.18);
  border-radius:999px;
  background:var(--b-brand-soft);
  color:var(--b-brand-dark);
  font-size:8px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.service-builder-form{
  padding:21px 24px 24px;
}

.service-builder-path{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:11px 13px;
  border:1px solid var(--b-line);
  border-radius:13px;
  background:var(--b-surface-2);
  font-size:10px;
}

.service-builder-path span{
  color:var(--b-subtle);
}

.service-builder-path strong{
  color:var(--b-ink);
}

.service-builder-levels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.service-builder-level{
  position:relative;
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  gap:11px;
  padding:16px;
  border:1px solid var(--b-line);
  border-radius:16px;
  background:#fff;
}

.service-builder-number{
  width:31px;
  height:31px;
  border-radius:10px;
  background:var(--b-brand-soft);
  color:var(--b-brand-dark);
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
}

.service-builder .field small{
  display:block;
  margin-top:6px;
  color:var(--b-subtle);
  font-size:8.5px;
  line-height:1.5;
}

.service-builder .field-label em{
  margin-left:4px;
  color:var(--b-subtle);
  font-size:8px;
  font-style:normal;
  font-weight:600;
}

.service-builder-trade{
  max-width:430px;
  margin-top:13px;
}

.service-builder-services{
  margin-top:17px;
  border:1px solid var(--b-line);
  border-radius:17px;
  overflow:hidden;
  background:var(--b-surface-2);
}

.service-builder-services-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 16px;
  border-bottom:1px solid var(--b-line);
  background:#fff;
}

.service-builder-services-head>div{
  display:flex;
  align-items:center;
  gap:11px;
}

.service-builder-services-head strong{
  display:block;
  font-size:11px;
}

.service-builder-services-head p{
  margin:3px 0 0;
  color:var(--b-subtle);
  font-size:8.5px;
}

.service-builder-rows{
  display:grid;
  gap:8px;
  padding:12px;
}

.service-builder-row{
  display:grid;
  grid-template-columns:27px minmax(200px,1.7fr) minmax(100px,.55fr) minmax(100px,.55fr) minmax(125px,.7fr) 34px;
  gap:9px;
  align-items:end;
  padding:11px;
  border:1px solid var(--b-line);
  border-radius:13px;
  background:#fff;
}

.service-builder-row-index{
  width:25px;
  height:25px;
  margin-bottom:7px;
  border-radius:8px;
  background:var(--b-surface-3);
  color:var(--b-muted);
  display:grid;
  place-items:center;
  font-size:8px;
  font-weight:800;
}

.service-builder-unit{
  position:relative;
}

.service-builder-unit .input{
  padding-right:35px;
}

.service-builder-unit span{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:var(--b-subtle);
  font-size:9px;
  pointer-events:none;
}

.service-builder-remove{
  width:32px;
  height:32px;
  margin-bottom:1px;
  border:1px solid var(--b-line);
  border-radius:10px;
  background:#fff;
  color:var(--b-danger);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.service-builder-remove:disabled{
  opacity:.28;
  cursor:not-allowed;
}

.service-builder-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:17px;
}

.service-builder-foot p{
  max-width:670px;
  margin:0;
  color:var(--b-muted);
  font-size:9px;
  line-height:1.55;
}

@media(max-width:1100px){
  .service-builder-row{
    grid-template-columns:27px minmax(190px,1.4fr) repeat(3,minmax(105px,.7fr)) 34px;
  }
}

@media(max-width:800px){
  .service-builder-head,
  .service-builder-services-head,
  .service-builder-foot{
    align-items:stretch;
    flex-direction:column;
  }

  .service-builder-form,
  .service-builder-head{
    padding:18px;
  }

  .service-builder-levels{
    grid-template-columns:1fr;
  }

  .service-builder-row{
    grid-template-columns:27px minmax(0,1fr) 34px;
  }

  .service-builder-row-index{
    grid-column:1;
    grid-row:1;
  }

  .service-builder-name{
    grid-column:2;
    grid-row:1;
  }

  .service-builder-remove{
    grid-column:3;
    grid-row:1;
  }

  .service-builder-row>.field:not(.service-builder-name){
    grid-column:2 / 4;
  }

  .service-builder-foot .btn,
  .service-builder-services-head .btn{
    width:100%;
  }
}

@media(max-width:520px){
  .service-builder-head h2{
    font-size:25px;
  }

  .service-builder-draft{
    align-self:flex-start;
  }

  .service-builder-level{
    grid-template-columns:1fr;
  }
}


/* REFONTE CARTE PRESTATIONS V2 */
.service-builder{
  display:none;
}

.service-builder.is-open{
  display:block;
}

.service-builder-head-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.service-builder-close{
  width:34px;
  height:34px;
  border:1px solid var(--b-line);
  border-radius:11px;
  background:#fff;
  color:var(--b-muted);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.service-prestations-layout{
  display:none!important;
}

.service-tree-card{
  overflow:hidden;
  border:1px solid var(--b-line);
  border-radius:22px;
  background:var(--b-surface);
  box-shadow:var(--b-shadow-sm);
}

.service-tree-main-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  border-bottom:1px solid var(--b-line);
}

.service-tree-main-head h2{
  margin:4px 0 5px;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:30px;
  font-weight:400;
}

.service-tree-main-head p{
  margin:0;
  color:var(--b-muted);
  font-size:10px;
}

.service-tree-families{
  display:grid;
  gap:16px;
  padding:18px;
}

.service-family-card{
  overflow:hidden;
  border:1px solid var(--b-line);
  border-radius:18px;
  background:var(--b-surface-2);
}

.service-family-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 18px;
  border-bottom:1px solid var(--b-line);
  background:linear-gradient(135deg,#fff,var(--b-surface-2));
}

.service-family-head span,
.service-type-head span{
  display:block;
  color:var(--b-brand);
  font-size:8px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.service-family-head h3{
  margin:4px 0 3px;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:25px;
  font-weight:400;
}

.service-family-head p{
  margin:0;
  color:var(--b-subtle);
  font-size:8px;
}

.service-family-actions,
.service-type-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.service-family-types{
  display:grid;
  gap:11px;
  padding:13px;
}

.service-type-card{
  overflow:hidden;
  border:1px solid var(--b-line);
  border-radius:15px;
  background:#fff;
}

.service-type-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:13px 14px;
  border-bottom:1px solid var(--b-line);
  background:var(--b-surface-2);
}

.service-type-head h4{
  margin:4px 0 0;
  font-size:13px;
}

.service-tree-services{
  display:grid;
}

.service-tree-service{
  border-bottom:1px solid var(--b-line);
}

.service-tree-service:last-child{
  border-bottom:0;
}

.service-tree-service>summary{
  list-style:none;
  display:grid;
  grid-template-columns:13px minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  min-height:67px;
  padding:11px 14px;
  cursor:pointer;
}

.service-tree-service>summary::-webkit-details-marker{
  display:none;
}

.service-tree-service>summary:hover{
  background:var(--b-surface-2);
}

.service-tree-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--service-color);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--service-color) 12%,transparent);
}

.service-tree-copy{
  min-width:0;
}

.service-tree-copy strong{
  display:block;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.service-tree-copy small{
  display:block;
  margin-top:4px;
  color:var(--b-muted);
  font-size:8px;
}

.service-tree-edit{
  color:var(--b-brand-dark);
  font-size:9px;
  font-weight:800;
}

.service-tree-editor{
  padding:16px;
  border-top:1px solid var(--b-line);
  background:var(--b-surface-2);
}

.service-inline-editor{
  position:relative;
}

.service-inline-editor>summary{
  list-style:none;
  cursor:pointer;
  color:var(--b-muted);
  font-size:9px;
  font-weight:700;
}

.service-inline-editor>summary::-webkit-details-marker{
  display:none;
}

.service-inline-editor form{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  z-index:30;
  width:290px;
  padding:11px;
  border:1px solid var(--b-line);
  border-radius:13px;
  background:#fff;
  box-shadow:var(--b-shadow);
}

.service-inline-editor form .input{
  margin-bottom:8px;
}

.service-tree-empty{
  margin:18px;
}

@media(max-width:800px){
  .service-tree-main-head,
  .service-family-head,
  .service-type-head{
    align-items:stretch;
    flex-direction:column;
  }

  .service-family-actions,
  .service-type-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .service-tree-service>summary{
    grid-template-columns:13px minmax(0,1fr) auto;
  }

  .service-tree-service>summary .badge{
    grid-column:2;
    justify-self:start;
  }

  .service-tree-edit{
    grid-column:3;
    grid-row:1;
  }

  .service-inline-editor form{
    left:0;
    right:auto;
    width:min(290px,calc(100vw - 70px));
  }
}


/* ACTION ARCHIVER PRESTATION */
.service-tree-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.service-tree-archive{
  appearance:none;
  padding:0;
  border:0;
  background:transparent;
  color:var(--b-danger);
  font:inherit;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.service-tree-archive:hover{
  text-decoration:underline;
}

@media(max-width:800px){
  .service-tree-actions{
    grid-column:3;
    grid-row:1 / span 2;
    align-items:flex-end;
    flex-direction:column;
    gap:6px;
  }

  .service-tree-edit{
    grid-column:auto;
    grid-row:auto;
  }
}