/* =============================================================================
   Vendée Pro Formations — Feuille de style principale
   Couvre : archive (liste), single (fiche), filtres AJAX, composants partagés
   ============================================================================= */

/* ── Variables ────────────────────────────────────────────────────────────────*/
:root {
  --vpf-yellow:       #E2B020;
  --vpf-yellow-dark:  #C8990E;
  --vpf-yellow-light: #FBF0C8;
  --vpf-navy:         #1C2B4A;
  --vpf-navy-mid:     #2E4070;
  --vpf-pink:         #C94D8C;   /* badge Alternance */
  --vpf-teal:         #1DA3A3;   /* badge autre type */
  --vpf-beige:        #F6F0DC;   /* hero bg */
  --vpf-gray-bg:      #F4F5F7;
  --vpf-gray-border:  #E0E2E8;
  --vpf-gray-text:    #6B7280;
  --vpf-white:        #FFFFFF;
  --vpf-body-text:    #2D3748;

  --vpf-radius:       8px;
  --vpf-radius-lg:    14px;
  --vpf-shadow:       0 2px 12px rgba(0,0,0,.08);
  --vpf-shadow-hover: 0 6px 24px rgba(0,0,0,.13);

  --vpf-container:    1200px;
  --vpf-sidebar-w:    270px;
  --vpf-gap:          32px;

  --vpf-font:         inherit;
  --vpf-transition:   .2s ease;
}

/* ── Reset léger (scope plugin) ───────────────────────────────────────────────*/
.vpf-archive *, .vpf-single * { box-sizing: border-box; }
.vpf-archive ul, .vpf-single ul { list-style: none; margin: 0; padding: 0; }
.vpf-archive a, .vpf-single a  { text-decoration: none; }
.vpf-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ── Conteneur centré ─────────────────────────────────────────────────────────*/
.vpf-container {
  max-width: var(--vpf-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================================================
   BOUTONS
   ============================================================================= */
.vpf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--vpf-radius);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--vpf-transition);
  white-space: nowrap;
}
.vpf-btn--primary {
  background: var(--vpf-yellow);
  color: var(--vpf-navy);
  border-color: var(--vpf-yellow);
}
.vpf-btn--primary:hover {
  background: var(--vpf-yellow-dark);
  border-color: var(--vpf-yellow-dark);
  color: var(--vpf-navy);
}
.vpf-btn--outline {
  background: transparent;
  color: var(--vpf-navy);
  border-color: var(--vpf-navy);
}
.vpf-btn--outline:hover { background: var(--vpf-navy); color: var(--vpf-white); }
.vpf-btn--outline-white {
  background: transparent;
  color: var(--vpf-white);
  border-color: var(--vpf-white);
}
.vpf-btn--outline-white:hover { background: var(--vpf-white); color: var(--vpf-navy); }
.vpf-btn--sm { padding: 7px 14px; font-size: .8125rem; }
.vpf-btn--full { width: 100%; justify-content: center; }
.vpf-btn--load-more {
  background: var(--vpf-white);
  border: 2px solid var(--vpf-gray-border);
  color: var(--vpf-navy);
  padding: 11px 28px;
  border-radius: 50px;
  font-weight: 600;
  gap: 8px;
}
.vpf-btn--load-more:hover { border-color: var(--vpf-navy); }
.vpf-btn--load-more:disabled { opacity: .5; cursor: wait; }

/* =============================================================================
   HERO (Archive)
   ============================================================================= */
.vpf-hero {
  background: var(--vpf-beige);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.vpf-hero::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--vpf-yellow);
  opacity: .12;
  bottom: -80px; left: -60px;
}
.vpf-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--vpf-gap);
  flex-wrap: wrap;
}
.vpf-hero__left { flex: 1; min-width: 260px; }
.vpf-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--vpf-navy);
  line-height: 1.15;
  margin: 0 0 12px;
}
.vpf-hero__sub {
  font-size: 1rem;
  color: var(--vpf-navy-mid);
  margin: 0;
}
.vpf-hero__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.vpf-stat-card {
  background: var(--vpf-white);
  border-radius: var(--vpf-radius-lg);
  padding: 20px 28px;
  text-align: center;
  min-width: 140px;
  box-shadow: var(--vpf-shadow);
}
.vpf-stat-card__number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--vpf-navy);
  line-height: 1;
}
.vpf-stat-card__label {
  display: block;
  font-size: .8rem;
  color: var(--vpf-gray-text);
  margin-top: 4px;
  line-height: 1.3;
}

/* =============================================================================
   BARRE DE RECHERCHE GLOBALE
   ============================================================================= */
.vpf-search-bar {
  background: var(--vpf-white);
  border-bottom: 1px solid var(--vpf-gray-border);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.vpf-search-bar__inner {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.vpf-search-bar__field { display: flex; flex-direction: column; gap: 4px; }
.vpf-search-bar__field--keyword { flex: 1; min-width: 200px; }
.vpf-search-bar__field--centre { min-width: 220px; }
.vpf-search-bar__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--vpf-gray-text);
}
.vpf-search-bar__inner input[type="search"] {
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--vpf-gray-border);
  border-radius: var(--vpf-radius);
  font-size: .9rem;
  width: 100%;
  color: var(--vpf-body-text);
}
.vpf-search-bar__inner input[type="search"]:focus {
  outline: none;
  border-color: var(--vpf-yellow);
}
.vpf-search-bar__cpf {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  color: var(--vpf-navy);
  margin-bottom: 2px;
}
.vpf-search-bar__cpf input { display: none; }
.vpf-search-bar__cpf-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vpf-gray-border);
  transition: var(--vpf-transition);
}
.vpf-search-bar__cpf input:checked ~ .vpf-search-bar__cpf-dot {
  background: var(--vpf-yellow);
}
.vpf-search-bar__btn { height: 42px; }

/* ── Select wrap ──────────────────────────────────────────────────────────────*/
.vpf-select-wrap { position: relative; display: flex; align-items: center; }
.vpf-select-wrap select,
.vpf-select {
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--vpf-gray-border);
  border-radius: var(--vpf-radius);
  font-size: .9rem;
  width: 100%;
  background: var(--vpf-white);
  cursor: pointer;
  color: var(--vpf-body-text);
}
.vpf-select-wrap select:focus,
.vpf-select:focus { outline: none; border-color: var(--vpf-yellow); }
.vpf-select-arrow {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--vpf-gray-text);
  flex-shrink: 0;
}

/* =============================================================================
   CORPS ARCHIVE (sidebar + résultats)
   ============================================================================= */
.vpf-body { padding: 40px 0 56px; }
.vpf-body__inner {
  display: grid;
  grid-template-columns: var(--vpf-sidebar-w) 1fr;
  gap: var(--vpf-gap);
  align-items: start;
}

/* =============================================================================
   SIDEBAR FILTRES
   ============================================================================= */
.vpf-sidebar {
  position: sticky;
  top: 90px; /* sous la barre de recherche */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 4px;
}
/* Scrollbar discrète */
.vpf-sidebar::-webkit-scrollbar { width: 4px; }
.vpf-sidebar::-webkit-scrollbar-thumb { background: var(--vpf-gray-border); border-radius: 2px; }

.vpf-filter-group { margin-bottom: 28px; }
.vpf-filter-group__title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--vpf-navy);
  margin: 0 0 12px;
}

/* Checkboxes */
.vpf-filter-list { display: flex; flex-direction: column; gap: 8px; }
.vpf-checkbox-label, .vpf-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--vpf-body-text);
  user-select: none;
}
.vpf-checkbox-input, [data-filter="modalite"] { display: none; }
.vpf-checkbox-custom, .vpf-radio-custom {
  width: 18px; height: 18px;
  border: 2px solid var(--vpf-gray-border);
  border-radius: 4px;
  flex-shrink: 0;
  transition: var(--vpf-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpf-radio-custom { border-radius: 50%; }
.vpf-checkbox-input:checked ~ .vpf-checkbox-custom {
  background: var(--vpf-yellow);
  border-color: var(--vpf-yellow);
}
.vpf-checkbox-input:checked ~ .vpf-checkbox-custom::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid var(--vpf-navy);
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
[data-filter="modalite"]:checked ~ .vpf-radio-custom {
  background: var(--vpf-yellow);
  border-color: var(--vpf-yellow);
  box-shadow: inset 0 0 0 3px var(--vpf-white);
}

/* Grille domaines */
.vpf-domaines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vpf-domaine-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 2px solid var(--vpf-gray-border);
  border-radius: var(--vpf-radius);
  background: var(--vpf-white);
  cursor: pointer;
  text-align: center;
  transition: var(--vpf-transition);
}
.vpf-domaine-btn:hover,
.vpf-domaine-btn[aria-pressed="true"],
.vpf-domaine-btn.is-active {
  border-color: var(--vpf-yellow);
  background: var(--vpf-yellow-light);
}
.vpf-domaine-btn__icon {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--vpf-navy);
}
.vpf-domaine-initials {
  font-size: .65rem;
  font-weight: 700;
  color: var(--vpf-navy);
}
.vpf-domaine-btn__label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--vpf-navy);
  line-height: 1.2;
}

/* Bouton reset */
.vpf-sidebar__reset {
  background: none;
  border: none;
  color: var(--vpf-gray-text);
  font-size: .8rem;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}
.vpf-sidebar__reset:hover { color: var(--vpf-navy); }

/* =============================================================================
   ZONE RÉSULTATS
   ============================================================================= */
.vpf-results__header { margin-bottom: 20px; }
.vpf-results__count {
  font-size: 1rem;
  color: var(--vpf-body-text);
  margin: 0 0 12px;
}
.vpf-results__count strong { color: var(--vpf-navy); }

/* Tags actifs */
.vpf-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vpf-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  background: var(--vpf-yellow-light);
  border: 1px solid var(--vpf-yellow);
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--vpf-navy);
}
.vpf-active-tag__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vpf-navy);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  opacity: .6;
}
.vpf-active-tag__remove:hover { opacity: 1; }

/* Cards container */
.vpf-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vpf-cards--loading { opacity: .5; pointer-events: none; }

/* Load more */
.vpf-load-more-wrap {
  text-align: center;
  margin-top: 32px;
}

/* No results */
.vpf-no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--vpf-gray-text);
  font-size: 1rem;
}

/* =============================================================================
   CARD FORMATION
   ============================================================================= */
.vpf-card {
  display: flex;
  background: var(--vpf-white);
  border-radius: var(--vpf-radius-lg);
  box-shadow: var(--vpf-shadow);
  overflow: hidden;
  transition: box-shadow var(--vpf-transition), transform var(--vpf-transition);
}
.vpf-card:hover {
  box-shadow: var(--vpf-shadow-hover);
  transform: translateY(-2px);
}

/* Badge type vertical gauche */
.vpf-card__type-badge {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  background: var(--vpf-navy);
  color: var(--vpf-white);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-width: 36px;
  flex-shrink: 0;
}
/* Couleurs par type */
.vpf-card--formation-continue .vpf-card__type-badge { background: var(--vpf-navy); }
.vpf-card--alternance .vpf-card__type-badge { background: var(--vpf-pink); }

.vpf-card__body {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vpf-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.vpf-card__titles { flex: 1; }
.vpf-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.vpf-card__title a { color: var(--vpf-navy); }
.vpf-card__title a:hover { color: var(--vpf-yellow-dark); }
.vpf-card__thematique {
  font-size: .75rem;
  font-weight: 600;
  color: var(--vpf-gray-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.vpf-card__price { text-align: right; flex-shrink: 0; }
.vpf-card__price-label {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--vpf-gray-text);
}
.vpf-card__price-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vpf-navy);
  white-space: nowrap;
}

.vpf-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.vpf-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .825rem;
  color: var(--vpf-body-text);
}
.vpf-badge-cpf {
  background: var(--vpf-yellow);
  color: var(--vpf-navy);
  padding: 2px 8px;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.vpf-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.vpf-card__link-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--vpf-navy);
}
.vpf-card__link-more:hover { color: var(--vpf-yellow-dark); }

/* =============================================================================
   SECTION CTA (archive + single)
   ============================================================================= */
/* .vpf-cta-section { padding: 0 0 0; }
.vpf-cta-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.vpf-cta-block {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.vpf-cta-block p {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.vpf-cta-block--financement {
  background: var(--vpf-yellow);
  color: var(--vpf-navy);
}
.vpf-cta-block--contact {
  background: var(--vpf-pink);
  color: var(--vpf-white);
}
.vpf-cta-block__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--vpf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vpf-navy);
  box-shadow: var(--vpf-shadow);
  transition: var(--vpf-transition);
}
.vpf-cta-block__btn:hover { transform: scale(1.08); } */

/* =============================================================================
   FICHE FORMATION — HEADER 2 COLONNES
   ============================================================================= */
/* .vpf-single__header {
  padding: 40px 0 0;
  background: var(--vpf-white);
  border-bottom: 1px solid var(--vpf-gray-border);
}
.vpf-single__header-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
} */

/* Fil d'Ariane */
/* 
.vpf-breadcrumb {
  font-size: .8rem;
  color: var(--vpf-gray-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpf-breadcrumb a { color: var(--vpf-gray-text); }
.vpf-breadcrumb a:hover { color: var(--vpf-navy); }
.vpf-breadcrumb span[aria-current] { color: var(--vpf-body-text); font-weight: 600; }

.vpf-single__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--vpf-navy);
  margin: 0 0 8px;
  line-height: 1.2;
}
.vpf-single__thematique {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--vpf-gray-text);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.vpf-single__identite { display: flex; flex-direction: column; gap: 6px; }
.vpf-single__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .875rem;
  color: var(--vpf-body-text);
  margin: 0;
}
.vpf-single__meta-item svg { margin-top: 2px; flex-shrink: 0; }
.vpf-single__meta-item em { font-size: .8em; color: var(--vpf-gray-text); } */

/* =============================================================================
   SIDEBAR STICKY (fiche)
   ============================================================================= */
/* .vpf-sticky-sidebar {
  position: sticky;
  top: 24px;
  background: var(--vpf-white);
  border: 1.5px solid var(--vpf-gray-border);
  border-radius: var(--vpf-radius-lg);
  overflow: hidden;
  box-shadow: var(--vpf-shadow);
} */

/* Tabs */
/* .vpf-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--vpf-gray-border);
}
.vpf-tab {
  flex: 1;
  padding: 12px;
  background: var(--vpf-gray-bg);
  border: none;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--vpf-gray-text);
  transition: var(--vpf-transition);
}
.vpf-tab--active {
  background: var(--vpf-white);
  color: var(--vpf-navy);
  box-shadow: inset 0 -2px 0 var(--vpf-yellow);
}
.vpf-sticky-sidebar--switching { opacity: .8; } */

/* Infos liste */
/* .vpf-sidebar-infos {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vpf-sidebar-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  color: var(--vpf-body-text);
}
.vpf-sidebar-info svg { margin-top: 2px; flex-shrink: 0; color: var(--vpf-navy); } */

/* Prix */
/* .vpf-sidebar-price {
  padding: 16px 20px;
  margin-top: 12px;
  border-top: 1px solid var(--vpf-gray-border);
}
.vpf-sidebar-price__label {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--vpf-gray-text);
  margin-bottom: 2px;
}
.vpf-sidebar-price__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--vpf-navy);
} */

/* CTAs sidebar */
/* .vpf-sidebar-ctas {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
} */

/* =============================================================================
   CORPS DE LA FICHE
   ============================================================================= */
/* .vpf-single__body { padding: 40px 0; }
.vpf-single__body-inner {
  max-width: calc(var(--vpf-container) - 340px - 48px - 48px);
}

.vpf-single__description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vpf-body-text);
  margin-bottom: 24px;
}
.vpf-single__description p { margin: 0 0 1em; }

.vpf-single__accessibilite {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--vpf-gray-bg);
  border-radius: var(--vpf-radius);
  margin: 24px 0;
  font-size: .875rem;
  color: var(--vpf-gray-text);
}
.vpf-single__accessibilite p { margin: 0; }

.vpf-single__periode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--vpf-yellow-dark);
  text-transform: uppercase;
  margin: 0 0 24px;
} */

/* Objectifs */
/* .vpf-single__objectifs { margin: 0 0 32px; }
.vpf-single__objectifs-intro {
  font-size: 1rem;
  color: var(--vpf-body-text);
  margin: 0 0 12px;
}
.vpf-single__objectifs ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vpf-single__objectifs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  color: var(--vpf-body-text);
  padding-left: 8px;
}
.vpf-single__objectifs li::before {
  content: '•';
  color: var(--vpf-yellow);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
} */

/* =============================================================================
   KPIs CIRCULAIRES
   ============================================================================= */
/* .vpf-kpis {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 28px;
  background: var(--vpf-gray-bg);
  border-radius: var(--vpf-radius-lg);
}
.vpf-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 120px;
}
.vpf-kpi__circle {
  position: relative;
  width: 88px; height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vpf-kpi__svg {
  position: absolute;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.vpf-kpi__track {
  fill: none;
  stroke: var(--vpf-gray-border);
  stroke-width: 3;
}
.vpf-kpi__fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 1s ease;
}
.vpf-kpi--reussite   .vpf-kpi__fill { stroke: var(--vpf-yellow); }
.vpf-kpi--satisfaction .vpf-kpi__fill { stroke: #1DA3A3; }

.vpf-kpi__circle--solid {
  background: var(--vpf-navy);
  border-radius: 50%;
}
.vpf-kpi__value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--vpf-navy);
  position: relative;
  z-index: 1;
}
.vpf-kpi__circle--solid .vpf-kpi__value { color: var(--vpf-white); }
.vpf-kpi__label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--vpf-navy);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}
.vpf-kpi__sub {
  font-size: .7rem;
  color: var(--vpf-gray-text);
  text-align: center;
  margin: 0;
} */

/* =============================================================================
   ÉTABLISSEMENTS
   ============================================================================= */
/* .vpf-single__etablissements { margin: 32px 0; }
.vpf-single__section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--vpf-navy);
  margin: 0 0 12px;
}
.vpf-single__etablissements ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vpf-single__etablissements li {
  font-size: .9rem;
  color: var(--vpf-body-text);
}
.vpf-single__etablissements li::before { content: '·  '; }
.vpf-single__etablissements a {
  color: var(--vpf-navy-mid);
  text-decoration: underline;
}
.vpf-single__etablissements a:hover { color: var(--vpf-yellow-dark); } */

/* =============================================================================
   ACCORDÉONS
   ============================================================================= */
/* .vpf-accordions { margin: 32px 0; }
.vpf-accordion {
  border: 1.5px solid var(--vpf-gray-border);
  border-radius: var(--vpf-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.vpf-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--vpf-white);
  border: none;
  text-align: left;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vpf-navy);
  cursor: pointer;
  transition: background var(--vpf-transition);
}
.vpf-accordion__trigger:hover { background: var(--vpf-gray-bg); }
.vpf-accordion--open .vpf-accordion__trigger {
  background: var(--vpf-yellow-light);
  border-bottom: 1px solid var(--vpf-yellow);
}
.vpf-accordion__chevron {
  flex-shrink: 0;
  transition: transform .22s ease;
}
.vpf-accordion--open .vpf-accordion__chevron { transform: rotate(180deg); }
.vpf-accordion__panel { display: none; }
.vpf-accordion--open .vpf-accordion__panel { display: block; }
.vpf-accordion__content {
  padding: 20px;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--vpf-body-text);
}
.vpf-accordion__content p  { margin: 0 0 .8em; }
.vpf-accordion__content ul { list-style: disc; padding-left: 20px; }
.vpf-accordion__content li { margin-bottom: .4em; }
.vpf-accordion__content strong { color: var(--vpf-navy); } */

/* =============================================================================
   SEO INTRO
   ============================================================================= */
/* .vpf-single__seo {
  font-size: .875rem;
  line-height: 1.7;
  color: var(--vpf-gray-text);
  padding: 24px;
  background: var(--vpf-gray-bg);
  border-radius: var(--vpf-radius);
  margin: 32px 0;
}
.vpf-single__seo h2, .vpf-single__seo h3 {
  font-size: 1rem;
  color: var(--vpf-navy);
  margin: 0 0 .6em;
}
.vpf-single__seo p { margin: 0 0 .8em; } */

/* =============================================================================
   FAQ
   ============================================================================= */
/* .vpf-faq {
  background: var(--vpf-navy);
  padding: 56px 0;
}
.vpf-faq__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--vpf-white);
  margin: 0 0 32px;
  text-align: center;
}
.vpf-faq .vpf-accordion {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  border-radius: var(--vpf-radius);
}
.vpf-faq .vpf-accordion__trigger {
  background: transparent;
  color: var(--vpf-white);
}
.vpf-faq .vpf-accordion__trigger:hover { background: rgba(255,255,255,.08); }
.vpf-faq .vpf-accordion--open .vpf-accordion__trigger {
  background: var(--vpf-yellow);
  color: var(--vpf-navy);
  border-color: var(--vpf-yellow);
}
.vpf-faq .vpf-accordion--open .vpf-accordion__chevron { color: var(--vpf-navy); }
.vpf-faq .vpf-accordion__chevron { color: var(--vpf-yellow); }
.vpf-faq .vpf-accordion__content {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
  padding: 20px;
} */

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .vpf-body__inner {
    grid-template-columns: 240px 1fr;
  }
  .vpf-single__header-grid {
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Archive */
  .vpf-body__inner {
    grid-template-columns: 1fr;
  }
  .vpf-sidebar {
    position: static;
    max-height: none;
    border: 1.5px solid var(--vpf-gray-border);
    border-radius: var(--vpf-radius-lg);
    padding: 20px;
    margin-bottom: 8px;
  }
  .vpf-domaines-grid { grid-template-columns: repeat(3, 1fr); }
  .vpf-hero__inner { flex-direction: column; }
  .vpf-hero__stats { width: 100%; justify-content: space-between; }
  .vpf-stat-card { flex: 1; min-width: 0; padding: 14px 16px; }

  /* Search bar */
  .vpf-search-bar { position: relative; }
  .vpf-search-bar__inner { flex-direction: column; align-items: stretch; }
  .vpf-search-bar__field--keyword,
  .vpf-search-bar__field--centre { min-width: 0; width: 100%; }

  /* Card */
  .vpf-card__top { flex-direction: column; gap: 8px; }
  .vpf-card__price { text-align: left; }

  /* Single */
  .vpf-single__header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vpf-sticky-sidebar {
    position: static;
    order: -1; /* sidebar en premier sur mobile */
  }
  .vpf-single__body-inner { max-width: 100%; }

  /* CTA */
  .vpf-cta-section__inner { grid-template-columns: 1fr; }
  .vpf-cta-block { padding: 32px 24px; }

  /* KPIs */
  .vpf-kpis { gap: 20px; }
}

@media (max-width: 480px) {
  .vpf-card__actions { flex-direction: column; align-items: flex-start; }
  .vpf-btn--sm { width: 100%; justify-content: center; }
  .vpf-domaines-grid { grid-template-columns: repeat(3, 1fr); }
  .vpf-sidebar-ctas .vpf-btn { font-size: .8rem; }
}

/* single page */
& .accordion {
  display: flex;
  row-gap: min(18px, 5vw);
  flex-direction: column;
  & .accordion-item {
    position: relative;
    display: grid;
    transition: all .3s;
    background-color: #F1F1F1;
    border: 1px solid #F1F1F1;
    grid-template-rows: 3.5em 0fr;

    &:has( input:checked) {
      background-color: transparent;
      grid-template-rows: 3.5em 1fr;
    }
    & .accordion-head {
        display: flex;
        cursor: pointer;
        color: #3E9FB6;
        font-weight: 600;
        align-items: center;
        text-transform: uppercase;
        column-gap: min(20px, 5vw);
        justify-content: space-between;
        font-family: 'Quicksand',sans-serif;
        padding: min(1rem, 3vw) min(1.5rem, 5vw);
        font-size: clamp(min(14px,4vw),1.5vw,18px);

        & .accordion-btn {
            display: block;
            flex: 0 0 auto;
            aspect-ratio: 1/1;
            transition: all .3s;
            width: min(20px, 3vw);
            background-color: currentcolor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-image: url(images/angle-down.svg);
            mask-image: url(images/angle-down.svg);
            &:has( input:checked) {rotate: -180deg;}
        }
    }
    & .accorrdion-body {
      overflow: hidden;
      font-weight: 400;
      transition: all .3s;
      padding-inline: min(2em,5vw);

      &:is(.accordion-item:has( input:checked) &) {
        padding-bottom: min(2em, 5vw);
      }
    }
  }
}
section[class^="sg-"] {
  font-size: clamp(min(13px,3.8vw),1vw,15px);
  & strong {font-weight: 700;}
}
.sg-1 {
  background-color: #f1f1f1;
  .container {
    display: flex;
    flex-wrap: wrap;
    margin-inline: auto;
    gap: min(2em,10vw) 5%;
    width: min(1110px,90vw);
    padding-block: min(4em,10vw);
    & .left {
      flex: 1 1 max(min(300px,80vw),51%);
      & .text {
        row-gap: 1em;
        display: grid;
        line-height: 1.5;
      }
      & h1 {
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -4%;
        font-family: 'Quicksand',sans-serif;
        font-size: clamp(min(30px,8vw),2vw,35px);
      }
      & .sub-cat {
        font-weight: 400;
        padding-bottom: 1em;
        text-transform: uppercase;
        font-size: clamp(min(14px,4vw),1.5vw,16px);
        border-bottom: 1px solid var(--vpf-body-text);
      }
      & .info-circle {
        display: flex;
        column-gap: 1em;
        font-style: italic;
        font-size: clamp(min(13px,3.5vw),1vw,14px);
        &::before {
          position: relative;
          content: '';
          padding: .8em;
          background-color: currentColor;
          -webkit-mask: url(images/info-circle.svg) center / contain no-repeat;
          mask: url(images/info-circle.svg) center / contain no-repeat;
        }
      }
    }
    & .right {
      row-gap: 2em;
      display: grid;
      flex: 1 1 max(min(300px,80vw),35%);
      font-size: clamp(min(13px,3.5vw),1vw,14px);
      & .ct-tabs {
        & .body-tabs {
          grid-gap: 0;
          display: grid;
          grid-template-columns: 1fr;
          & .item-tabs {
            position: relative;
            opacity: 0;
            visibility: hidden;
            transition: all .5s;
            padding: min(2em,5vw);
            grid-area: 1 / 1 / 2 / 2;
            border-radius: 0 0 .3em .3em;
            background-color: var(--vpf-white);
            &:has( [type="radio"]:checked) {
              opacity: 1;
              visibility: visible;
            }
            & [type="radio"] {
              pointer-events: none;
              position: absolute;
              visibility: hidden;
            }
            & .text {
              & ul {
                row-gap: .7em;
                display: grid;
                & li[style^="--icn:"] {
                  display: flex;
                  column-gap: 1em;
                  &::before {
                    position: relative;
                    content: '';
                    padding: 0.7em 0.5em;
                    background-color: currentColor;
                    mask: var(--icn) center / contain no-repeat;
                  }
                }
              }
              & .btn-price {
                margin-top: 1em;
                font-weight: 500;
                border-radius: .3em;
                padding: .91em 1.5em;
                display: inline-block;
                text-transform: uppercase;
                border: 1px solid #D9D9D9;
                font-size: clamp(min(13px,3vw),1vw,14px);
                 & strong {
                   font-weight: 700;
                   vertical-align: text-bottom;
                   font-size: clamp(min(16px,4vw),1.1vw,20px);
                 }
              }
            }
          }
        }
        & .head-tabs {
          display: flex;
          & label {
            position: relative;
            padding: .8em;
            cursor: pointer;
            color: #222324;
            text-transform: uppercase;
            border: 1px solid #222324;
            background-color: transparent;
            &.is-active {
              color: #ffffff;
              background-color: #222324;
            }
          }
        }      
      }
      & p:has( .btn-avis,.btn-download-file) {
        gap: 1em;
        display: flex;
        flex-wrap: wrap;
        & .btn-avis {
          color: #ffffff;
          font-weight: 500;
          column-gap: .6em;
          border-radius: 2em;
          align-items: center;
          padding: 0.8em .8em;
          display: inline-flex;
          border: 1px solid #3E9FB6;
          background-color: #3E9FB6;
          &::after {
            position: relative;
            content: '';
            padding: .5em;
            background-color: currentColor;
            -webkit-mask: url(images/arrow-left.svg) center / contain no-repeat;
            mask: url(images/arrow-left.svg) center / contain no-repeat;
          }
        }
        & .btn-download-file {
          color: #222324;
          column-gap: .6em;
          font-weight: 500;
          column-gap: 0.6em;
          border-radius: 2em;
          align-items: center;
          padding: 0.8em .8em;
          display: inline-flex;
          border: 1px solid #EDBE00;
          background-color: transparent;
          &::before {
            position: relative;
            content: '';
            padding: .5em;
            background-color: currentColor;
            -webkit-mask: url(images/download.svg) center / contain no-repeat;
            mask: url(images/download.svg) center / contain no-repeat;
          }
        }
      }
    }
  }
}
.sg-2 {
  .container {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    margin-inline: auto;
    gap: min(2em,10vw) 10%;
    width: min(1110px,90vw);
    padding-block: min(4em,10vw);
    & ul:not([class]) {
      list-style: disc;
      padding-left: 1em;
    }
    & .left {
      row-gap: 2em;
      display: grid;
      flex: 1 1 max(min(300px,80vw),50%);
      & .head {
        & p {
          font-weight: 600;
          line-height: 1.3;
          letter-spacing: -2%;
          font-family: 'Quicksand',sans-serif;
          font-size: clamp(min(15px,4vw),1.5vw,19px);
        }
      }
      
      & .text-info {
        display: flex;
        column-gap: 1em;
        font-style: italic;
        font-size: clamp(min(13px,3.5vw),1vw,14px);
        & strong {font-weight: 600;}
      }
    }
    & .right {
      flex: 1 1 max(min(300px,80vw),30%);
      & .text {
        row-gap: 1em;
        display: grid;
        & [style^="--icn:"] {
          display: flex;
          column-gap: 1em;
          font-size: clamp(min(13px,3.5vw),1vw,14px);
          &::before {
            position: relative;
            content: '';
            padding: 0.7em 0.5em;
            background-color: currentColor;
            mask: var(--icn) center / contain no-repeat;
          }
        }
        & ul.listing {
          display: grid;
          column-gap: 2%;
          border-radius: .3em;
          padding: min(1em,5vw);
          background-color: var(--clwhite);
          box-shadow: 0 0 2em hsl(from var(--clgrey) h s l / .1);
          grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
          & li {
            row-gap: 1em;
            display: grid;
            text-align: center;
            align-content: flex-start;
            font-size: clamp(min(12px,3.4vw),1vw,13px);
            & strong {
              display: block;
              font-weight: 700;
            }
            & .circle {
              position: relative;
                display: grid;
                aspect-ratio: 1/1;
                font-weight: 700;
                border-radius: 50%;
                margin-inline: auto;
                color: var(--clgrey);
                justify-items: center;
                align-content: center;
                width: min(75px,100%);
                color: var(--clwhite);
                background-color: #3E9FB6;
                font-family: 'Quicksand',sans-serif;
                font-size: clamp(min(18px,6vw),2vw,23px);
                &:is(li:nth-child(2) &) {
                  color: #222324;
                  background-color: #EDBE00;
                }
                &:is(li:nth-child(3) &) {background-color: #C23487;}
            }
          }
        }
        & h6 {
          color: #C23487;
          font-weight: 600;
          line-height: 1.3;
          letter-spacing: -2%;
          text-transform: uppercase;
          font-family: 'Quicksand',sans-serif;
          font-size: clamp(min(15px,4vw),1.5vw,19px);
        }
      }
    }
  }
}
.sg-3 {
  position: relative;
  color: #ffffff;
  background-color: #3E9FB6;
  .container {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    margin-inline: auto;
    gap: min(2em,10vw) 10%;
    width: min(1110px,90vw);
    padding-block: min(4em,10vw);
    & .text-center {
      width: 100%;
      text-align: center;
      & h2 {
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -4%;
        font-family: 'Quicksand',sans-serif;
        font-size: clamp(min(30px,7vw),2vw,35px);
      }
    }
    & .accordion {
      row-gap: 0;
      margin-inline: auto;
      width: min(810px,100%);
      & .accordion-item {
        border: none;
        border-bottom: 1px solid #F1F1F1;
        background-color: transparent;
        & .accordion-head {
            color: inherit;
            font-weight: 600;
        }
        & .accorrdion-body {
          color: #222324;
          background-color: #EDBE00;
          &:is(.accordion-item:has( input:checked) &) {
            padding-block: min(2em, 5vw);
          }
        }
      }
    }
  }
  @media screen and (width >= 1200px) {
    &::before {
      position: absolute;
      inset: 0;
      content: '';
      opacity: .2;
      pointer-events: none;
      background: url(/wp-content/themes/morgane/image/vector-home.svg) 110% 101% / min(650px,60vw) no-repeat;
    }
  }
}
.sg-4 {
  .container {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    margin-inline: auto;
    gap: min(2em,10vw) 10%;
    width: min(1110px,90vw);
    padding-block: min(4em,10vw);
    & .flex {
      gap: 1em 2%;
      display: flex;
      flex-wrap: wrap;
      & > article {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: .3em;
        background-color: #EDBE00;
        flex: 1 1 max(min(300px,80vw),30%);
        & .text {
          row-gap: 1em;
          display: grid;
          align-content: center;
          & h3 {
            font-weight: 600;
            font-family: 'Quicksand', sans-serif;
            font-size: clamp(min(18px,5.3vw),1.5vw,25px);
            
          }
        }
        & .arrow {
          position: relative;
          width: 0;
          height: 0;
          margin: 0;
          outline: 0;
          z-index: 2;
          top: initial;
          right: inherit;
          font-size: 0;
          left: initial;
          flex: 0 0 auto;
          bottom: inherit;
          cursor: pointer;
          overflow: hidden;
          color: #222324;
          aspect-ratio: 1/1;
          transition: all .2s;
          border-radius: 2rem;
          display: inline-block;
          padding: min(1.375rem, 4.8vw);
          background-color: #ffffff;
          border: 2px solid #ffffff;
          &::after,
          &::before {
              position: absolute;
              inset: 30%;
              content: "";
              display: block;
              transition: inherit;
              pointer-events: none;
              background-color: currentColor;
              -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
              -webkit-mask-position: center;
              mask-position: center;
              -webkit-mask-size: contain;
              mask-size: contain;
              -webkit-mask-image: url(/wp-content/uploads/2026/06/arrow.svg);
              mask-image: url(/wp-content/uploads/2026/06/arrow.svg);
          }
          &::after {
              opacity: 0;
              translate: -100% 0;
          }
          &.slick-disabled {
              opacity: .2;
              pointer-events: none;
          }
          &.prev {
              transform: rotate(-180deg)
          }
          &:is(a:hover &,
          a.overlay:hover &,
          a.overlay:hover ~ &,
          a.overlay:hover ~ * &),
          &:hover {
              color: var(--cLWhite);
              background-color: var(--cLRedCrimson);
              border-color: var(--cLRedCrimson);
          }
          &:is(a:hover &,
          a.overlay:hover &,
          a.overlay:hover ~ &,
          a.overlay:hover ~ * &)::before,
          &:hover::before {
              translate: 100% 0;
              opacity: 0
          }
          &:is(a:hover &,
          a.overlay:hover &,
          a.overlay:hover ~ &,
          a.overlay:hover ~ * &)::after,
          &:hover::after {
              opacity: 1;
              translate: 0 0;
          }
        }
        &:is(.article-1) {
          padding: min(2em,5vw);
           display: flex;
           color: #222324;
           & .arrow {
            margin-top: auto;
           }
        }
        &:is(.article-2) {
          display: grid;
          color: #ffffff;
          background-color: #C23487;
          flex: 1 1 max(min(300px,80vw),60%);
          grid-template-columns: repeat(auto-fill, minmax(max(min(250px,80vw),40%), 1fr));
          & picture {
            position: relative;
            /* height: min(100%,58vw); */
            & img {
              width: 100%;
              height: 100%;
              max-width: inherit;
              object-fit: cover;
            }
            @media screen and (width >= 1200px) {
              & {
                mask: linear-gradient(270deg, transparent 0%, hsl(from #000 h s l / .4) 25%, #000 80% 100%);
              }
            }
          }
          & .text {
            padding: min(2em,5vw);
            & h3 {
              font-weight: 700;
              line-height: 1.2;
              /* font-family: 'Quicksand', sans-serif; */
              font-size: clamp(min(25px,6vw),1.5vw,35px);
            }
          }
          & .btn-voir {
            color: #222324;
            font-weight: 500;
            column-gap: .6em;
            margin-right: auto;
            border-radius: 2em;
            align-items: center;
            padding: 0.8em .8em;
            display: inline-flex;
            border: 1px solid #ffffff;
            background-color: #ffffff;
            &::after {
              position: relative;
              content: '';
              padding: .5em;
              background-color: currentColor;
              -webkit-mask: url(images/arrow-left.svg) center / contain no-repeat;
              mask: url(images/arrow-left.svg) center / contain no-repeat;
            }
          }
        }
        & a.overlay {
          position: absolute;
          inset: 0;
          font-size: 0;
          z-index: 2;
        }
      }
    }
    & > .text {
      display: grid;
      row-gap: 1.5em;
      & h2 {
        color: #3E9FB6;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -4%;
        font-family: 'Quicksand',sans-serif;
        font-size: clamp(min(30px,6.5vw),2vw,35px);
      }
      & strong {font-weight: 700;}
    }
  }
}
#content:has( section[class^="sg-"]) + .list-logo.margin.useful-width {margin-top: 0;}