/* © Camarade Agency (camarade.agency) */
/* ========================================================================== */
/* Timeline frise - front office styles (horizontal layout, column stacking)											                        */
/* ========================================================================== */
.timeline-wrapper {
  scroll-margin-top: calc(var(--header-height-shrink, 50px) + 20px);
  display: flex;
  flex-direction: column;
  gap:0;
}
/* ========================================================================== */
/* Toolbar: zoom + thema toggles
/* ========================================================================== */
.timeline-toolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
  margin-bottom:15px
}
.timeline-zoom-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: bold;
}
.timeline-zoom {
  width: 160px;
  height: 16px;
  margin: 0;
  padding:20px !important;
  border: none;
  box-sizing: border-box;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* Thumb (button) - one rule set per browser engine, same look each time.
   Chrome/Safari don't auto-center the thumb on the track once appearance
   is reset, so margin-top pulls it up by half the height difference
   (4px track, 16px thumb -> -6px) to align it vertically. */
.timeline-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--e-global-color-primary);
  cursor: pointer;
}
.timeline-zoom::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--e-global-color-primary);
  cursor: pointer;
}
/* Track: the gradient fill lives here (not on the input itself), height
   locked to 4px so it never inherits the input's 16px box height */
.timeline-zoom::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--e-global-color-primary) 0%,
    var(--e-global-color-primary) var(--tl-zoom-fill, 0%),
    #C8D5DC var(--tl-zoom-fill, 0%),
    #C8D5DC 100%);
}
.timeline-zoom::-moz-range-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #C8D5DC;
}
/* Firefox draws its own progress segment - keep it in sync with the fill */
.timeline-zoom::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--e-global-color-primary);
}
.timeline-toggles {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  list-style:none;
  margin:0;
  padding:0;
}
.timeline-toggle-thema {
  display: flex;
  align-items: center;
  gap:0;
  border-radius:4px;
  overflow:hidden;
  background-color:#000;
  border:1px solid #000;
  color:#FFF;
  transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.timeline-toggle-thema.tl-active-thema {
  border-color:var(--e-global-color-primary);
  background-color:var(--e-global-color-primary);
}
.timeline-toggle-thema button {
  padding:7.5px 15px;
  cursor: pointer;
  color:#FFF;
  border:none;
  background:none;
}
/* [timeline_thema] shortcode : "voir tout" link replacing the toggles list,
   same pill look as .timeline-toggle-thema (an <a>, not a <button>, so its
   own padding/underline-reset) */
.timeline-toggle-thema.timeline-see-all {
  padding:7.5px 15px;
  gap:10px;
  text-decoration:none;
  background: #fff;
  color:var(--e-global-color-text);
  border-color:#C8D5DC;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-weight: bold;
}
.timeline-toggle-thema.timeline-see-all:hover {
  border-color:var(--e-global-color-primary);
  box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
}
button.timeline-toggle-visibility {
  border-left:1px solid #FFF;
}
.timeline-toggle-thema:hover {
  box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.2);
}
.timeline-toggle-thema.tl-active-thema:hover {
  box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
}
/* switch eye icon: reflects the <li>'s shown/hidden state */
.timeline-toggle-thema .fa-eye-slash { display:inline-flex }
.timeline-toggle-thema .fa-eye { display:none }
.timeline-toggle-thema.tl-shown .fa-eye-slash { display:none }
.timeline-toggle-thema.tl-shown .fa-eye { display:inline-flex }
/* Visibility disabled while this thema is the active one: impossible to hide it */
.timeline-toggle-thema.tl-active-thema button.timeline-toggle-visibility {
  cursor:not-allowed;
  display:none;
}
/* ========================================================================== */
/* Nav: horizontal scroll, drag-to-scroll
/* ========================================================================== */
.timeline-nav {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  border-bottom:1px solid #C8D5DC;
  cursor: grab;
  user-select: none;
}
/* Hide the scrollbar (scroll is still fully functional, just visually clean) */
.timeline-nav {
  scrollbar-width: none;
}
.timeline-nav::-webkit-scrollbar {
  display: none;
}
.timeline-nav.tl-dragging {
  cursor: grabbing;
}
.timeline-track {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* ========================================================================== */
/* Year axis: sticky at the top of the track, ticks + centered labels
/* ========================================================================== */
.timeline-axis {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 30px;
  flex: 0 0 auto;
  border-bottom: 1px solid #C8D5DC;
}
.timeline-axis-tick {
  position: absolute;
  height: 5px;
  width: 1px;
  background: #C8D5DC;
  top: 25px;
}
.timeline-axis-label {
  position: absolute;
  color: #666;
  white-space: nowrap;
  top: 5px;
  transform: translateX(-50%); /* centers the label exactly on its tick */
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: 10px;
  font-weight: normal;
}
/* ========================================================================== */
/* Lanes: one row per thema
/* ========================================================================== */
.timeline-lanes {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.timeline-lane {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #eee;
  flex: 1 1 0;
  min-height:65px; /* room for: label, pin marker, gap, and the bar itself */
  overflow: hidden;
  transition: flex-grow .3s ease, min-height .3s ease, max-height .3s ease, opacity .3s ease;
}
.timeline-lane-bars {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}
/* ========================================================================== */
/* Bars: horizontal, thin, positioned/sized in JS via left/width
/* ========================================================================== */
.timeline-bar {
  position: absolute;
  bottom:15px; /* pushed down, no longer vertically centered */
  height:10px;
  cursor:pointer;
  overflow:visible; /* the label sits outside the bar itself */
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  z-index: 1;
  outline:1px solid #fff;
  border:1px solid #C8D5DC;
  background-color:#C8D5DC;
}
.timeline-bar.tl-active,
.timeline-bar:hover {
  outline:none;
  border-color:var(--e-global-color-primary);
  background-color:var(--e-global-color-primary);
  box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
  z-index:2;
}
/* ========================================================================== */
/* Key dates: pin marker, now a sibling of the bar (not nested inside it)
   so hovering it never also triggers the bar's own tooltip. Sits 10px above
   the bar, positioned independently via its own year (see timeline.js).
/* ========================================================================== */
.timeline-marker {
  position: absolute;
  top:15px;
  left: 0;
  margin-left:-6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  pointer-events: auto;
  font-size:16px;
  line-height:1;
  transition: transform .15s ease, filter .15s ease, color .15s ease;
}
.timeline-marker:hover  {
  transform: scale(1.25);
  filter: brightness(1.1);
}
.timeline-marker.tl-active i {
  color:var(--e-global-color-primary);
  border-radius:50%;
  animation: tl-marker-halo 1.6s ease-out infinite;
}
@keyframes tl-marker-halo {
  0%   { box-shadow: 0 0 0 0 rgba(229,57,53,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
}
.timeline-marker i {
  color: var(--e-global-color-primary);
}
/* ========================================================================== */
/* Tooltip: JS-positioned, appended to <body> so it's never clipped by
   .timeline-nav's overflow. Anchored above the marker by default.
   Single white style, shared by both marker (key date) and bar (period)
   tooltips.
/* ========================================================================== */
.timeline-tooltip {
  position: absolute;
  z-index: 999999;
  display: none;
  background: #fff;
  border: 1px solid #C8D5DC;
  color: #000;
  pointer-events: none;
  padding:0;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
}
.timeline-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(var(--tl-arrow-x, 8px) - 7.41421356px);
  border: 7.41421356px solid transparent;
  border-top-color: #C8D5DC;
}
.timeline-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(var(--tl-arrow-x, 8px) - 6px);
  border: 6px solid transparent;
  border-top-color: #fff;
}
/* Flipped below the marker: arrow moves to the top of the box, pointing up */
.timeline-tooltip.tl-tooltip-flip-y::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #C8D5DC;
}
.timeline-tooltip.tl-tooltip-flip-y::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #fff;
}
/* Meta line shown above the date/label row (thema name) */
.timeline-tooltip-meta {
  text-transform:uppercase;
  font-weight:bold;
  padding:10px;
  border-bottom:1px solid #C8D5DC;
  font-size:12px;
  line-height:1;
}
.timeline-tooltip-date {
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.timeline-tooltip-date .label {
  font-size:14px;
  line-height:1;
}
/* Hidden lane when toggled off (thema) */
.timeline-lane.tl-hidden {
  flex-grow:0;
  min-height:0;
  max-height:0;
  opacity:0;
  pointer-events:none;
  border-bottom:none;
}
/* ========================================================================== */
/* Content panel
/* ========================================================================== */
.timeline-content {
  border:1px solid #C8D5DC;
  border-top:none;
  border-radius:0 0 6px 6px;
  padding:1.5rem;
  display: flex;
  flex-direction: column;
  gap:1.5rem;
}
h3.timeline-content-title {
  display:flex;
  align-items:center;
  gap:20px;
  margin:0;
  font-size:1.4em;
}
.timeline-content-inner > * { margin-block-end:1em !important; }
.timeline-content-inner > :last-child { margin-bottom:0; margin-block-end:0 !important; }
/* ========================================================================== */
/* Content Header + nav
/* ========================================================================== */
h2.timeline-content-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  line-height: normal;
  margin: 0 -1.5rem;
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-bottom: 1px solid #C8D5DC;
}
.timeline-content-nav {
  display: flex;
  align-items: center;
  gap:8px;
  flex-shrink:0;
}
.timeline-content-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width:32px;
  height:32px;
  border:1px solid #C8D5DC;
  border-radius:50%;
  background:#fff;
  color:#000;
  cursor:pointer;
  padding:0;
  transition: color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.timeline-content-nav button:hover:not(:disabled) {
  box-shadow: 0px 0px 0px 5px color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
  border-color:var(--e-global-color-primary);
  color:var(--e-global-color-primary);
}
.timeline-content-nav button:disabled {
  opacity:.35;
  cursor:default;
}
/* ========================================================================== */
/* Content Dates
/* ========================================================================== */
.timeline-content-dates {
  display: flex;
  flex-direction: column;
  gap:1.5rem;
}
.timeline-content-dates h4 {
  margin:0;
  font-size:1.2em;
  font-weight:900;
}
.timeline-content-dates ul {
  margin:0;
  padding:0;
  gap:5px;
  display: flex;
  flex-direction: column;
}
.timeline-content-dates ul li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size:1em;
  cursor: pointer;
}
/* ========================================================================== */
/* Date badge
/* ========================================================================== */
.timeline-date-badge {
  display: inline-flex;
  align-items: stretch;
  font-weight: bold;
  font-size: 0.85em;
  white-space: nowrap;
  vertical-align: middle;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  line-height:normal;
}
.tl-date-single,
.tl-date-start,
.tl-date-end {
  color:#fff;
  padding:10px 20px;
  text-align: center;
  position:relative;
  line-height:1;
}
.tl-date-single, .tl-date-single::after { background: #000; }
.tl-date-start, .tl-date-start::after   { background: #000; }
.tl-date-end, .tl-date-end::after       { background: var(--e-global-color-primary); }
.tl-date-single::after,
.tl-date-start::after,
.tl-date-end::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -7.5px;
  transform: translateY(-50%) rotate(45deg);
  width: 15px;
  height: 15px;
  z-index: 1;
}
/* in tooltip */
.timeline-tooltip .tl-date-single,
.timeline-tooltip .tl-date-start,
.timeline-tooltip .tl-date-end {
  padding:4px 8px;
}
.timeline-tooltip .tl-date-single::after,
.timeline-tooltip .tl-date-start::after,
.timeline-tooltip .tl-date-end::after {
  right:-3px;
  width:6px;
  height:6px;
}
/* in list */
.timeline-content-dates .tl-date-single,
.timeline-content-dates .tl-date-start,
.timeline-content-dates .tl-date-end {
  padding:6px 12px;
  min-width:50px;
}
.timeline-content-dates .tl-date-single::after,
.timeline-content-dates .tl-date-start::after,
.timeline-content-dates .tl-date-end::after {
  right: -6px;
  width: 12px;
  height: 12px;
}
/* active badge in list */
.timeline-content-dates li.tl-active .timeline-date-badge {
  border-radius:3px;
  animation: tl-marker-halo 1.6s ease-out infinite;
}
.timeline-content-dates li.tl-active .tl-date-single,
.timeline-content-dates li.tl-active .tl-date-single::after {
  background: var(--e-global-color-primary);
}
/* ========================================================================== */
/* Responsive
/* ========================================================================== */
@media (max-width:767px) {
  .timeline-zoom-label,
  .timeline-zoom,
  .timeline-toolbar         { width:100% }
  .timeline-toggles         { gap:10px; margin-bottom:0 }
  .timeline-zoom-label,
  .timeline-toggle-thema    { width: 100% }
  .timeline-toggle-browse   { flex:1; text-align:left }
  .timeline-content-title,
  .timeline-content-header  { flex-direction:column; text-align:center }
}