/*
 * hx-cpt.css — Styles partagés pour les CPT Hybster
 * Offres d'emploi · Documentation · Procédés
 * Reprend l'identité visuelle des matières plastiques
 */

/* ══════════════════════════════════════════
   VARIABLES (héritées du système matières)
══════════════════════════════════════════ */
:root {
  --hx-blue:        #0055b1;
  --hx-blue-dark:   #003d82;
  --hx-blue-light:  #e8f0fc;
  --hx-grey-100:    #f2f5fb;
  --hx-grey-200:    #dde3ee;
  --hx-grey-600:    #5a6a8a;
  --hx-text:        #1a2540;
  --hx-radius:      6px;
  --hx-font:        inherit;
  --hx-transition:  .18s ease;

  /* Couleurs par CPT */
  --hx-oe-color:    #1565c0;   /* offre-emploi : bleu emploi */
  --hx-doc-color:   #1b5e20;   /* documentation : vert savoir */
  --hx-pro-color:   #4a148c;   /* procédé : violet tech */
}

/* ══════════════════════════════════════════
   EN-TÊTE ARCHIVE
══════════════════════════════════════════ */
.hx-arc-header {
  background: linear-gradient(135deg, var(--hx-blue) 0%, var(--hx-blue-dark) 100%);
  color: #fff;
  padding: 2rem 0 1.5rem;
}
.hx-arc-header--oe  { background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); }
.hx-arc-header--doc { background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); }
.hx-arc-header--pro { background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%); }

.hx-arc-header__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hx-arc-header__title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.hx-arc-header__title span {
  font-size: .9rem;
  font-weight: 500;
  opacity: .75;
}
.hx-arc-header__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  background: #fff;
  color: var(--hx-blue);
  border-radius: var(--hx-radius);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--hx-transition), color var(--hx-transition);
}
.hx-arc-header__cta:hover { background: var(--hx-blue-light); }

/* ══════════════════════════════════════════
   BARRE DE FILTRES (sticky)
══════════════════════════════════════════ */
.hx-arc-filters-bar {
  background: #fff;
  border-bottom: 1px solid var(--hx-grey-200);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.hx-arc-filters-bar__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Recherche */
.hx-arc-search {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--hx-grey-100);
  border: 1.5px solid var(--hx-grey-200);
  border-radius: var(--hx-radius) !important;
  padding: .28rem .7rem;
  min-width: 200px;
  height: 32px;
  box-sizing: border-box;
}
.hx-arc-search svg { color: #8895b0; flex-shrink: 0; }
.hx-arc-search input {
  border: none !important;
  background: transparent !important;
  font-size: .82rem;
  font-family: inherit;
  outline: none !important;
  width: 100%;
  color: var(--hx-text);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
}
.hx-arc-search input::placeholder { color: #a0adc4; }

/* Toggle vue */
.hx-arc-view-toggle {
  display: flex;
  gap: .25rem;
  background: var(--hx-grey-100);
  border: 1.5px solid var(--hx-grey-200);
  border-radius: var(--hx-radius);
  padding: .2rem;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
}
.hx-arc-view-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 4px;
  color: #8895b0;
  font-size: .75rem;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.hx-arc-view-toggle button.active,
.hx-arc-view-toggle button:hover {
  background: #fff;
  color: var(--hx-blue);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Filtres pills */
.hx-arc-flags {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.hx-arc-flag-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .6rem;
  border-radius: var(--hx-radius);
  border: 1.5px solid var(--hx-grey-200);
  background: #fff;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--hx-grey-600);
  transition: all .15s;
  white-space: nowrap;
}
.hx-arc-flag-btn:hover { border-color: var(--hx-blue); color: var(--hx-blue); background: var(--hx-blue-light); }
.hx-arc-flag-btn.active { background: var(--hx-blue); color: #fff; border-color: var(--hx-blue); }
.hx-arc-flag-btn input { display: none; }

/* Compteur + reset */
.hx-arc-count-wrap { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.hx-arc-count { font-size: .8rem; font-weight: 700; color: var(--hx-blue); white-space: nowrap; }
.hx-arc-reset {
  background: none; border: none; font-family: inherit; font-size: .78rem;
  color: #c62828; cursor: pointer; padding: .2rem .4rem; border-radius: 4px;
}
.hx-arc-reset:hover { background: #fff0f0; }
.hx-arc-reset[hidden] { display: none; }

/* Filtre select générique */
.hx-arc-select-filter {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hx-arc-select-filter__label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--hx-grey-600);
  white-space: nowrap;
}
.hx-arc-select-filter select {
  border: 1.5px solid var(--hx-grey-200) !important;
  border-radius: var(--hx-radius) !important;
  background: var(--hx-grey-100) !important;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  color: var(--hx-text);
  padding: .3rem .6rem;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, background .15s;
  box-shadow: none !important;
  height: 32px;
  box-sizing: border-box;
}
.hx-arc-select-filter select:hover,
.hx-arc-select-filter select:focus {
  border-color: var(--hx-blue) !important;
  background: #fff !important;
}
.hx-arc-select-filter select.active {
  border-color: var(--hx-blue) !important;
  background: var(--hx-blue) !important;
  color: #fff;
}

/* ══════════════════════════════════════════
   LAYOUT 2 COLONNES
══════════════════════════════════════════ */
.hx-arc-layout {
  max-width: 1260px;
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.hx-arc-sidebar {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--hx-grey-200);
  border-radius: 8px;
  padding: .75rem 0;
  scrollbar-width: thin;
}
.hx-arc-sidebar__title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8895b0;
  padding: .4rem 1rem .2rem;
  margin: 0;
}
.hx-arc-sidebar__list { list-style: none; margin: 0; padding: 0; }
.hx-arc-sidebar__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem 1rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--hx-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.hx-arc-sidebar__item a:hover { background: var(--hx-blue-light); color: var(--hx-blue); }
.hx-arc-sidebar__item a.active {
  color: var(--hx-blue);
  border-left-color: var(--hx-blue);
  background: var(--hx-blue-light);
  font-weight: 700;
}
.hx-arc-sidebar__count {
  font-size: .7rem;
  background: var(--hx-grey-100);
  color: var(--hx-grey-600);
  border-radius: 20px;
  padding: .1rem .5rem;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

/* ══════════════════════════════════════════
   SURCHARGES COULEUR PAR CPT (scope violet procédés)
   Usage : ajouter la classe --pro / --doc sur .hx-archive-wrap
══════════════════════════════════════════ */

/* Procédés — tout le scope passe en violet */
.hx-archive-wrap--pro .hx-arc-sidebar__item a:hover {
  background: #ede7f6;
  color: var(--hx-pro-color);
}
.hx-archive-wrap--pro .hx-arc-sidebar__item a.active {
  color: var(--hx-pro-color);
  border-left-color: var(--hx-pro-color);
  background: #ede7f6;
}
.hx-archive-wrap--pro .hx-arc-table tbody tr:hover { background: #ede7f6 !important; }
.hx-archive-wrap--pro .hx-arc-card:hover {
  border-color: var(--hx-pro-color);
  box-shadow: 0 4px 16px rgba(74,20,140,.12);
}
.hx-archive-wrap--pro .hx-arc-family__head { border-left-color: var(--hx-pro-color); }
.hx-archive-wrap--pro .hx-arc-family__name { color: var(--hx-pro-color); }
.hx-archive-wrap--pro .hx-arc-family__badge { background: var(--hx-pro-color); }
.hx-archive-wrap--pro .hx-arc-view-toggle button.active,
.hx-archive-wrap--pro .hx-arc-view-toggle button:hover {
  background: var(--hx-pro-color);
  color: #fff;
}
.hx-archive-wrap--pro .hx-arc-flag-btn.active { background: var(--hx-pro-color); border-color: var(--hx-pro-color); }
.hx-archive-wrap--pro .hx-arc-select-filter select.active,
.hx-archive-wrap--pro .hx-arc-select-filter select:focus { border-color: var(--hx-pro-color); }
.hx-archive-wrap--pro .hx-arc-table thead th { background: #ede7f6; color: #6a1b9a; }

/* Documentation — scope vert */
.hx-archive-wrap--doc .hx-arc-sidebar__item a:hover {
  background: #e8f5e9;
  color: var(--hx-doc-color);
}
.hx-archive-wrap--doc .hx-arc-sidebar__item a.active {
  color: var(--hx-doc-color);
  border-left-color: var(--hx-doc-color);
  background: #e8f5e9;
}
.hx-archive-wrap--doc .hx-arc-table tbody tr:hover { background: #e8f5e9 !important; }
.hx-archive-wrap--doc .hx-arc-card:hover {
  border-color: var(--hx-doc-color);
  box-shadow: 0 4px 16px rgba(27,94,32,.12);
}
.hx-archive-wrap--doc .hx-arc-family__head { border-left-color: var(--hx-doc-color); }
.hx-archive-wrap--doc .hx-arc-family__name { color: var(--hx-doc-color); }
.hx-archive-wrap--doc .hx-arc-family__badge { background: var(--hx-doc-color); }
.hx-archive-wrap--doc .hx-arc-view-toggle button.active,
.hx-archive-wrap--doc .hx-arc-view-toggle button:hover {
  background: var(--hx-doc-color);
  color: #fff;
}
.hx-archive-wrap--doc .hx-arc-flag-btn.active { background: var(--hx-doc-color); border-color: var(--hx-doc-color); }
.hx-archive-wrap--doc .hx-arc-table thead th { background: #e8f5e9; color: #2e7d32; }

/* ══════════════════════════════════════════
   TABLEAU (vue liste)
══════════════════════════════════════════ */
.hx-arc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.hx-arc-table thead th {
  background: var(--hx-grey-100);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8895b0;
  padding: .4rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--hx-grey-200);
  white-space: nowrap;
}
.hx-arc-table thead th:last-child { text-align: right; }
.hx-arc-table tbody tr {
  border-bottom: 1px solid #eef1f8;
  transition: background .1s;
}
.hx-arc-table tbody tr:nth-child(even):not([hidden]) { background: #f7f9fd; }
.hx-arc-table tbody tr:last-child { border-bottom: none; }
.hx-arc-table tbody tr:hover { background: var(--hx-blue-light) !important; }
.hx-arc-table tbody tr[hidden] { display: none; }
.hx-arc-table td {
  padding: .45rem .75rem;
  vertical-align: middle;
  color: var(--hx-text);
}

/* ══════════════════════════════════════════
   CARTES (vue grille)
══════════════════════════════════════════ */
.hx-arc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
  padding: .75rem;
}
.hx-arc-card {
  position: relative;
  border: 1px solid var(--hx-grey-200);
  border-radius: 8px;
  padding: .9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.hx-arc-card:nth-child(even) { background: #f7f9fd; border-color: #e4eaf5; }
.hx-arc-card:hover {
  border-color: var(--hx-blue);
  box-shadow: 0 4px 16px rgba(0,85,177,.1);
  transform: translateY(-1px);
}
.hx-arc-card[hidden] { display: none; }
.hx-arc-card-link { position: absolute; inset: 0; border-radius: 8px; z-index: 0; }
.hx-arc-card-header { position: relative; z-index: 1; }
.hx-arc-card-name { font-size: .88rem; font-weight: 700; margin: 0; color: var(--hx-text); }
.hx-arc-card-name a { color: inherit; text-decoration: none; position: relative; z-index: 1; }
.hx-arc-card-name a:hover { color: var(--hx-blue); }
.hx-arc-card-sub { font-size: .75rem; color: var(--hx-grey-600); margin: .1rem 0 0; }
.hx-arc-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: .5rem;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════
   BOUTON GÉNÉRIQUE .hx-btn
   (utilisé dans les fiches single CPT)
══════════════════════════════════════════ */
.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.1rem;
  border-radius: var(--hx-radius);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--hx-transition), color var(--hx-transition), border-color var(--hx-transition), box-shadow var(--hx-transition);
  white-space: nowrap;
}
/* Variante primaire (bleu) */
.hx-btn--primary {
  background: var(--hx-blue);
  color: #fff;
  border-color: var(--hx-blue);
}
.hx-btn--primary:hover,
.hx-btn--primary:focus-visible {
  background: var(--hx-blue-dark);
  border-color: var(--hx-blue-dark);
  color: #fff;
  text-decoration: none;
}
/* Variante primaire verte (documentation) */
.hx-btn--primary-doc {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
.hx-btn--primary-doc:hover { background: #1b5e20; border-color: #1b5e20; color: #fff; text-decoration: none; }
/* Variante primaire violette (procédé) */
.hx-btn--primary-pro {
  background: #4a148c;
  color: #fff;
  border-color: #4a148c;
}
.hx-btn--primary-pro:hover { background: #6a1b9a; border-color: #6a1b9a; color: #fff; text-decoration: none; }

/* ══════════════════════════════════════════
   BOUTONS ACTIONS (tableau + carte)
══════════════════════════════════════════ */
.hx-arc-btn-fiche {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  background: var(--hx-blue);
  color: #fff;
  border-radius: var(--hx-radius);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--hx-transition);
}
.hx-arc-btn-fiche:hover { background: var(--hx-blue-dark); }

/* ══════════════════════════════════════════
   SECTIONS / GROUPES
══════════════════════════════════════════ */
.hx-arc-family {
  background: #fff;
  border: 1px solid var(--hx-grey-200);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.hx-arc-family[hidden] { display: none; }
.hx-arc-family__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--hx-grey-100);
  border-bottom: 1px solid var(--hx-grey-200);
  cursor: pointer;
  user-select: none;
}
.hx-arc-family__name {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  color: var(--hx-text);
  flex: 1;
}
.hx-arc-family__badge {
  font-size: .7rem;
  background: var(--hx-blue);
  color: #fff;
  border-radius: 20px;
  padding: .1rem .55rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.hx-arc-family__toggle-ico {
  font-size: .7rem;
  color: var(--hx-grey-600);
  transition: transform .2s;
}
.hx-arc-family--collapsed .hx-arc-family__toggle-ico { transform: rotate(-90deg); }
.hx-arc-family--collapsed .hx-arc-family__body { display: none; }

/* ══════════════════════════════════════════
   BADGES & PILLS INLINE
══════════════════════════════════════════ */
.hx-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Statuts offres emploi */
.hx-badge-pill--ouverte  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.hx-badge-pill--pourvue  { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; }
.hx-badge-pill--suspendue{ background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
/* Types contrat */
.hx-badge-pill--cdi      { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.hx-badge-pill--cdd      { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.hx-badge-pill--stage    { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.hx-badge-pill--alternance{ background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.hx-badge-pill--freelance { background: #ede7f6; color: #4527a0; border: 1px solid #b39ddb; }
/* Niveaux doc */
.hx-badge-pill--debutant     { background: #e8f5e9; color: #2e7d32; }
.hx-badge-pill--intermediaire{ background: #e3f2fd; color: #1565c0; }
.hx-badge-pill--avance       { background: #fff3e0; color: #e65100; }
.hx-badge-pill--expert       { background: #fce4ec; color: #880e4f; }
/* Maturité procédé */
.hx-badge-pill--emergent     { background: #fff8e1; color: #f57f17; }
.hx-badge-pill--mature       { background: #e8f5e9; color: #2e7d32; }
.hx-badge-pill--standard     { background: #e3f2fd; color: #1565c0; }

/* ══════════════════════════════════════════
   SCORES BARRES (procédés)
══════════════════════════════════════════ */
.hx-score-bars { display: flex; flex-direction: column; gap: .15rem; }
.hx-score-bar-row { display: flex; align-items: center; gap: .3rem; }
.hx-score-bar-lbl { font-size: .6rem; color: var(--hx-grey-600); width: 30px; flex-shrink: 0; }
.hx-score-bar-track { flex: 1; height: 4px; background: var(--hx-grey-200); border-radius: 2px; overflow: hidden; }
.hx-score-bar-fill  { height: 100%; background: var(--hx-blue); border-radius: 2px; }

/* ══════════════════════════════════════════
   MESSAGE VIDE
══════════════════════════════════════════ */
.hx-arc-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--hx-grey-600);
}
.hx-arc-empty__icon { font-size: 2.5rem; margin-bottom: .5rem; }
.hx-arc-empty p { font-size: .9rem; margin: 0 0 1rem; }
.hx-arc-empty button {
  background: var(--hx-blue);
  color: #fff;
  border: none;
  border-radius: var(--hx-radius);
  padding: .5rem 1.2rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ══════════════════════════════════════════
   FICHE SINGLE — EN-TÊTE
══════════════════════════════════════════ */
.hx-fiche-cpt__header {
  background: linear-gradient(135deg, var(--hx-blue) 0%, var(--hx-blue-dark) 100%);
  color: #fff;
  padding: 2rem 0 1.75rem;
}
.hx-fiche-cpt__header--oe  { background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%); }
.hx-fiche-cpt__header--doc { background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); }
.hx-fiche-cpt__header--pro { background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%); }

/* En-tête avec image de fond (single CPT) */
.hx-fiche-cpt__header--has-img {
  position: relative;
}
.hx-fiche-cpt__header--has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(46, 125, 50, 0.88) 0%,
    rgba(27, 94, 32, 0.82) 100%
  );
  z-index: 0;
}
/* Overlay bleu pour offre-emploi */
.hx-fiche-cpt__header--has-img--oe::before {
  background: linear-gradient(
    135deg,
    rgba(21, 101, 192, 0.88) 0%,
    rgba(13, 71, 161, 0.82) 100%
  );
}
/* Overlay violet pour procédé */
.hx-fiche-cpt__header--has-img--pro::before {
  background: linear-gradient(
    135deg,
    rgba(106, 27, 154, 0.88) 0%,
    rgba(74, 20, 140, 0.82) 100%
  );
}
.hx-fiche-cpt__header--has-img .hx-fiche-cpt__header-inner {
  position: relative;
  z-index: 1;
}

.hx-fiche-cpt__header-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.hx-fiche-cpt__breadcrumb {
  font-size: .75rem;
  opacity: .75;
  margin-bottom: .85rem;
}
.hx-fiche-cpt__breadcrumb a { color: #fff; text-decoration: none; }
.hx-fiche-cpt__breadcrumb a:hover { text-decoration: underline; }

.hx-fiche-cpt__title-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.hx-fiche-cpt__title-text { flex: 1; }
.hx-fiche-cpt__sigle {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  padding: .15rem .5rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.hx-fiche-cpt__title {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 .3rem;
  line-height: 1.2;
  color: #fff;
}
.hx-fiche-cpt__subtitle {
  font-size: .95rem;
  opacity: .85;
  margin: 0 0 .5rem;
}
.hx-fiche-cpt__metas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}
.hx-fiche-cpt__actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
}
.hx-fiche-cpt__actions .hx-btn {
  width: 100%;
  justify-content: center;
}
.hx-btn--back-list {
  background: #ffffff;
  color: #0055b1;
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.hx-btn--back-list:hover,
.hx-btn--back-list:focus-visible {
  background: #e8f0fc;
  border-color: #e8f0fc;
  color: #003d82;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════
   FICHE SINGLE — CORPS
══════════════════════════════════════════ */
.hx-fiche-cpt__body {
  max-width: 1260px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}
.hx-fiche-cpt__main {}
.hx-fiche-cpt__aside {
  position: sticky;
  top: 70px;
}

.hx-section-cpt {
  background: #fff;
  border: 1px solid var(--hx-grey-200);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.hx-section-cpt__title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hx-grey-600);
  margin: 0 0 .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--hx-grey-200);
}

/* Contenu wysiwyg */
.hx-fiche-cpt__content h2 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--hx-text); }
.hx-fiche-cpt__content h3 { font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .4rem; color: var(--hx-text); }
.hx-fiche-cpt__content p  { margin: 0 0 .75rem; line-height: 1.65; font-size: .9rem; }
.hx-fiche-cpt__content ul,
.hx-fiche-cpt__content ol { margin: .5rem 0 .75rem 1.25rem; font-size: .9rem; line-height: 1.65; }
.hx-fiche-cpt__content li { margin-bottom: .3rem; }

/* Liste simple (avantages, missions…) */
.hx-list-clean {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.hx-list-clean li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--hx-text);
}
.hx-list-clean li::before {
  content: '▸';
  color: var(--hx-blue);
  flex-shrink: 0;
  font-size: .65rem;
  margin-top: .15rem;
}
.hx-list-clean--pro li::before  { color: var(--hx-pro-color); }
.hx-list-clean--doc li::before  { color: var(--hx-doc-color); }

/* Encadré points clés */
.hx-keypoints {
  background: var(--hx-blue-light);
  border-left: 3px solid var(--hx-blue);
  border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
  padding: .85rem 1rem;
}
.hx-keypoints--doc { background: #e8f5e9; border-left-color: #2e7d32; }
.hx-keypoints--pro { background: #ede7f6; border-left-color: #6a1b9a; }
.hx-keypoints__title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; color: var(--hx-blue); }

/* Widget info aside */
.hx-info-widget {
  background: #fff;
  border: 1px solid var(--hx-grey-200);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: .82rem;
}
.hx-info-widget__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hx-grey-600);
  margin: 0 0 .65rem;
}
.hx-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid #eef1f8;
}
.hx-info-row:last-child { border-bottom: none; }
.hx-info-row__label { color: var(--hx-grey-600); font-size: .78rem; }
.hx-info-row__value { font-weight: 600; color: var(--hx-text); text-align: right; }

/* ══════════════════════════════════════════
   MASQUAGE TITRE DOUBLON — thème parent BoldThemes
   Le thème parent affiche un <h1> natif au-dessus du
   contenu. On le masque sur les CPT custom pour éviter
   le doublon avec le titre dans notre bandeau.
══════════════════════════════════════════ */
.hx-fiche-cpt .entry-title,
.hx-fiche-cpt .page-title,
.hx-fiche-cpt .post-title,
.hx-fiche-cpt h1.entry-title,
.hx-fiche-cpt .bt-post-title,
.hx-fiche-cpt .bt-page-title,
.hx-fiche-cpt .bt-single-title,
body.single-procede .entry-title,
body.single-procede .page-title,
body.single-procede h1.entry-title,
body.single-procede .bt-post-title,
body.single-procede .bt-page-title,
body.single-documentation .entry-title,
body.single-documentation .page-title,
body.single-documentation h1.entry-title,
body.single-documentation .bt-post-title,
body.single-offre-emploi .entry-title,
body.single-offre-emploi h1.entry-title,
body.single-offre-emploi .bt-post-title {
  display: none !important;
}

/* Supprimer tout padding/margin parasite du thème parent
   avant notre bandeau .hx-fiche-cpt__header */
body.single-procede .bt-content-holder,
body.single-documentation .bt-content-holder,
body.single-offre-emploi .bt-content-holder {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════
   TEMPLATE ARTICLES (Savoir-faire / Nouvelles)
══════════════════════════════════════════ */
.hx-fiche-cpt__header--sf {
  background: linear-gradient(135deg, #0d47a1 0%, #0055b1 100%);
}
.hx-fiche-cpt__header--news {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}
.hx-fiche-cpt__header--has-img--sf::before {
  background: linear-gradient(135deg, rgba(0,85,177,.88) 0%, rgba(13,71,161,.82) 100%);
}
.hx-fiche-cpt__header--has-img--news::before {
  background: linear-gradient(135deg, rgba(13,71,161,.88) 0%, rgba(25,118,210,.82) 100%);
}
body.single-post.category-savoir-faire .entry-title,
body.single-post.category-nouveautes-et-annonces .entry-title,
body.single-post.category-savoir-faire h1.entry-title,
body.single-post.category-nouveautes-et-annonces h1.entry-title,
body.single-post.category-savoir-faire .bt-post-title,
body.single-post.category-nouveautes-et-annonces .bt-post-title {
  display: none !important;
}
body.single-post.category-savoir-faire .bt-content-holder,
body.single-post.category-nouveautes-et-annonces .bt-content-holder {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hx-arc-layout { grid-template-columns: 1fr; }
  .hx-arc-sidebar { position: static; max-height: none; }
  .hx-fiche-cpt__body { grid-template-columns: 1fr; }
  .hx-fiche-cpt__aside { position: static; }
}
@media (max-width: 600px) {
  .hx-arc-filters-bar__inner { flex-wrap: wrap; gap: .5rem; }
  .hx-arc-search { min-width: 100%; }
  .hx-fiche-cpt__title { font-size: 1.35rem; }
  .hx-arc-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .hx-arc-cards-grid { grid-template-columns: 1fr; }
}