/* ==========================================================
   SGP Client Hub — Steps / Timeline — Mobile Fix (<= 767px)
   Scope: .sgp-ch-project-view uniquement (anti side effects)
   ========================================================== */

/* Icône avant “Vous êtes ici” (desktop + mobile) */
.sgp-ch-project-view .sgp-ch-steps-current__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sgp-ch-project-view .sgp-ch-steps-current__eyebrow::before{
  content:"";
  display:inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-5.33 7-12a7 7 0 1 0-14 0c0 6.67 7 12 7 12zm0-9.5A2.5 2.5 0 1 1 12 7.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-5.33 7-12a7 7 0 1 0-14 0c0 6.67 7 12 7 12zm0-9.5A2.5 2.5 0 1 1 12 7.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .9;
}

.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot{
    align-self: center !important;
  }

/* Mobile: layout qui corrige la “dérive à droite” */
@media (max-width: 767px) {

  .sgp-ch-project-view .sgp-ch-project-tabs .sgp-ch-tabpanels{
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
  }

  .sgp-ch-project-view .sgp-ch-card{
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    padding: 18px 10px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
  }

  .sgp-ch-project-view .sgp-ch-timeline{
    position: relative !important;
    margin-left: 0 !important;
    padding-left: 6px !important;
  }

  .sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item{
    display: grid !important;
    grid-template-columns: 12px 1fr !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important; /* centrage vertical dot ↔ contenu */
  }

  .sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot{
    align-self: center !important;
  }

  .sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-content{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-content *{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* SGP Client Hub — Mobile: bouton "Voir tous les messages" full width */
@media (max-width: 767px){

  /* la zone d'actions prend toute la largeur */
  .sgp-client-hub-tile-messages .sgp-ch-tile-actions{
    width: 100% !important;
  }

  /* le wrapper "compact" ne doit pas compacter en mobile */
  .sgp-client-hub-tile-messages .sgp-ch-tile-compact{
    width: 100% !important;
    display: block !important;
  }

  /* le bouton devient 100% */
  .sgp-client-hub-tile-messages .sgp-ch-msg-all{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important; /* garde le rendu DL, mais stretch */
    justify-content: center !important;
  }
}
/* =========================================================
   SGP Client Hub — Timeline: icônes + badges (CSS only)
   Objectif: remplacer pastilles par icônes + coloriser les blocs
   Scope strict: uniquement timeline SGP
   ========================================================= */

.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot{
  /* on garde le conteneur comme "slot" */
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icône (CSS only) */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot::before{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #cbd5e1; /* défaut */
  box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.25);
}

/* --- États: adapte ces sélecteurs si tes classes diffèrent --- */
/* Terminé */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item.is-done .sgp-ch-timeline-dot::before,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--done .sgp-ch-timeline-dot::before{
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

/* En cours / actif */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item.is-current .sgp-ch-timeline-dot::before,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--current .sgp-ch-timeline-dot::before{
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

/* À venir */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item.is-pending .sgp-ch-timeline-dot::before,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--pending .sgp-ch-timeline-dot::before{
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

/* Début / fin (si tu as des items spéciaux) */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--start .sgp-ch-timeline-dot::before{
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--end .sgp-ch-timeline-dot::before{
  background: #64748b;
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}






/* =========================================================
   SGP Client Hub — Timeline icons (SVG) + alignments
   - Remplace les pastilles par icônes (Play/Check EXACTES)
   - Ajoute Current/Pending cohérentes (style léger/aéré)
   - Fin = damier N&B lisible
   ========================================================= */

/* 1) Colonne icône : taille + centrage vertical */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item{
  align-items: center; /* centre l’icône vs le bloc */
}

.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  align-self: center !important; /* sécurité */
  margin-bottom: 2px;
}

/* Si un pseudo-élément dessinait l’ancienne pastille */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot::before,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-dot::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   2) ICÔNES (data:image/svg+xml)
   - Start (Play) = TON SVG exact
   - Done (Check) = TON SVG exact
   - Current = anneau bleu + point central (aéré)
   - Pending = anneau orange + point central (aéré)
   - End = damier N&B
   ========================================================= */

/* START (Play) — EXACT */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--start .sgp-ch-timeline-dot{
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%23e5edff%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%222%22%3E%3C/circle%3E%3Cpath%20d%3D%22M13%2010.5L22%2016L13%2021.5V10.5Z%22%20fill%3D%22%232563EB%22%3E%3C/path%3E%3C/svg%3E") !important;
  box-shadow: none !important;
}

/* DONE (Check) — EXACT */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--done .sgp-ch-timeline-dot{
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%23ecfdf3%22%20stroke%3D%22%2322C55E%22%20stroke-width%3D%222%22%3E%3C/circle%3E%3Cpath%20d%3D%22M10%2016.5l3.5%203.5L22%2013%22%20stroke%3D%22%2322C55E%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/path%3E%3C/svg%3E") !important;
  box-shadow: none !important;
}

/* CURRENT (Vous êtes ici) — anneau bleu + point (léger/aéré) */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--current .sgp-ch-timeline-dot{
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%23e5edff%22%20stroke%3D%22%232563EB%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22%232563EB%22/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
}

/* PENDING (En attente) — anneau orange + point */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--pending .sgp-ch-timeline-dot{
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%23fff7ed%22%20stroke%3D%22%23f59e0b%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22%23f59e0b%22/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
}

/* END (Fin) — damier N&B lisible (24px) */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--end .sgp-ch-timeline-dot{
  background-image: url(/wp-content/uploads/2026/01/flag-end.svg) !important;
  box-shadow: none !important;
}

/* =========================================================
   3) Option : si “Début/Fin” semblent décalés verticalement
   (souvent dû à padding/line-height du content)
   ========================================================= */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-content{
  align-self: center;
}

/* SGP Client Hub — Centrage VERTICAL "Début" / "Fin" (sans centrage horizontal) */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--start,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--end{
  align-items: center !important; /* centre dot + content verticalement */
}

.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--start .sgp-ch-timeline-content,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--end .sgp-ch-timeline-content{
  display: flex !important;
  justify-content: flex-start !important; /* garde le texte à GAUCHE */
  min-height: 32px !important;        /* aligné avec l’icône 24px */
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}

/* évite une micro-dérive due aux marges/line-height du titre */
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--start .sgp-ch-timeline-title,
.sgp-ch-project-view .sgp-ch-timeline .sgp-ch-timeline-item--end .sgp-ch-timeline-title{
  margin: 0 !important;
  line-height: 1.2 !important;
}