body {
  /* Elegant layered background: subtle radial glow + deep directional gradient */
  background:
    radial-gradient(800px 400px at 8% 12%, rgba(58,142,199,0.10), transparent 8%),
    radial-gradient(600px 300px at 92% 78%, rgba(16,98,160,0.06), transparent 6%),
    linear-gradient(135deg, #071026 0%, #07162b 35%, #05263a 65%, #031225 100%);
  color: #e8eefc;
  min-height: 100vh;
  background-attachment: fixed;
}
/* Form / modern UI tweaks */
:root{ --muted:#9fb0d6; --card-bg:#0f1a2e; --input-bg:#ffffff; --input-color:#071227; --accent:#1e90ff; }
body, input, button, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.form-card { box-shadow: 0 10px 30px rgba(2,6,23,0.6); border-radius:12px; }
.form-label { color: var(--muted); }
.form-control { background: var(--input-bg); color: var(--input-color); border: 1px solid rgba(16,24,40,0.06); height:48px; padding:10px 12px; border-radius:8px; }
.form-control:focus { box-shadow: 0 6px 20px rgba(30,144,255,0.12); border-color: var(--accent); outline: none; }
.form-control::placeholder { color: #9aa9c7; }
.btn-primary { background: linear-gradient(180deg,#227bff,#0b63d6); border: none; box-shadow: 0 8px 24px rgba(11,99,214,0.28); }
.small.text-muted { color: rgba(255,255,255,0.55); }

.card { background:#0f1a2e; border:1px solid rgba(255,255,255,.08); }
a { color:#8ab4ff; }

.timeline-wrap { margin-top:16px; }
.timeline-years {
  position: relative;
  height: 46px;
  font-size:12px; opacity:.95; margin-bottom:12px;
}
.timeline-years::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}
.timeline-now {
  position: absolute;
  top: 0px;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(120,255,190,0.9), rgba(46,200,120,0.8));
  box-shadow: 0 0 12px rgba(70,255,170,0.35);
  z-index: 2;
  pointer-events: none;
}
.timeline-now::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #7bffbe;
  box-shadow: 0 0 10px rgba(120,255,190,0.6);
}
.year-tick { position:absolute; top:0; text-align:center; transform: translateX(-50%); }
.year-tick.first { transform: translateX(0); text-align:left; }
.year-tick.last { transform: translateX(-100%); text-align:right; }
.year-tick .dot{
  width:22px;height:22px;border-radius:999px;
  border:2px solid rgba(255,255,255,.4);
  display:inline-flex; align-items:center; justify-content:center;
  background:#0b1220; color:#ffffff; font-weight:700; font-size:11px;
}
.year-tick .dot { position: relative; z-index: 2; }
.year-tick .label { margin-top:6px; opacity:1; color:#ffffff; font-weight:700; }
.year-tick.past .dot {
  border-color: rgba(46,200,120,0.9);
  color: #b7ffd9;
  box-shadow: 0 0 12px rgba(70,255,170,0.25);
}
.year-tick.past .label { color: rgba(170,255,210,0.95); }

.timeline-rail { display:flex; flex-direction:column; gap:18px; }

.tl-obligation-group {
  border-left:3px solid rgba(255,255,255,.15); padding-left:16px;
}

.tl-obligation-title {
  font-weight:800; font-size:14px; margin-bottom:8px; color:rgba(255,255,255,0.96); text-transform:uppercase; letter-spacing:0.5px;
}

.tl-row { display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.tl-row-title-small { width:200px; font-size:13px; color:rgba(255,255,255,0.95); font-weight:600; padding-left:6px; }
.cert-card .cert-label strong { color:#ffffff; font-size:1rem; }
.cert-card .cert-date { color:rgba(255,255,255,0.92); font-weight:700; }
.cert-card { border-radius:8px; padding:10px; }
.cert-num { color:rgba(255,255,255,0.75); font-weight:500; }
.tl-row-rail { position:relative; flex:1; height:62px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); overflow:visible; }

/* stronger visible center line for timeline rails */
.tl-row-rail::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  z-index: 2;
  border-radius: 2px;
}

.tl-window {
  position:absolute; top:4px; bottom:4px; border-radius:14px; padding:6px 8px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(2,6,23,0.36), rgba(11,18,32,0.28));
  border: 2px solid rgba(150,201,61,0.85);
  box-shadow: 0 6px 18px rgba(2,6,23,0.55);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
  backdrop-filter: blur(6px);
  will-change: transform;
  overflow: visible;
  z-index: 10;
}
.tl-window:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(2,6,23,0.7); z-index:40; }
.tl-window .pill{
  background:transparent; border:none; padding:2px 4px; margin:0; color:#fff;
  font-weight:800; font-size:0.82rem; box-shadow:none; border-radius:4px; display:inline-block;
  white-space:normal; overflow:visible; word-break:break-word; line-height:1.15; text-align:center;
}
.tl-window .pill[title]{ cursor:help; }
.tl-window .pill::after{ display:none; }

/* Instant tooltip on hover (no latency) */
.tl-window[data-tooltip] { position: absolute; }
.tl-window[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  background: rgba(8, 16, 32, 0.96);
  color: #eaf2ff;
  font-size: 0.78rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity .08s ease;
}
.tl-window[data-tooltip]::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(8, 16, 32, 0.96);
  opacity: 0;
  transition: opacity .08s ease;
  z-index: 49;
}
.tl-window[data-tooltip]:hover::after,
.tl-window[data-tooltip]:hover::before {
  opacity: 1;
}

.tl-milestone{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:999px; background:#ff6464; box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.tl-milestone { z-index: 12; }

/* ensure movements/hovers remain above the center line */
.tl-window:hover { z-index: 40; }

/* reduce pill font-size on very small widths to help fit */
@media (max-width:520px) {
  .tl-window .pill { font-size:0.85rem; padding:3px 6px; }
  .tl-row-rail::before { left:6px; right:6px; }
}

.tl-info{
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.15);
  font-size:13px; opacity:.9;
}

.tl-window.status-past {
  border-color: rgba(126,211,122,0.95);
  background: linear-gradient(180deg, rgba(126,211,122,0.20), rgba(126,211,122,0.10));
}
.tl-window.status-current {
  border-color: rgba(255,184,108,0.95);
  background: linear-gradient(180deg, rgba(255,184,108,0.20), rgba(255,184,108,0.10));
}
.tl-window.status-future {
  border-color: rgba(255,125,125,0.95);
  background: linear-gradient(180deg, rgba(255,125,125,0.20), rgba(255,125,125,0.10));
}

/* Responsive: stack titles on small screens */
@media (max-width:800px) {
  .tl-row { flex-direction:column; align-items:flex-start; }
  .tl-row-title-small { width:100%; padding-left:0; margin-bottom:6px; }
  .timeline-years { display:none; }
}

/* Mobile responsive: masquer timeline graphique, afficher liste */
.timeline-mobile-list { display: none; }

@media (max-width: 768px) {
  /* Masquer la version desktop */
  .timeline-years,
  .timeline-rail {
    display: none !important;
  }

  /* Afficher la version mobile liste */
  .timeline-mobile-list {
    display: block;
    padding: 12px 0;
  }

  .mobile-obligation-section {
    margin-bottom: 24px;
  }

  .mobile-obligation-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.95);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(255,255,255,0.15);
  }

  .mobile-obligation-item {
    background: linear-gradient(135deg, rgba(2,6,23,0.45), rgba(11,18,32,0.35));
    border-left: 4px solid rgba(150,201,61,0.85);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(2,6,23,0.35);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .mobile-obligation-item:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(2,6,23,0.45);
  }

  .mobile-obligation-item.status-past {
    border-left-color: rgba(126,211,122,0.90);
    background: linear-gradient(135deg, rgba(126,211,122,0.20), rgba(126,211,122,0.10));
  }

  .mobile-obligation-item.status-current {
    border-left-color: rgba(255,184,108,0.90);
    background: linear-gradient(135deg, rgba(255,184,108,0.20), rgba(255,184,108,0.10));
  }

  .mobile-obligation-item.status-future {
    border-left-color: rgba(255,125,125,0.90);
    background: linear-gradient(135deg, rgba(255,125,125,0.20), rgba(255,125,125,0.10));
  }

  .mobile-item-header {
    margin-bottom: 8px;
  }

  .mobile-item-pill {
    display: inline-block;
    font-weight: 800;
    font-size: 0.9rem;
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
  }

  .mobile-item-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.82);
    font-weight: 600;
  }

  .mobile-date-from,
  .mobile-date-to {
    background: rgba(255,255,255,0.05);
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
  }

  .mobile-date-separator {
    color: rgba(255,255,255,0.5);
    font-weight: 700;
  }
}

/* Subtle vertical grid lines per year */
.timeline-rail { position:relative; }
.timeline-rail::before {
  content:''; position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: calc(100%/7) 100%; opacity:0.6;
}

/* Accordion headers: subtle gradient, rounded, hover/active effects */
.accordion .accordion-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  border: none;
  color: #e8eefc;
  box-shadow: 0 8px 20px rgba(2,6,23,0.45);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  display:flex; align-items:center; gap:12px;
}
.accordion .accordion-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.58);
}
.accordion .accordion-button.collapsed { opacity: 0.98; }
.accordion .accordion-button:not(.collapsed),
.accordion .accordion-button[aria-expanded="true"] {
  background: linear-gradient(90deg, rgba(150,201,61,0.14), rgba(56,35,126,0.14));
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(2,6,23,0.72);
  border-left: 4px solid rgba(150,201,61,0.95);
  color: #f5fbff;
}

/* Create a continuous background block behind the opened header and its collapse content */
.accordion .accordion-button {
  position: relative; /* for the pseudo-element */
  z-index: 3; /* ensure button content sits above the background layer */
}
.accordion .accordion-button[aria-expanded="true"]::before {
  content: none;
  position: absolute;
  left: -8px;
  right: -8px;
  top: -6px;
  bottom: -14px; /* extend under the collapse card */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,0.45);
  z-index: 1;
  pointer-events: none;
}

/* ensure the collapse card sits above the pseudo-element but below the button text */
.accordion-collapse .card { position: relative; z-index: 2; }
.accordion .accordion-button:focus { box-shadow: none; outline: none; }

/* Ensure header inner content spans and aligns */
.accordion .accordion-button .w-100 { display:flex; align-items:center; justify-content:space-between; }

/* Slightly round the inside collapse card to match headers */
.accordion-collapse .card { border-radius: 12px; padding: 14px; margin-top: 8px; }
/* Slightly lighten the inner card when the collapse is shown to visually separate it */
.accordion-collapse.show .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
}

/* Highlight the name line inside the opened accordion header */
.accordion .accordion-button:not(.collapsed) .w-100 > div:first-child strong {
  color: #ffffff; /* brighter */
  font-size: 1.06rem;
  letter-spacing: 0.2px;
}
.accordion .accordion-button:not(.collapsed) .w-100 > div:first-child {
  color: rgba(255,255,255,0.95);
}
.accordion .accordion-button:not(.collapsed) .w-100 > div:last-child .fw-bold {
  color: #bfe9ff; /* accent for cert number */
}
.accordion .accordion-button:not(.collapsed) .w-100 > div:last-child .small {
  color: rgba(255,255,255,0.72);
}

/* subtle transition for the inner text color change */
.accordion .accordion-button .w-100 > div { transition: color .12s ease, transform .12s ease; }

/* Edit button in header */
.btn-edit {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #a7d74f, #96c93d);
  color: #13083e;
  font-weight: 700;
  text-decoration: none;
  border: none;
  box-shadow: 0 8px 20px rgba(150,201,61,0.30);
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
}
.btn-edit:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(150,201,61,0.40); opacity: 0.98; }
.btn-edit:active { transform: translateY(-1px); }

@media (max-width:600px) {
  .btn-edit { padding: 6px 8px; font-size: 0.85rem; }
}