.blockquote {

  /*! border-left: 3px solid #2250fc; */
  /* border-left: 3px solid #B42E5E; */
  font-size: 1rem;
  /* padding: 10px 20px;
  margin: 0 0 20px; */
}

/* ---------- Section minimal UI ---------- */

.section-hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
}

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.scroll-x > * { scroll-snap-align: start; }
.scroll-snap { scroll-snap-type: x mandatory; }

.section-title {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.4rem, 3.3vw, 2rem);
}

.section-subtitle { color: #6b7280; }

/* Masonry fallback (CSS columns) – optional for showMode 12 */
.masonry {
  column-gap: 1rem;
  column-count: 1;
}

/* ===== Timeline (Section 6) — version nette & centrée ===== */
.timeline-2col{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 2 colonnes (≥ md) */
  column-gap: 2.5rem;                 /* un peu plus d'air */
  row-gap: 2rem;                      /* espace vertical entre items */
  margin-top: .5rem;
  isolation: isolate;
}

/* Axe vertical au centre du conteneur */
.timeline-axis{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-1px);        /* centre parfait (ligne de 2px) */
  width: 2px;
  background: rgba(13,110,253,.45);   /* bleu bootstrap + opacité */
  z-index: 0;
  pointer-events: none;
}

.timeline-item{ position: relative; z-index: 1; }
.timeline-item.left  { grid-column: 1; padding-right: 1.25rem; }
.timeline-item.right { grid-column: 2; padding-left:  1.25rem; }

/* Pastille sur l'axe, centrée verticalement sur l'item */
.timeline-dot{
  position: absolute;
  top: 50%;                           /* ← au milieu de l'item (donc au milieu de la carte) */
  left: 50%;                          /* ← sur l'axe */
  transform: translate(-50%, -50%);
  width: .75rem; height: .75rem;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
  z-index: 1;
}

/* (Optionnel) petit connecteur entre l’axe et la carte */
.timeline-dot::after{
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 18px;                        /* longueur du trait horizontal */
  background: rgba(13,110,253,.35);
  transform: translateY(-50%);
}
.timeline-item.left  .timeline-dot::after { left: 50%; }        /* vers la carte à gauche */
.timeline-item.right .timeline-dot::after { right: 50%; }       /* vers la carte à droite */

.timeline-content{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .75rem .75rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
}

/* Mobile : 1 colonne, axe à gauche */
@media (max-width: 767.98px){
  .timeline-2col{ grid-template-columns: 1fr; }
  .timeline-axis{ left: 12px; transform: none; }
  .timeline-item.left,
  .timeline-item.right{
    grid-column: 1;
    padding-left: 1.75rem;            /* espace pour l’axe à gauche */
    padding-right: 0;
  }
  .timeline-dot{
    left: 12px;
    transform: translateY(-50%);      /* seulement vertical en mobile */
  }
  .timeline-dot::after{
    display: none;                     /* connecteur moins utile en mobile */
  }
}


/* ===== Sections d’un pilier ===== */
.pillar-sections { --gap-y: 2.5rem; --pillar-border: var(--pillar-secondary, #6c757d);  --kf-text-min-h: 2.5rem; }
.project-sections { --gap-y: 2.5rem; --project-border: var( #6c757d);  --kf-text-min-h: 2.5rem; }
.pillar-section {
  margin-block: var(--gap-y);
  padding: 0.0rem;
  border: 2px solid var(--pillar-border);
  border-radius: .75rem;
  background: #fff;
}

.project-section {
  margin-block: var(--gap-y);
  padding: 0.0rem;
  border: 2px solid #6c757d;
  border-radius: .75rem;
  background: #fff;
}







/* Dark mode (option) */
@media (prefers-color-scheme: dark){
  .timeline-content{ background: #0b1220; border-color: #1f2937; box-shadow: none; }
}


@media (min-width: 768px) { .masonry { column-count: 2; } }
@media (min-width: 1200px) { .masonry { column-count: 3; } }

.masonry .masonry-item { break-inside: avoid; margin-bottom: 1rem; }

@media (prefers-color-scheme: dark) {
  .section-subtitle { color: #9ca3af; }
}


/* Étire les colonnes à la même hauteur, compatible Bootstrap 4/5 */
.row-eq { align-items: stretch !important; }
.row-eq > [class*="col-"] { display: flex; }

/* Bloc image en background-cover, hauteur pilotée par la colonne */
.media-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Vidéo en cover, hauteur pilotée par la colonne */
.media-wrap { width: 100%; height: 100%; background: #000; }
.media-fill { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile : on évite les colonnes étirées et on redonne un ratio agréable */
@media (max-width: 991.98px) { /* < lg */
  .row-eq { align-items: center !important; } /* facultatif */
  .media-bg,
  .media-wrap { height: auto; aspect-ratio: 16 / 9; }
}