/* =========================================================
   Chips & boutons — CSS autonome et optimisé
   (preset-toggle, btnDashedSelect, selects, btnCloseIcone, CTA, tabs)
   ========================================================= */

/* --------- Variables thème --------- */
:root{
  --brand: #003366;
  --brand-rgb: 0,51,102;

  --chip-radius: 8px;
  --chip-height: 38px;
  --chip-pad-x: 12px;
  --chip-gap: 12px;

  --focus-ring: rgba(var(--brand-rgb), .35);
}

/* Reset léger */
*,
*::before,
*::after{ box-sizing: border-box; }

/* --------- 1) Inputs masqués (checkbox/radio) --------- */
.preset-toggle{
  position: absolute;
  width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* --------- 2) Chips (labels) --------- */
.btnDashedSelect{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
  text-align:left;
  white-space:normal;
  vertical-align:top;
  min-height:var(--chip-height);
  padding:6px var(--chip-pad-x);
  margin-top: 10px;
  border-radius:var(--chip-radius);
  border:1px dashed rgba(var(--brand-rgb), .55);
  background:#fff;
  color:var(--brand);
  font-weight:600;
  font-size:.9rem;
  line-height:1.2;
  letter-spacing:.01em;

  box-shadow:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
}
.btnDashedSelect:hover{
  background:rgba(var(--brand-rgb), .04);
  border-style:solid;
  border-color:rgba(var(--brand-rgb), .7);
}
.preset-toggle:checked + .btnDashedSelect{
  background:rgba(var(--brand-rgb), .08);
  border-style:solid;
  border-color:rgba(var(--brand-rgb), .9);
  color:var(--brand);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.btnDashedSelect:focus-visible,
.preset-toggle:focus-visible + .btnDashedSelect{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

/* --------- 3) Conteneurs de chips --------- */
#profilGroup,
#designationList,
#DesignationDeplacement,
#spec-manu,
#spec-other,
#depList{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:var(--chip-gap);
  margin-top: 20px;
}

/* --------- 4) Selects intégrés (heures/personnes) --------- */
label[for="sel-hours"],
label[for="sel-persons"]{ margin-right:8px; }

#sel-hours,
#sel-persons{
  border:0; outline:none; box-shadow:none;
  min-height:32px; line-height:1.2;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 8px center / 12px 8px,
    transparent;
  padding:4px 28px 4px 8px;
}
.btnDashedSelect:focus-within{
  border-style:solid;
  border-color:rgba(var(--brand-rgb), .75);
  background:rgba(var(--brand-rgb), .04);
}

/* --------- 5) Bouton croix (fermer) --------- */
.btnCloseIcone, .btnPenIcone, .btnIcone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:10px;
  border:1px dashed rgba(var(--brand-rgb), .45);
  background:#fff;
  color:var(--brand);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
}
.btnCloseIcone:hover{
  background:rgba(var(--brand-rgb), .06);
  border-color:rgba(var(--brand-rgb), .8);
}
.btnCloseIcone:active{ transform:scale(.98); }
.btnCloseIcone i{ font-size:18px; line-height:0; position:relative; z-index:1; }
/* Fallback si la lib d’icônes n’est pas chargée */
.btnCloseIcone::before{
  content:"";
  width:16px; height:16px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M3 3 L13 13 M13 3 L3 13"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M3 3 L13 13 M13 3 L3 13"/></svg>') center/contain no-repeat;
  background-color:currentColor;
}


.btnPenIcone:hover{
  background:rgba(var(--brand-rgb), .06);
  border-color:rgba(var(--brand-rgb), .8);
}

.btnPenIcone:active{ transform:scale(.98); }
.btnPenIcone i{ font-size:18px; line-height:0; position:relative; z-index:1; }
/* Fallback si la lib d’icônes n’est pas chargée */
.btnPenIcone::before{
  content:"";
  width:16px; height:16px;
  display:inline-block;              /* ← important */
  /* WebKit */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325'/%3E%3C/svg%3E") center / contain no-repeat;

  /* Standard (Firefox, etc.) */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325'/%3E%3C/svg%3E") center / contain no-repeat;

  background-color:currentColor;
}

/* --------- 6) CTA principal (btn-style-1 & .btnValidation fusionnés) --------- */
.btn-style-1,
.btnValidation{
  background:#e3ecf5;
  border:3px solid #336699;
  color:var(--brand);
  border-radius:1.5rem;
  padding:.5rem 1.5rem;
  box-shadow:0 4px 8px rgba(0,51,102,.2);
  text-decoration:none;
  transition:all .3s ease;
  display:inline-block;
}

.btnLeft{display: flex;width:95%}
.btn-style-1{margin-left: 10px;}
.btnValidation{margin:20px}

.btn-style-1:hover,
.btnValidation:hover{
  background:var(--brand);
  color:#fff;
}

/* --------- 7) Onglets latéraux --------- */
.custom-tab{
  display:block;
  width:100%;
  padding:1rem;
  margin-bottom:10px;
  text-align:left;

  background:#f8f9fa;
  color:#495057;
  font-weight:500;

  border:1px solid #ccc;
  border-radius:10px;
  /*border-left:3px solid transparent;*/
  transition:all .2s;
}
.custom-tab.active{
  background:#e9ecef;
  border-left-color:var(--brand);
  color:var(--brand);
  border-left:3px solid;
}

.btn-style-1,
  .btnValidation{ /*display:block;*/ /*width:100%;*/ margin:12px 0; }

  /* --------- 8) Responsive minimal --------- */

@media (max-width:800px){
  .btn-style-1,
  .btnValidation{ /*font-size:clamp(1.05rem, 2.4vw, 1.25rem); */
  margin-bottom: 0px; 
  }
}
@media (max-width:550px){
  .btn-style-1,
  .btnValidation{ margin:20px 0 !important; }
}

/* --------- 9) Accessibilité (réduction des animations) --------- */
@media (prefers-reduced-motion: reduce){
  .btnDashedSelect,
  .btnCloseIcone,
  .btn-style-1,
  .btnValidation{ transition:none; }
}