/* ABLOGUI — widget « Notre histoire » : frise qui défile (d'après L'Arche) */
.hi-tete { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.hi-confettis { position: absolute; left: clamp(220px, 30vw, 360px); top: -10px; width: min(420px, 40vw); height: auto; pointer-events: none; }
.hi-nav { display: flex; gap: 12px; position: relative; z-index: 1; }
.hi-rond { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ab-noir); border-radius: 50%; background: #fff; color: var(--ab-noir); transition: background .3s ease, color .3s ease, opacity .3s ease; }
.hi-rond:hover { background: var(--ab-noir); color: #fff; }
.hi-rond:disabled { opacity: .3; pointer-events: none; }
.hi-rond svg { width: 20px; height: 20px; }
.hi-rond--precedent svg { transform: rotate(180deg); }
.hi-section .hi-piste { display: flex; gap: 0; list-style: none; margin: 0 calc(-1 * var(--ab-gouttiere)); padding: 12px var(--ab-gouttiere) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ab-gouttiere); scrollbar-width: none; }
.hi-piste::-webkit-scrollbar { display: none; }
.hi-etape { position: relative; flex: 0 0 clamp(240px, 24vw, 300px); padding: 34px 32px 0 0; border-top: 3px dotted var(--ab-ligne-forte); scroll-snap-align: start; }
.hi-point { position: absolute; left: 0; top: -15px; width: 28px; height: 28px; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; background: var(--_c); }
.hi-annee { display: block; font-family: var(--ab-script); font-weight: 400; font-size: clamp(2.8rem, 2rem + 2vw, 3.8rem); line-height: 1; color: var(--_c); }
.hi-etape h3 { margin-top: 14px; font-size: var(--ab-fs-m); font-weight: 900; line-height: 1.3; }
.hi-etape p { margin-top: 10px; font-size: var(--ab-fs-s); line-height: 1.6; color: var(--ab-texte-doux); }
@media (max-width: 700px) { .hi-confettis { display: none; } .hi-etape { flex-basis: 78%; } }