/* =====================================================================
   HORTORIUM · Une histoire qui se poursuit — une date à la fois
   L'arbre de la date active est posé sur le trait de crayon (le « sol »,
   racines dessous) ; d'une date à l'autre, il grandit. Flèches aux deux
   extrémités, clavier, glisser du doigt. Même rendu dans tous les formats.
   ===================================================================== */
.hx-hist{
  --white:#fff;
  --graphite:#3d3833;
  --graphite-2:#6e6760;
  --pencil:#7f786f;
  --f-display:"Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-body:"Poppins", "Helvetica Neue", Arial, sans-serif;
  --tree:clamp(120px, 17vw, 230px);     /* hauteur de l'arbre */
  position:relative;color:var(--graphite);font:300 15px/1.75 var(--f-body);
  -webkit-font-smoothing:antialiased;width:100%;max-width:1240px;margin:0 auto;
  padding:10px clamp(16px, 4vw, 60px) 20px;
}
.hx-hist *{box-sizing:border-box}
.hh-js .dipi_horizontal_timeline_d5:not(.hh-off){visibility:hidden}
.dipi_horizontal_timeline_d5.hh-done{display:none!important}

/* ---------- trait de crayon : le sol ---------- */
.hx-hist .trace{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.hx-hist .trace path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.45,.05,.25,1)}
.hx-hist .t-halo{stroke-width:4;opacity:.08}
.hx-hist .t-main{stroke-width:1.7;opacity:.9}
.hx-hist .t-second{stroke-width:.9;opacity:.45}
.hx-hist .grain{-webkit-mask-image:var(--hh-grain);mask-image:var(--hh-grain);-webkit-mask-size:96px 96px;mask-size:96px 96px}
.hx-hist.is-on .trace path{stroke-dashoffset:0}

/* ---------- l'arbre : un seul visible, il grandit d'une date à l'autre ---------- */
.hh-scene{position:relative;height:var(--tree);overflow:visible}
.hh-tree{position:absolute;left:50%;bottom:0;height:var(--tree);width:auto;max-width:none;margin:0;
  translate:-50% calc(var(--g, 0) * 100%);          /* pied sur le trait, racines dessous */
  transform-origin:50% 100%;transform:scale(.78);opacity:0;z-index:1;
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1), opacity .9s ease}
.hh-tree.is-active{transform:scale(1);opacity:1;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .15s, opacity 1.1s ease .15s}

/* ---------- flèches aux deux extrémités, à hauteur du sol ---------- */
.hh-prev,.hh-next{all:unset;position:absolute;bottom:14px;z-index:3;cursor:pointer;width:48px;height:44px;display:grid;place-items:center;color:var(--graphite);transition:opacity .3s}
.hh-prev{left:0}
.hh-next{right:0}
.hh-prev:disabled,.hh-next:disabled{opacity:.22;cursor:default}
.hh-prev:focus-visible,.hh-next:focus-visible{outline:1px solid var(--graphite-2);outline-offset:2px;border-radius:2px}
.hh-scene svg{width:34px;height:14px;overflow:visible}
.hh-scene button path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- la date active (les autres sont empilées, invisibles) ---------- */
.hh-stage{position:relative;display:grid;margin:28px auto 0;max-width:680px;text-align:center}
.hh-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(calc(var(--dir, 1) * 26px), 0, 0);
  transition:opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1), visibility 0s linear .6s}
.hh-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .9s ease .25s, transform 1.1s cubic-bezier(.16,1,.3,1) .25s, visibility 0s}
/* visuel de la date : logo léger ou photo avec ombre douce, au-dessus de l'année */
.hh-vis{margin:0 auto 22px;padding:0}
.hh-vis img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto}
.hh-vis.is-logo img{max-height:clamp(70px, 9vw, 110px)}
.hh-vis.is-photo img{max-height:clamp(200px, 26vw, 320px);border-radius:2px;box-shadow:0 26px 50px -30px rgba(61,56,51,.45)}
.hh-year{display:block;font:400 clamp(22px, 2.2vw, 30px)/1 var(--f-display);color:var(--graphite-2);font-variant-numeric:oldstyle-nums;letter-spacing:.02em;margin:0 0 12px}
.hx-hist h3{font:400 clamp(26px, 3vw, 38px)/1.12 var(--f-display);color:var(--graphite);margin:0 0 14px;padding:0;text-wrap:balance}
.hh-txt p{margin:0 0 .8em;padding:0}
.hh-txt p:last-child{margin-bottom:0}
.hh-count{margin-top:26px;text-align:center;font:400 15px/1 var(--f-display);color:var(--graphite-2);letter-spacing:.1em}

@media (max-width:600px){
  .hh-prev,.hh-next{bottom:8px;width:40px}
}

.hh-still .hx-hist .trace path,.hh-still .hh-tree,.hh-still .hh-panel{transition:none!important}