/* ============================================================
   cdg33.css — Feuille de style partagée CDG33
   Couvre : accueil arbitrage RH, recrutement, portefeuille projets
   ============================================================ */

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
  /* Palette CDG33 */
  --cdg33-bleu:       #0047BB;
  --cdg33-bleu-clair: #7BAFD4;
  --cdg33-orange:     #F3922B;
  --cdg33-orange-722: #BE6E2D;
  --cdg33-vert:       rgb(85, 171, 113);
  --cdg33-vert-3508:  #6F835A;
  --cdg33-violet:     #6A1B9A;
  --cdg33-rouge:      #C8102E;
  --cdg33-rose:       #F06292;
  --cdg33-jaune:      #F2E700;
  --cdg33-jaune-clair:#FFD54A;
  --cdg33-ambre:      #FFB24A;
  --cdg33-gris:       #999999;

  /* Alias sémantiques */
  --primary:  var(--cdg33-bleu);
  --accent:   var(--cdg33-orange);
  --objectif: var(--cdg33-vert-3508);

  /* UI */
  --bg:      #f8fafc;
  --surface: #ffffff;
  --text:    #1f2937;
  --muted:   #6b7280;
  --line:    #e5e7eb;

  --ok:   #16a34a;
  --warn: #f59e0b;
  --risk: #b91c1c;

  --radius: 12px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .08);
  --shadow-hover: 0 12px 34px rgba(0, 0, 0, .12);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: no-repeat fixed right / 50% url(background.svg) !important;
  color: var(--text);
}


html {
  zoom: 1.1;
}

/* ============================================================
   2. LAYOUT
   ============================================================ */
.container {
  max-width: 1180px;
  margin: auto;
  padding: 28px 24px;
}


/* ============================================================
   3. TOPBAR  (en-tête de page)
   ============================================================ */
.topbar {
  
display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;

  flex-wrap: nowrap;  

}

/* Marque / logo + titre */
.brand {
  
display:flex;
  align-items:center;
  gap:14px;

  flex: 1 1 auto;             /* prend l'espace dispo */
  min-width: 0;  

}


@media (max-width: 680px){
  .topbar{
    flex-wrap: wrap;        /* ok en mobile : user-chip peut passer dessous */
  }

  .page-subtitle{
    white-space: normal;    /* en mobile, on peut laisser le texte revenir à la ligne */
    overflow: visible;
    text-overflow: clip;
  }
}


brand > div{
  min-width: 0;               /* CRUCIAL */
}


.brand img {
 
 width: 100px;     /* adapte : 44/52 etc */
  height: auto;
  flex: 0 0 auto;

}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.page-subtitle {
  
font-size:13px;
  color:var(--muted);
  margin-top:2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

/* Ancien alias utilisé dans le portefeuille */
header.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
header.page-head h1 {
  margin: 0;
}
.meta {
  color: var(--muted);
  font-size: 14px;
}


/* ============================================================
   4. CHIP UTILISATEUR
   ============================================================ */
.user-chip {

  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  white-space: nowrap;

}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #E8EFF9;
  border: 2px solid #B5D4F4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--cdg33-bleu);
  flex-shrink: 0;
}
.user-info { text-align: right; }
.user-name  { font-size: 14px; font-weight: 600; color: var(--text); }
.user-role  { font-size: 12px; color: var(--muted); margin-top: 1px; }


/* ============================================================
   5. BARRE FILTRES / OUTILS
   ============================================================ */
.toolbar,
.filters .row-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.toolbar input[type="search"],
.toolbar select,
.filters input[type="search"],
.filters select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--surface);
  font-size: 14px;
  transition: border-color .2s;
}
.toolbar input[type="search"],
.filters input[type="search"] { width: 280px; }

.toolbar select,
.filters select { min-width: 190px; }

.toolbar input[type="search"]:focus,
.toolbar select:focus,
.filters input[type="search"]:focus,
.filters select:focus {
  border-color: var(--primary);
}

/* Bouton retour / action violet pastel */
.btn-back {
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #D2C2EE;
  outline: 1px solid #C8B5EA;
  background: #E6D9F4;
  color: #4B2E83;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}
.btn-back:hover {
  background: #DCCCF1;
  border-color: #C8B5EA;
  box-shadow: 0 2px 10px rgba(75, 46, 131, .12);
}
.btn-back:active  { background: #D2BFEF; }
.btn-back:focus   { outline: 2px solid #C8B5EA; outline-offset: 2px; }

@media (max-width: 680px) {
  .toolbar,
  .filters .row-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .toolbar input[type="search"],
  .toolbar select,
  .filters input[type="search"],
  .filters select {
    width: 100%;
  }
}


/* ============================================================
   6. GRILLES
   ============================================================ */

/* Grille 3 colonnes (portefeuille, recrutement) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .grid { grid-template-columns: 1fr; } }

/* Grille 2 colonnes (accueil RH) */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }


/* ============================================================
   7. CARTES  (base commune)
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none;
  color: inherit;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--primary);  /* surcharge par modificateur de couleur si besoin */
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #d1d5db;
}

/* Modificateurs de couleur de barre (accueil RH) */
.card--bleu::before    { background: var(--cdg33-bleu); }
.card--orange::before  { background: var(--cdg33-orange); }
.card--vert::before    { background: var(--cdg33-vert); }
.card--violet::before  { background: var(--cdg33-violet); }
.card--rouge::before   { background: var(--cdg33-rouge); }

/* En-tête de carte */
.card .head,
.card-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card .title,
.card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  flex: 1;
  color: var(--text);
}
/* Sous-titre / référence */
.card-ref { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Icône de carte (accueil RH) */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-bleu    { background: #E6F1FB; }
.icon-orange  { background: #FEF3E7; }
.icon-vert    { background: #EAF3DE; }
.icon-violet  { background: #F3E8FA; }

/* Label de section dans la carte */
.card-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.card-label--bleu   { color: #185FA5; }
.card-label--orange { color: #854F0B; }
.card-label--vert   { color: #3B6D11; }
.card-label--violet { color: #6A1B9A; }

/* Description courte */
.card-desc,
.card-snippet {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.card-snippet {
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Texte "besoin" (portefeuille) */
.snippet {
  font-size: 14px;
  color: var(--text);
}

/* Petits textes */
.small { color: var(--muted); font-size: 13px; }
.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 2px;
}


/* ============================================================
   8. BADGES
   ============================================================ */
.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Badge plein (couleur en inline style ou via modificateur) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
  background: var(--primary);
}

/* Badge statut (fond pastel + texte coloré) */
.badge-statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
  font-size: 11px;
}
.dot-statut {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* Variantes nommées (accueil RH) */
.badge--bleu   { background: #E6F1FB; color: #185FA5; }
.badge--orange { background: #FEF3E7; color: #854F0B; }
.badge--vert   { background: #EAF3DE; color: #3B6D11; }
.badge--violet { background: #F3E8FA; color: #6A1B9A; }

/* Point coloré dans badge (accueil RH) */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot--bleu   { background: #185FA5; }
.dot--orange { background: #854F0B; }
.dot--vert   { background: #3B6D11; }
.dot--violet { background: #6A1B9A; }


/* ============================================================
   9. META CHIPS  (direction, service, demandeur…)
   ============================================================ */
.card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--muted);
}
.meta-chip svg { flex-shrink: 0; }


/* ============================================================
   10. KPIs
   ============================================================ */
.kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 9px;
  background: #fafafa;
  font-size: 12px;
  color: var(--text);
}


/* ============================================================
   11. PIED DE CARTE
   ============================================================ */
.card .foot,
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-top: 2px;
  margin-top: auto;  /* pousse le footer tout en bas de la card */
}
.card-date { font-size: 12px; color: var(--muted); }

.arrow {
  font-size: 16px;
  color: var(--muted);
  opacity: .4;
  display: inline-block;
  transition: opacity .15s, transform .15s;
}
.card:hover .arrow { opacity: 1; transform: translateX(3px); }

/* Lien texte */
.link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.link:hover { border-bottom-color: var(--primary); }


/* ============================================================
   12. BARRE DE PROGRESSION  (portefeuille projets)
   ============================================================ */
.timeline { --p: 0; }

.bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  background-color: var(--cdg33-rose);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.4) 0,   rgba(255,255,255,.4) 6px,
    transparent           6px, transparent          12px
  );
  border-radius: 999px;
  transition: width .3s ease;
}


/* ============================================================
   13. DETAILS / SUMMARY
   ============================================================ */
details {
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}
details summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
}
details[open] summary { margin-bottom: 6px; }


/* ============================================================
   14. FORMULAIRE CACHÉ (submit carte)
   ============================================================ */
form.go { display: none; }


/* ============================================================
   15. FIL D'ARIANE WORKFLOW (fiche détail)
   ============================================================ */
.workflow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  overflow-x: auto;
}
.wf-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wf-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.wf-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.wf-sep {
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: var(--line);
  margin: 0 8px;
}

/* Étape passée */
.wf-step--done .wf-circle {
  background: #EAF3DE;
  border-color: #3B6D11;
  color: #3B6D11;
}
.wf-step--done .wf-label { color: #3B6D11; }

/* Étape active */
.wf-step--active .wf-circle {
  background: var(--cdg33-bleu);
  border-color: var(--cdg33-bleu);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0,71,187,.15);
}
.wf-step--active .wf-label {
  color: var(--cdg33-bleu);
  font-weight: 700;
}

/* Séparateur passé */
.wf-sep--done { background: #3B6D11; }


/* ============================================================
   16. SECTIONS FICHE DÉTAIL
   ============================================================ */
.fiche-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.fiche-section h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fiche-section h2 .section-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fiche-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 6px;
}
.fiche-section h3:first-child { margin-top: 0; }
.fiche-section p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* Grille 2 colonnes dans fiche */
.fiche-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) { .fiche-grid-2 { grid-template-columns: 1fr; } }

/* Grille 4 colonnes KPIs */
.fiche-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px)  { .fiche-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .fiche-kpis { grid-template-columns: 1fr 1fr; } }

.fiche-kpi {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  background: #fafafa;
}
.fiche-kpi .kpi-val {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 4px;
}
.fiche-kpi .kpi-lbl {
  font-size: 12px;
  color: var(--muted);
}
.fiche-kpi .kpi-info {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Bloc accent latéral */
.accent-block {
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  background: #f0f6fb;
  border-radius: 0 8px 8px 0;
}
.accent-block--risk    { border-color: var(--risk); background: #fff5f5; }
.accent-block--counter { border-color: var(--accent); background: #fffbf5; }
.accent-block--goal    { border-color: var(--objectif); background: #f5fbf0; }

/* Tableau fiche */
.fiche-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fiche-table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fafafa;
}
.fiche-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
}
.fiche-table tr:last-child td { border-bottom: none; }

/* Pill infos */
.pill {
  display: inline-block;
  background: #f3f4f6;
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  margin: 3px 4px 3px 0;
  color: var(--text);
}

/* Barre de progression fiche (plus haute que liste) */
.fiche-bar-wrap { margin: 10px 0 4px; }
.fiche-bar {
  height: 12px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.fiche-bar > span {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background-color: var(--cdg33-rose);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 6px,
    transparent 6px, transparent 12px
  );
  border-radius: 999px;
  transition: width .4s ease;
}
.fiche-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

/* Hero fiche (en-tête projet) */
.fiche-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.fiche-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--primary);
}
.fiche-hero-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 10px 0 6px;
  line-height: 1.2;
}
.fiche-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.fiche-hero-meta-item {
  font-size: 13px;
  color: var(--muted);
}
.fiche-hero-meta-item strong {
  color: var(--text);
  font-weight: 600;
}

/* ============================================================
   17. BARRE D'ACTIONS (bas de page)
   ============================================================ */
.action-bar {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 100;
}
.action-bar-left { display: flex; gap: 10px; align-items: center; }
.action-bar-right { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-valider {
  background: #EAF3DE;
  color: #3B6D11;
  border-color: #C0DD97;
}
.btn-valider:hover {
  background: #d6edc0;
  box-shadow: 0 2px 10px rgba(59,109,17,.15);
}

.btn-refuser {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #F7C1C1;
}
.btn-refuser:hover {
  background: #fcc9c9;
  box-shadow: 0 2px 10px rgba(153,27,27,.15);
}

.btn-modif {
  background: #FEF3E7;
  color: #854F0B;
  border-color: #FAC775;
}
.btn-modif:hover {
  background: #fde3c0;
  box-shadow: 0 2px 10px rgba(133,79,11,.15);
}

.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.fiche-hero-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

/* ============================================================
   ALIGNEMENT HORIZONTAL (Version A)
   Icône à gauche + texte (label au-dessus / desc dessous)
   ============================================================ */
.card-row{
  display: flex;
  align-items: center;    /* centre verticalement l'ensemble */
  gap: 12px;
  min-width: 0;
      margin-bottom: 20px;
    margin-top: 20px;
}

.card-text{
  display: flex;
  flex-direction: column; /* label au-dessus, desc en dessous */
  min-width: 0;
  flex: 1 1 auto;
}

/* Ajustements fins */
.card-label{
  margin-bottom: 2px;     /* au lieu de 5px (plus compact) */
}

/* Empêche les débordements moches */
.card-label,
.card-desc{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Si tu veux garder la description sur UNE SEULE ligne */
.card-desc{
  white-space: nowrap;
}