@import url("home.css") layer;

/* Le gradient soft du hero s'étend sur tout le wrapper main (hero + section cards).
   Hero et section deviennent transparents pour laisser passer le fond global.
   Variante vision : 2 blooms mist en haut (gauche + droite) + 1 bloom accent en bas. */
.page-vision {
  background:
    radial-gradient(ellipse 55% 40% at 0% 0%, var(--color-mist-2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 38% at 100% 0%, var(--color-mist-1) 0%, transparent 65%),
    radial-gradient(ellipse 80% 55% at 50% 110%, var(--color-accent-soft) 0%, transparent 70%),
    var(--color-paper);
}

.page-vision .page-hero {
  background: transparent;
  border-bottom: 0;
}

.page-vision .page-hero__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.page-vision > .section {
  background: transparent;
  padding-block: var(--space-l) var(--space-2xl);
}

.page-vision .page-hero--compact {
  padding-bottom: var(--space-l);
}

/* Pas d'effet reveal au scroll sur cette page : tout est immédiatement visible */
.page-vision .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============================================
   Vision pillars : 4 cards en grille décalée, style éditorial.
   Inspiration : BPC group cards, palette adaptée GS (navy / accent).
   ============================================ */
.vision-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.vision-card {
  position: relative;
  padding: var(--space-l) var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-l);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(233, 117, 36, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-stone-2);
  overflow: hidden;
  transition: translate 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vision-card:hover {
  translate: 0 -4px;
  box-shadow: 0 14px 36px rgba(14, 31, 51, 0.18);
}

.vision-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  color: var(--color-paper);
  margin-bottom: var(--space-l);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 320ms var(--ease);
}

.vision-card:hover .vision-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

.vision-card__icon svg {
  width: 100%;
  height: 100%;
}

.vision-card__title {
  color: var(--color-paper);
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-m);
  max-width: 22ch;
  font-weight: 500;
}

.vision-card__desc {
  color: var(--color-stone-2);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0;
}

@media (min-width: 1024px) {
  .vision-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  /* Décalage asymétrique style BPC : colonne droite décalée vers le bas */
  .vision-card:nth-child(2),
  .vision-card:nth-child(4) {
    margin-top: var(--space-3xl);
  }

  .vision-card {
    padding: var(--space-xl) var(--space-2xl) var(--space-3xl);
  }
}

/* Variation : commitments avec numéro géant à gauche, texte serré à droite. */
.commitments {
  list-style: none;
  padding: 0;
  margin: 0;
}

.commitment {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  padding-block: var(--space-l) 0;
  align-items: start;
}

.commitment__num {
  font-family: var(--font-sans);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  line-height: 0.9;
  color: var(--color-accent);
  letter-spacing: -0.05em;
  font-weight: 500;
}

.commitment__title {
  font-size: var(--step-3);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
  font-weight: 500;
  max-width: 22ch;
}

.commitment__body p {
  color: var(--color-stone-4);
  max-width: 56ch;
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .commitment {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-3xl);
    padding-block: var(--space-xl) 0;
  }
}

/* Boiler plate (5 paragraphes officiels GS) */
.boiler {
  max-width: 75ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.boiler p {
  font-size: var(--step-1);
  color: var(--color-stone-4);
  line-height: 1.55;
  max-width: none;
}

.boiler strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Role list partagée avec who-we-are */
.role-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
  border-top: 1px solid var(--color-line);
}

.role-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-line);
}

.role-list strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.role-list span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-stone-3);
}

@media (min-width: 720px) {
  .role-list li {
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
  }
}