/* si vide, on le laisse visible mais plus léger */
.zask-pass-panel[data-score="0"] .zask-pass-label { opacity: .65; }
.zask-pass-panel[data-score="0"] .zask-pass-rules { opacity: .85; }


/* Base */
.zask-pass-meter-bar {
  background: #ddd;
  transition: width .25s ease, background .25s ease;
}

/* Score 0-1 : faible */
.zask-pass-panel[data-score="0"] .zask-pass-meter-bar,
.zask-pass-panel[data-score="1"] .zask-pass-meter-bar {
  background: #d93025;
}

/* Score 2 : moyen */
.zask-pass-panel[data-score="2"] .zask-pass-meter-bar {
  background: #f9ab00;
}

/* Score 3 : bon */
.zask-pass-panel[data-score="3"] .zask-pass-meter-bar {
  background: #34a853;
}

/* Score 4 : très bon */
.zask-pass-panel[data-score="4"] .zask-pass-meter-bar {
  background: #1e8e3e;
}

.zask-email-hint[data-state="taken"] { font-weight: 500; font-size:0.875rem;color:red; }
.zask-pass-rules li[data-ok="1"] { text-decoration: line-through; opacity: .75; }
.zask-pass-panel[data-valid="1"] .zask-pass-label { font-weight: 600; color:green; }


.zask-social-wrap{
	display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem; 
	margin: 0.75rem 0 0 0;
}

/* PHOTO */
.zask-photo-block{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.zask-avatar-circle{
  width:4.75rem;
  height:4.75rem;
  border-radius:999px;
  overflow:hidden;
  border:2px solid #E2E8F0;
  background:#F9FAFC;
  display:grid;
  place-items:center;
}

.zask-avatar-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.zask-avatar-placeholder{
  display:grid;
  place-items:center;
  width:1.5rem;
  height:1.5rem;
  color:#63748A;
}

.zask-photo-actions{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.zask-avatar-btn{
  width: auto;
  align-self: flex-start;
}
.zask-help{
	font-size:0.75rem;
	line-height:1;
}

.zask-btn-ico{
	display:flex;
	width:1rem;
}
.zask-skill-list[data-skill-selected]{
	margin:0 0 0.75rem 0;
}

.zask-btn{
	padding:0.5rem 1rem;
	font-size:0.875rem;
	color:#0E172A;
	background-color:#FFF;
	border:1px solid #E2E8F0;
	font-weight:600;
	box-shadow:none;
	display:inline-flex;
	align-items:center;
	gap:0.375rem;
}
.zask-btn:hover{
	background-color:#F9FAFC;
	color:#0E172A;
	box-shadow:none;
}


.zask-field .zask-row-label{
color:#0E172A;
	font-size:0.875rem;
	font-weight:500;
	padding: 0 0 0.375rem 0;
	line-height:1.1;
}
.zask-profile{
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}


h2.zask-card-title{
	margin:0 0 0 0;
	padding : 0 0 1rem 0;
	font-size:1.125rem;
	font-weight:bold;
	
}

.zask-field .zask-input-wrap input{
	margin: 0 ;
	text-align:left !important;
 	width: 100% ;
  padding: 0.75rem 1rem;
	

  border-radius: calc(var(--zask-radius) + 4px) !important;
  border: 1px solid var(--zask-border) !important;
  background: #fff;

  font-size: 0.875rem !important;
  font-weight: 400 !important;
  outline: none !important;

  transition: border-color .15s ease, box-shadow .15s ease !important;

}

.zask-card{
	background-color:#fff;
	padding : 1.5rem;
	border : 1px solid var( --zask-border);
	border-radius:var(--zask-radius);
	box-shadow:var(--zask-shadow)
}


.zask-skill-list{
  display:flex;
  flex-wrap:wrap;
  gap:0.375rem;
}

.zask-skill-item{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  padding:0.25rem 0.75rem;
  border-radius:1rem;
  box-shadow:none;
  font-weight:500;
  font-size:0.875rem;
  line-height:1.1;
  border:1px solid #E1E7EF;
  color:#63748A;
  background-color:#fff;
}

.zask-skill-item:hover{
  background-color:#EEF2FF;
  color:#0E172A;
}

.zask-skill-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0.875rem;
  height:0.875rem;
  flex:0 0 0.875rem;
}

.zask-skill-action svg{
  display:block;
  width:0.875rem;
  height:0.875rem;
  color:#63748A;
}

.zask-skill-item:hover svg{
  color:#0E172A;
}

.zask-skill-item.is-selected{
  background-color:#EDF2FF;
  color:#3730A3;
  border:none;
}

.zask-skill-item.is-selected:hover{
  box-shadow:none;
}

.zask-skill-item.is-selected:hover svg{
  color:#0E172A;
}

/* wrap */
.zask-input-wrap{
  position:relative;
}

/* bouton inside */
.zask-input-action{
  position:absolute;
  padding:0.5rem;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#EDF2FF;
  cursor:pointer;
  border-radius:10px;
  box-shadow:none;
  z-index:2;
}

/* (optionnel mais conseillé) changer le fond au hover */
.zask-input-action:hover{
  background:#4F47E7;
}

.zask-input-action svg{
  color:#4F47E7 !important;
  width:0.875rem;
  height:0.875rem;
  display:block;
}

.zask-input-action:hover svg{
  color:#EDF2FF !important;
}