/* =================================================================
   SOL · programs.css — Pages programmes (FLOW / REVEAL / AFTERWORK / SYNERGY)
   ================================================================= */

/* ---------- Fond supplémentaires ---------- */
.bg-snow   { background: var(--snow); }
.bg-offwh  { background: var(--offwhite); }
.bg-dark-warm { background: var(--dark); color: var(--cream-text); }
.bg-dark-warm h2, .bg-dark-warm h3 { color: var(--cream-text); }
.bg-dark-warm .eyebrow { color: rgba(252,244,232,0.6); }
.bg-dark-warm p { color: var(--cream-text-soft); }
.bg-dark-warm .divider { background: rgba(252,244,232,0.3); }

/* ---------- Badge programme ---------- */
.prog-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  border-radius: var(--radius-pill);
  padding: 7px 20px;
  margin-bottom: 30px;
}

/* ---------- Hero programme ---------- */
.prog-hero {
  background: var(--hero-beige);
  padding-top: calc(var(--header-h) + clamp(52px, 9vw, 100px));
  padding-bottom: clamp(64px, 10vw, 116px);
  overflow: hidden;
}

.prog-hero-inner {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
/* Empêche une colonne de grille de gonfler à la largeur d'un enfant qui
   ne se coupe pas (ex. le bouton CTA) et de déborder sur mobile. */
.prog-hero-inner > * { min-width: 0; }
@media (min-width: 900px) {
  .prog-hero-inner { grid-template-columns: 1.1fr 1fr; }
}

.prog-hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.1;
  color: var(--c-primary);
  margin-bottom: 22px;
  text-wrap: balance;   /* lignes équilibrées, pas de mot seul en bas */
}

.prog-hero-desc {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--text-soft);
  line-height: 1.75;
  max-width: 56ch;
}

.prog-hero-actions {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.prog-cta-note {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
}

.prog-hero-visual {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}
/* Fenêtre réduite / tablette : photo hero programme plafonnée par la hauteur d'écran
   (le titre est au-dessus, on évite juste une image démesurée qui déborde). */
@media (min-width: 641px) and (max-width: 899px) {
  .prog-hero-visual { max-width: min(320px, 44vh); margin-inline: 0; }
}

.prog-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: var(--c-primary);
  opacity: 0.2;
  transform: translate(14px, 14px);
  z-index: 0;
  pointer-events: none;
}

.prog-hero-visual .photo-cathedral {
  position: relative;
  z-index: 1;
}

/* ---------- Citation block ---------- */
.prog-citation {
  text-align: center;
  padding-block: clamp(52px, 7vw, 80px);
}

.prog-citation blockquote {
  max-width: 740px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.45;
  color: var(--c-primary);
  position: relative;
  padding: 0 clamp(16px, 3vw, 40px);
}

.prog-citation blockquote::before {
  content: '"';
  font-size: 6em;
  line-height: 0.6;
  color: var(--c-primary);
  opacity: 0.12;
  position: absolute;
  left: -8px;
  top: 0.15em;
  font-family: var(--font-display);
  pointer-events: none;
}

.prog-citation cite {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ---------- Pour qui ---------- */
.pour-qui-cols {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .pour-qui-cols { grid-template-columns: 1.2fr 1fr; }
}

.pour-qui-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pour-qui-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 14px;
  border-left: 3px solid var(--c-primary);
}

.pour-qui-sun {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.pour-qui-sun img { width: 100%; height: 100%; object-fit: contain; }

.pour-qui-item p { margin: 0; font-size: 15.5px; line-height: 1.55; }

.pour-qui-aside {
  background: var(--cream-2);
  border-radius: 20px;
  padding: clamp(28px, 3.5vw, 44px);
}
.pour-qui-aside .eyebrow { display: block; margin-bottom: 10px; }
.pour-qui-aside h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--c-primary);
  margin-bottom: 14px;
}
.pour-qui-aside p { color: var(--text-soft); font-size: 15.5px; line-height: 1.65; }

/* ---------- Promesse + MO2I ---------- */
.promesse-cols {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .promesse-cols { grid-template-columns: 1.2fr 1fr; }
}

.promesse-list {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promesse-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.promesse-list li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  background: url('../assets/brand/sun-terracotta.png') center / contain no-repeat;
}

.mo2i-box {
  border: 1.5px solid rgba(186, 119, 65, 0.5);
  border-radius: 20px;
  padding: clamp(26px, 3.5vw, 40px);
  background: transparent;
}

.mo2i-box .eyebrow { display: block; margin-bottom: 12px; }
.mo2i-box h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  color: var(--c-primary);
  margin-bottom: 14px;
}
.mo2i-box p { font-size: 15px; line-height: 1.7; color: var(--text-soft); margin: 0; }

/* ---------- Phases ---------- */
.phases-intro {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: clamp(52px, 7vw, 80px);
}
.phases-intro h2 { color: var(--cream-text); }
.phases-intro p { color: var(--cream-text-soft); margin-inline: auto; margin-top: 14px; }

.phases-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) {
  .phases-grid { grid-template-columns: repeat(3, 1fr); }
}

.phase-card {
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 36px) clamp(36px, 5vw, 56px);
  text-align: center;
  position: relative;
}

.phase-picto {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
}
.phase-picto img { width: 100%; height: 100%; object-fit: contain; }

.phase-num {
  font-family: var(--font-display);
  font-size: clamp(90px, 14vw, 164px);
  line-height: 0.82;
  color: var(--gold);
  opacity: 0.28;
  display: block;
  margin-bottom: 22px;
  letter-spacing: -0.04em;
}

.phase-title {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream-text);
  margin-bottom: 14px;
}

.phase-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--cream-text-soft);
}

/* ---------- Objectifs ---------- */
.objectifs-grid {
  display: grid;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 60px);
}
@media (min-width: 640px) { .objectifs-grid { grid-template-columns: repeat(2, 1fr); } }

.objectif-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 26px) clamp(18px, 2.5vw, 26px);
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.obj-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
}
.obj-icon img { width: 100%; object-fit: contain; }
.objectif-item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }

/* ---------- Repars ---------- */
.repars-cols {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 900px) {
  .repars-cols { grid-template-columns: 1fr 1fr; }
}

.repars-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}
.repars-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
}
.repars-list li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: url('../assets/brand/sun-terracotta.png') center / contain no-repeat;
}

.repars-photo {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

/* ---------- En pratique ---------- */
.pratique-wrap {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pratique-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 500px) { .pratique-row { grid-template-columns: 1fr; } }

.pratique-label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(255,255,255,0.65);
  padding: 18px 22px;
  display: flex;
  align-items: center;
}
.pratique-val {
  background: var(--white);
  padding: 18px 24px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------- Avis ---------- */
.testimonials-grid {
  display: grid;
  gap: 22px;
  margin-top: clamp(40px, 5vw, 60px);
}
@media (min-width: 680px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
/* un seul avis : carte centrée, à largeur de lecture, plutôt qu'étirée sur toute la grille */
.testimonials-grid--solo { grid-template-columns: 1fr !important; max-width: 620px; margin-inline: auto; }
/* deux avis : deux colonnes centrées, sinon la 3e colonne vide déséquilibre la rangée */
.testimonials-grid--duo { max-width: 880px; margin-inline: auto; }
@media (min-width: 1000px) { .testimonials-grid--duo { grid-template-columns: repeat(2, 1fr); } }

/* métier de l'auteur, quand la source le donne (LinkedIn) */
.testi-role {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-soft);
}

.testimonial-card {
  background: var(--white);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testi-stars {
  display: flex;
  gap: 3px;
}
.testi-stars span { font-size: 17px; color: var(--gold-deep); }

.testi-quote {
  font-style: italic;
  line-height: 1.68;
  flex: 1;
  font-size: 15px;
  color: var(--text);
}

.testi-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin-inline: auto; }

details.faq-item { border-bottom: 1px solid var(--line); }
details.faq-item:first-of-type { border-top: 1px solid var(--line); }

summary.faq-q {
  list-style: none;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  flex-shrink: 0;
  color: var(--c-primary);
  transition: transform 0.25s ease;
}
details.faq-item[open] summary.faq-q::after { transform: rotate(45deg); }

.faq-a {
  padding-bottom: 24px;
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 15.5px;
}

/* ---------- CTA final programme ---------- */
.prog-final-cta { text-align: center; }
.prog-final-cta h2 { color: var(--cream-text); margin-bottom: 18px; }
.prog-final-cta p { color: var(--cream-text-soft); margin-inline: auto; }
.prog-final-cta .btn { margin-top: 36px; }
.prog-final-cta .prog-cta-note { margin-top: 16px; color: rgba(252,244,232,0.6); }

/* ---- Responsive mobile ---- */
@media (max-width: 640px) {
  .prog-hero-inner { text-align: center; }
  .prog-hero-actions { align-items: center; }
  .prog-hero-actions .btn { white-space: normal; }   /* le CTA passe à la ligne au lieu de déborder */
  .prog-badge { margin-inline: auto; }
  .pour-qui-cols { grid-template-columns: 1fr; }
  .promesse-cols { grid-template-columns: 1fr; }
  .repars-cols { grid-template-columns: 1fr; }
}

/* ---------- Bandeau strip ---------- */
.prog-strip {
  padding-block: clamp(18px, 2.5vw, 26px);
  text-align: center;
}
.prog-strip-text {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--cream-text);
  font-style: italic;
  max-width: 72ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* ---------- Tu te reconnais ---------- */
.recog-list {
  list-style: none;
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.recog-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.6;
  padding: 18px 22px;
  background: var(--white);
  border-radius: 14px;
  border-left: 3px solid var(--c-primary);
}
.recog-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  margin-top: 6px;
}

.recog-footer {
  margin-top: clamp(44px, 5vw, 64px);
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recog-footer-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.recog-who {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recog-who li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.recog-who li::before {
  content: '·';
  color: var(--c-primary);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -1px;
}

/* ---------- Citation avec fond mountains ---------- */
.prog-citation-mtn {
  background: var(--sand) url('../assets/brand/mountains.svg') center bottom / 100% auto no-repeat;
}
.prog-citation-mtn blockquote { color: var(--terracotta-deep); }
.prog-citation-mtn blockquote::before { color: var(--terracotta-deep); }
.prog-citation-mtn cite { color: var(--text-soft); }

/* ---------- Citation avec fond motif ---------- */
.prog-citation-motif {
  background: url('../assets/brand/motif-flow-citation.png') center / cover no-repeat;
}
.prog-citation-motif blockquote { color: var(--dark); }
.prog-citation-motif blockquote::before { color: var(--dark); }
.prog-citation-motif cite { color: var(--text-soft); }

/* ---------- Phase col avec illustration motif (FLOW) ---------- */
.phase-col-with-motif {
  padding: 0;
  overflow: hidden;
}
.phase-col-visual {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.phase-col-motif-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.phase-col-content {
  padding: 0 clamp(20px, 2.5vw, 28px) clamp(28px, 3vw, 40px);
  text-align: center;
}
.phase-col-with-motif .phase-col-num {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* ---------- Phases 3 colonnes (picto au-dessus du chiffre) ---------- */
.phases-cols {
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  margin-top: clamp(52px, 7vw, 80px);
}
@media (min-width: 768px) {
  .phases-cols { grid-template-columns: repeat(3, 1fr); }
}

.phase-col {
  text-align: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px);
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.phase-col-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
}

.phase-col-picto {
  width: clamp(52px, 6vw, 72px);
  height: auto;
  object-fit: contain;
}

.phase-col-num {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 108px);
  line-height: 0.9;
  color: var(--c-primary);
  opacity: 0.2;
  letter-spacing: -0.04em;
  display: block;
}

.phase-col-title {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.3;
}

.phase-col-body {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-soft);
}

/* ---------- Phases v2 (pictos brand + grands numéros) ---------- */
.phases-v2-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 800px;
  margin-inline: auto;
}

.phase-v2 {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: flex-start;
  padding: clamp(36px, 5vw, 60px) 0;
}
@media (max-width: 600px) {
  .phase-v2 { grid-template-columns: 1fr; text-align: center; }
  .phase-v2-picto { margin-inline: auto; }
}

.phase-v2-sep {
  height: 1px;
  background: var(--line);
  margin-inline: 0;
}

.phase-v2-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.phase-v2-picto img {
  width: clamp(64px, 8vw, 96px);
  height: auto;
  object-fit: contain;
}

.phase-v2-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1;
  color: var(--c-primary);
  opacity: 0.25;
  letter-spacing: -0.03em;
  margin-top: 4px;
  text-align: center;
}

.phase-v2-title {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.3;
}

.phase-v2-body {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-soft);
}

/* ---------- Repars v2 ---------- */
.repars-v2-grid {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 5vw, 60px);
  max-width: 860px;
  margin-inline: auto;
}
@media (min-width: 640px) { .repars-v2-grid { grid-template-columns: repeat(2, 1fr); } }

.repar-v2 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--cream);
  border-radius: 16px;
}
.repar-v2-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-top: 1px;
}
.repar-v2 p { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* ---------- Pratique v2 (pictos) ---------- */
.pratique-v2-grid {
  display: grid;
  gap: 28px;
  margin-top: clamp(44px, 6vw, 68px);
}
@media (min-width: 560px) { .pratique-v2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pratique-v2-grid { grid-template-columns: repeat(4, 1fr); } }

/* note sous la grille : la fiche détaillée se remet de vive voix, lors de l'échange */
.pratique-v2-note {
  margin: clamp(28px, 3.5vw, 42px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.pratique-v2-note strong { color: var(--c-primary); font-weight: 600; }

.pratique-v2-item {
  text-align: center;
  padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 24px);
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pratique-v2-icon {
  width: 48px;
  height: 48px;
  color: var(--c-primary);
  flex-shrink: 0;
}
.pratique-v2-icon svg { width: 100%; height: 100%; }
.pratique-v2-big {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.pratique-v2-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0;
}
.pratique-v2-val {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ---------- Phases FLOW — pictos alignés, grands, fond transparent ---------- */
.prog-phases-flow {
  background: #FBF6EE;
}
.prog-phases-flow .phase-col {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: clamp(32px, 4vw, 52px) clamp(22px, 2.5vw, 36px) clamp(36px, 4.5vw, 52px);
}

/* Conteneur à hauteur fixe pour aligner tous les pictos sur la même ligne */
.phase-picto-wrap {
  height: clamp(90px, 12vw, 130px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 6px;
}

.prog-phases-flow .phase-col-picto {
  max-width: clamp(90px, 12vw, 130px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.prog-phases-flow .phase-col-title {
  font-size: clamp(18px, 2vw, 23px);
  color: var(--c-primary);
  margin-bottom: 14px;
}

/* ---------- Section "Les plus de FLOW" ---------- */
.prog-plus-flow {
  text-align: center;
}
.prog-plus-flow .section-head h2 { color: var(--cream-text); }
.prog-plus-flow .section-head .eyebrow--light {
  color: rgba(252,244,232,0.65);
  border-color: rgba(252,244,232,0.3);
}

.plus-flow-grid {
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  margin-top: clamp(48px, 6vw, 72px);
}
@media (min-width: 768px) {
  .plus-flow-grid { grid-template-columns: repeat(3, 1fr); }
}

.plus-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.plus-flow-picto {
  width: clamp(64px, 7.5vw, 84px);
  height: clamp(64px, 7.5vw, 84px);
  object-fit: contain;
  opacity: 0.92;
  flex-shrink: 0;
}

.plus-flow-item h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--cream-text);
  line-height: 1.2;
  margin: 0;
}

.plus-flow-item p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--cream-text-soft);
  max-width: 28ch;
  margin: 0 auto;
}

/* ---------- Citation avec fond photo montagne ---------- */
.prog-citation-photo {
  position: relative;
  background: url('../assets/images/montagne-sol.jpg') center 40% / cover no-repeat;
}
.prog-citation-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 3, 0.42);
}
.prog-citation-photo .container { position: relative; z-index: 1; }
.prog-citation-photo blockquote { color: #fff; }
.prog-citation-photo blockquote::before { color: rgba(255,255,255,0.18); }
.prog-citation-photo cite { color: rgba(255,255,255,0.62); }

/* ---------- Phases FLOW — 5 étapes numérotées, layout horizontal ouvert ---------- */
.prog-phases-flow { background: #FBF6EE; }

/* Grille : 1 col mobile, 3 cols tablette, 5 cols desktop */
.prog-phases-flow .phases-cols {
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 44px) clamp(16px, 2vw, 28px);
}
@media (min-width: 700px) {
  .prog-phases-flow .phases-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .prog-phases-flow .phases-cols { grid-template-columns: repeat(5, 1fr); }
  /* Variante 3 étapes (AFTERWORK, SYNERGY) : pas d'étirement sur 5 colonnes fantômes */
  .prog-phases-flow .phases-cols.phases-cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-inline: auto; }
  /* Variante 4 étapes (REVEAL) : 4 colonnes centrées */
  .prog-phases-flow .phases-cols.phases-cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin-inline: auto; }
  /* Variante 6 étapes (SYNERGY) : 2 rangées de 3, plus lisible qu'une rangée de 6 */
  .prog-phases-flow .phases-cols.phases-cols-6 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }
}

/* Colonnes ouvertes, sans carte */
.prog-phases-flow .phase-col {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0 clamp(8px, 1vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: static;
  overflow: visible;
}

/* Séparateur vertical subtil (uniquement en layout 5 colonnes) */
@media (min-width: 1080px) {
  .prog-phases-flow .phase-col:not(:last-child) {
    border-right: 1px solid rgba(201,152,47,0.18);
  }
}

/* Numéro grand en display font — or par défaut */
.prog-phases-flow .phase-col-num {
  position: static;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1;
  color: var(--c-primary);
  opacity: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

/* Étapes d'entrée / de suivi : beige foncé */
.prog-phases-flow .phase-col-num--soft {
  color: var(--sand);
}

/* Titre phase */
.prog-phases-flow .phase-col-title {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Corps phase */
.prog-phases-flow .phase-col-body {
  font-size: clamp(13.5px, 1.3vw, 14.5px);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ---- prog-afterwork : palette imposée (verts sauge B4B99F/B1B69C/3C513F) — aucun orange/jaune ---- */
.prog-afterwork .promesse-list li::before,
.prog-afterwork .repars-list li::before {
  filter: hue-rotate(110deg) saturate(0.8);
}
.prog-afterwork .phase-col-num--soft { color: #B1B69C; }
.prog-afterwork .nav-social a { color: var(--c-primary); border-color: rgba(60, 81, 63, 0.40); }
.prog-afterwork .nav-social a:hover { background: var(--c-primary); border-color: var(--c-primary); }
.prog-afterwork .mobile-menu { background: var(--c-primary); }
.prog-afterwork .footer-col h4 { color: var(--c-primary-deep); }
.prog-afterwork .footer-social a:hover { background: var(--c-primary); border-color: var(--c-primary); }
.prog-afterwork .skip-link { background: var(--c-primary); }
/* vert clair : uniquement sur les petites touches (étoiles, stats, soleils) — jamais en fond */
.prog-afterwork .testi-stars span { color: #B4B99F; }
.prog-afterwork .pratique-v2-big { color: #B4B99F; }
/* photo de montagne : overlay quasi noir, à peine teinté de vert (pas de filtre de teinte visible) */
.prog-afterwork .prog-citation-photo::before { background: rgba(12, 18, 13, 0.55); }
/* le soleil du CTA doit rester visible sur le fond vert foncé */
.prog-afterwork .prog-final-cta img[src*="sun-green"] { filter: brightness(0) invert(1) sepia(0.3) saturate(2) brightness(1.05); }
/* bouton crème du CTA : au survol, se remplit d'un beige foncé chaud plutôt que du brun quasi noir */
.prog-afterwork .btn-cream::before { background: #6E6150; }

/* ---- prog-synergy : palette imposée (bleu #2F5360) — aucun orange/jaune résiduel ---- */
.prog-synergy .nav-social a { color: var(--c-primary); border-color: rgba(47, 83, 96, 0.40); }
.prog-synergy .nav-social a:hover { background: var(--c-primary); border-color: var(--c-primary); }
.prog-synergy .mobile-menu { background: var(--c-primary); }
.prog-synergy .footer-col h4 { color: var(--c-primary-deep); }
.prog-synergy .footer-social a:hover { background: var(--c-primary); border-color: var(--c-primary); }
.prog-synergy .skip-link { background: var(--c-primary); }
/* bleu clair : uniquement sur les petites touches (étoiles, stats) — jamais en fond */
.prog-synergy .testi-stars span { color: #8B9DAC; }
.prog-synergy .pratique-v2-big { color: #8B9DAC; }
/* numéros d'étape « doux » (01 et 06) en bleu clair de la charte */
.prog-synergy .phase-col-num--soft { color: #8B9DAC; }
/* photo de montagne : voile bleu marine assorti à la palette (plus le quasi-noir précédent) */
.prog-synergy .prog-citation-photo::before { background: rgba(24, 43, 58, 0.55); }
/* le symbole du CTA doit rester visible sur le fond bleu foncé */
.prog-synergy .prog-final-cta img[src*="symbol-blue"] { filter: brightness(0) invert(1) sepia(0.3) saturate(2) brightness(1.05); }

/* ---- prog-synergy : sun bullets bleus ---- */
.prog-synergy .promesse-list li::before,
.prog-synergy .repars-list li::before {
  filter: hue-rotate(200deg) saturate(0.75);
}