/* Styles - Fresque Historique (fresque+ arrows) */
:root{
  --fhn-yellow:#FFCE4C;
  --fhn-teal:#00666C;
  --fhn-bg:#eaf4f4;
  --fhn-card:#ffffff;
  --fhn-ink:#0f2f31;
}

.fhn-wrap{
  background: radial-gradient(1200px 400px at 50% -20%, rgba(255,206,76,.12), transparent 60%) var(--fhn-bg);
  padding: 56px 18px;
  border-radius: 18px;
}

.fhn-timeline{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding:10px 0 30px;
}

/* Central axis + ticks */
.fhn-timeline:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;bottom:0;
  width:3px;
  background: linear-gradient(to bottom, var(--fhn-teal) 18px, transparent 18px) repeat-y;
  background-size: 3px 36px;
  transform:translateX(-50%);
  opacity:.95;
}
/* Direction arrow at the bottom */
.fhn-axis-arrow{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:16px solid var(--fhn-teal);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}

.fhn-item{ width:50%; position:relative; padding:14px 24px; box-sizing:border-box; }
.fhn-item--left{ float:left; clear:left; text-align:right; }
.fhn-item--right{ float:right; clear:right; text-align:left; }

.fhn-card{
  position:relative;
  display:inline-block;
  background:var(--fhn-card);
  padding:22px 24px;
  border-radius:18px;
  box-shadow:
    0 10px 25px rgba(0,0,0,.07),
    0 1px 0 rgba(255,255,255,.6) inset;
  min-width: min(520px, 92%);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fhn-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

/* Arrow connectors from card to the axis */
.fhn-item--left .fhn-card{ margin-right:42px; }
.fhn-item--right .fhn-card{ margin-left:42px; }

.fhn-item--left .fhn-card:after,
.fhn-item--right .fhn-card:after{
  content:"";
  position:absolute; top:calc(50% - 9px);
  width:0;height:0;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
/* right-pointing arrow (card on left) */
.fhn-item--left .fhn-card:after{
  right:-16px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:16px solid var(--fhn-card);
  filter: drop-shadow(-1px 0 0 rgba(0,102,108,.25));
}
/* left-pointing arrow (card on right) */
.fhn-item--right .fhn-card:after{
  left:-16px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-right:16px solid var(--fhn-card);
  filter: drop-shadow(1px 0 0 rgba(0,102,108,.25));
}

/* Node */
.fhn-node{
  position:absolute; top:calc(50% - 9px);
  width:18px;height:18px;
  border:4px solid var(--fhn-yellow);
  background:#fff;border-radius:50%;
  animation: fhnPulse 2.6s infinite;
}
.fhn-item--left .fhn-node{ right:-51px; }
.fhn-item--right .fhn-node{ left:-51px; }

@keyframes fhnPulse {
  0%   { box-shadow:0 0 0 0 rgba(255,206,76,.6); }
  70%  { box-shadow:0 0 0 12px rgba(255,206,76,0); }
  100% { box-shadow:0 0 0 0 rgba(255,206,76,0); }
}

.fhn-item-title{ color:var(--fhn-teal); margin:0 0 6px; font-size: clamp(16px, 2.5vw, 20px); letter-spacing:.3px; }
.fhn-chip{
  display:inline-block;
  background:rgba(255,206,76,.15);
  color:#6f5200;
  border:1px solid rgba(255,206,76,.5);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  margin:0 0 10px;
}
.fhn-item-content{ color:var(--fhn-ink); font-size:15px; line-height:1.55; }

.fhn-date-only{
  font-weight:800; color:#073c3f;
  font-size: clamp(18px,3vw,20px);
  letter-spacing:.3px;
}

/* Responsive */
@media (max-width: 900px){
  .fhn-item, .fhn-item--left, .fhn-item--right{ float:none; width:100%; text-align:left; }
  .fhn-item .fhn-card{ min-width: auto; display:block; margin:0 0 30px !important; }
  .fhn-timeline:before{ left:24px; transform:none; }
  .fhn-axis-arrow{ left:24px; transform:none; }
  .fhn-node{ left:-34px !important; right:auto !important; }
}