/* Services page – léger complément */
.services-shell .services-hint{
  margin-top:6px;
  font-size:12px;
  opacity:.8;
}


/* =========================
   SERVICES : liste d'activités lisible (colonnes + header)
   ========================= */

.services-shell .services-hint{
  font-size: 12px;
  margin-top: 6px;
  opacity: .85;
}

.services-shell .services-meta{
  margin-top: 14px;
  margin-bottom: 8px;
}

.services-shell .services-empty{
  padding: 10px 12px;
  border: 1px dashed rgba(var(--c1r),var(--c1g),var(--c1b),.22);
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}

/* Header colonnes (desktop) */
.services-shell .kw-head{
  display:grid;
  grid-template-columns: 1fr 220px 240px 44px;
  gap:10px;
  align-items:center;

  padding:10px 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.10);

  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform: uppercase;
  opacity:.85;

  margin-bottom: 10px;
}

/* Container liste */
.services-shell .kwpicked{
  margin-top: 0;
}

/* Une activité = une vraie ligne */
.services-shell .kw-chip{
  display:grid;
  grid-template-columns: 1fr 220px 240px 44px;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);

  border-left: 4px solid rgba(var(--c3r),var(--c3g),var(--c3b),.85);

  margin:0 0 10px 0;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.services-shell .kw-chip:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 46px rgba(16,24,40,.10);
  transform: translateY(-1px);
}

.services-shell .kw-title{
  font-weight:900;
  font-size:13px;
  opacity:.95;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

.services-shell .kw-select{
  height: 40px;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;

  border:1px solid var(--line);
  background: rgba(255,255,255,.14);
  width:100%;
}

.services-shell .kw-x{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;

  border:1px solid var(--line);
  background: rgba(255,255,255,.18);
  cursor:pointer;

  font-size:18px;
  line-height:1;
  opacity:.9;

  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.services-shell .kw-x:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--c5r),var(--c5g),var(--c5b),.45);
  background: rgba(var(--c5r),var(--c5g),var(--c5b),.10);
}

/* Responsive : on empile proprement */
@media (max-width: 980px){
  .services-shell .kw-head{ display:none; }

  .services-shell .kw-chip{
    grid-template-columns: 1fr;
    gap:8px;
  }

  .services-shell .kw-select{ height: 42px; }
  .services-shell .kw-x{ justify-self: end; }
}