/* =========================================================
   Section « Notre histoire » — frise chronologique
   Mise en forme reprise depuis Documents/Test de section/goat-histoire.
   Tout est préfixé .gh pour ne rien casser dans le reste du site.
   ========================================================= */
.gh{
  --gh-bg:#111111;
  --gh-surface:#1A1A1A;
  --gh-ink:#F4F4F0;
  --gh-dim:#A6A6A1;          /* 7,9:1 sur le fond */
  --gh-yellow:#F5C518;
  --gh-line:rgba(244,244,240,.12);
  --gh-wrap:1240px;
  --gh-pad:20px;
  --gh-ease:cubic-bezier(.22,1,.36,1);

  position:relative;
  overflow:clip;                 /* clip, pas hidden : hidden casserait position:sticky */
  background:var(--gh-bg);
  color:var(--gh-ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-stretch:112%;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.gh *,.gh *::before,.gh *::after{box-sizing:border-box}
/* :where() garde cette remise à zéro peu prioritaire : les marges et retraits
   définis plus bas (titres, textes, frise) s'appliquent bien. */
.gh :where(p,h2,h3,ol){margin:0;padding:0}
.gh :focus-visible{outline:2px solid var(--gh-yellow);outline-offset:4px;border-radius:4px}

/* grain de pellicule, comme sur le visuel de référence */
.gh__grain{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gh__wrap{position:relative;z-index:1;max-width:var(--gh-wrap);margin:0 auto;padding:0 var(--gh-pad)}

/* --------------------------------------------------------------- INTRO */
.gh-intro{display:grid;gap:36px;padding-block:72px 56px}
.gh-eyebrow{
  font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gh-yellow);
}
.gh-title{
  margin-top:22px;font-size:clamp(34px,4.4vw,60px);line-height:.98;
  font-weight:800;font-stretch:125%;letter-spacing:-.025em;
}
.gh-title__alt{font-weight:400;color:var(--gh-yellow)}
.gh-line{display:block;overflow:hidden;padding-bottom:.06em}
.gh-line > span{display:block}
.gh-copy{display:grid;gap:22px;align-content:start;color:var(--gh-dim);font-size:17px;max-width:40rem}
.gh-sign{
  margin-top:14px;padding-top:26px;border-top:1px solid var(--gh-line);
  font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--gh-yellow);
}

/* ----------------------------------------- FRISE — mode vertical (défaut)
   C'est le rendu sans JavaScript, sur mobile, et en mouvement réduit.     */
.gh-tl{position:relative;z-index:1;padding-bottom:96px}
.gh-tl__hud{display:none}
.gh-tl__track{
  --vp:0;
  position:relative;list-style:none;max-width:var(--gh-wrap);margin:0 auto;
  padding:0 var(--gh-pad) 0 calc(var(--gh-pad) + 34px);
}
.gh-tl__track::before,.gh-tl__track::after{
  content:"";position:absolute;left:calc(var(--gh-pad) + 5px);top:10px;bottom:10px;width:2px;border-radius:2px;
}
.gh-tl__track::before{background:var(--gh-line)}
.gh-tl__track::after{background:var(--gh-yellow);transform-origin:top;transform:scaleY(var(--vp))}

.gh-ch{position:relative;padding-bottom:72px}
.gh-ch:last-child{padding-bottom:0}
.gh-ch::before{                      /* le jalon sur le fil */
  content:"";position:absolute;left:-34px;top:.6em;width:12px;height:12px;border-radius:50%;
  background:var(--gh-bg);border:2px solid var(--gh-yellow);
}
.gh-ch__year{
  font-size:clamp(56px,16vw,96px);line-height:.85;font-weight:800;font-stretch:125%;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(245,197,24,.6);
  background:linear-gradient(var(--gh-yellow),var(--gh-yellow)) 0 0/calc(var(--f,0) * 100%) 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;
}
.gh-ch__body{margin-top:22px}
.gh-ch__kicker{
  font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--gh-yellow);
}
.gh-ch__title{
  margin-top:12px;font-size:clamp(24px,4.6vw,38px);line-height:1.06;font-weight:800;font-stretch:125%;letter-spacing:-.02em;
}
.gh-ch__text{margin-top:16px;color:var(--gh-dim);max-width:34rem}
.gh-ch__cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:16px 22px 16px 26px;border-radius:100px;
  background:var(--gh-yellow);color:#111;text-decoration:none;
  font-size:13px;font-weight:800;font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .35s var(--gh-ease),box-shadow .35s var(--gh-ease);
}
.gh-ch__cta svg{width:16px;height:16px;transition:transform .35s var(--gh-ease)}
.gh-ch__cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(245,197,24,.7)}
.gh-ch__cta:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------------- TICKET */
.gh-ticket{
  position:relative;display:flex;width:min(390px,100%);margin-top:30px;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
.gh-ticket__main,.gh-ticket__stub{
  -webkit-mask:radial-gradient(circle 11px at var(--cut) 0,#0000 97%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 11px at var(--cut) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 11px at var(--cut) 0,#0000 97%,#000) top/100% 51% no-repeat,
               radial-gradient(circle 11px at var(--cut) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
}
.gh-ticket__main{
  --cut:100%;flex:1;display:grid;gap:6px;padding:22px 22px 20px;
  background:var(--gh-surface);border-radius:14px 0 0 14px;
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),rgba(244,244,240,.14) 0);
}
.gh-ticket__type{font-size:10.5px;font-weight:700;font-stretch:125%;letter-spacing:.22em;text-transform:uppercase;color:var(--gh-dim)}
.gh-ticket__name{font-size:20px;line-height:1.05;font-weight:800;font-stretch:125%;letter-spacing:-.01em}
.gh-ticket__meta{font-size:12.5px;color:var(--gh-dim)}
.gh-ticket__stub{
  --cut:0;width:104px;flex:none;padding:18px 14px;border-radius:0 14px 14px 0;
  background:var(--gh-yellow);color:#111;display:flex;flex-direction:column;justify-content:space-between;
}
.gh-ticket__stub b{font-size:15px;font-weight:800;font-stretch:125%}
.gh-ticket__stub i{
  display:block;height:38px;
  background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 13px);
}
.gh-ticket--void .gh-ticket__stub{background:#3A3A38;color:var(--gh-ink)}
.gh-ticket--void .gh-ticket__stub i{background:repeating-linear-gradient(90deg,#6a6a66 0 2px,transparent 2px 5px)}
.gh-ticket--void .gh-ticket__name{color:var(--gh-dim);text-decoration:line-through;text-decoration-thickness:2px}
.gh-ticket__stamp{
  position:absolute;right:124px;top:50%;translate:0 -50%;rotate:-12deg;
  padding:4px 10px;border:2px solid var(--gh-yellow);border-radius:6px;
  font-size:12px;font-weight:800;font-stretch:125%;letter-spacing:.16em;color:var(--gh-yellow);
}

/* ------------------------------------------ apparitions (mode vertical) */
.gh-js .gh-line > span{transform:translateY(105%);transition:transform 1s var(--gh-ease)}
.gh-js .gh-intro.is-in .gh-line > span{transform:none}
.gh-js .gh-intro.is-in .gh-line:nth-child(2) > span{transition-delay:.08s}
.gh-js .gh-intro.is-in .gh-line:nth-child(3) > span{transition-delay:.16s}
.gh-js .gh-intro.is-in .gh-line:nth-child(4) > span{transition-delay:.24s}
.gh-js .gh-copy > *{opacity:0;transform:translateY(18px);transition:opacity .9s var(--gh-ease),transform .9s var(--gh-ease)}
.gh-js .gh-intro.is-in .gh-copy > *{opacity:1;transform:none}
.gh-js .gh-intro.is-in .gh-copy > :nth-child(2){transition-delay:.12s}
.gh-js .gh-intro.is-in .gh-copy > :nth-child(3){transition-delay:.24s}

.gh-js:not(.gh--pinned) .gh-ch__year{transition:background-size 1.2s var(--gh-ease)}
.gh-js:not(.gh--pinned) .gh-ch.is-in .gh-ch__year{--f:1}
.gh-js:not(.gh--pinned) .gh-ch__body,
.gh-js:not(.gh--pinned) .gh-ticket{opacity:0;transform:translateY(26px);transition:opacity .9s var(--gh-ease),transform .9s var(--gh-ease)}
.gh-js:not(.gh--pinned) .gh-ch.is-in .gh-ch__body{opacity:1;transform:none;transition-delay:.1s}
.gh-js:not(.gh--pinned) .gh-ch.is-in .gh-ticket{opacity:1;transform:rotate(-2deg);transition-delay:.22s}

/* ========================================================================
   FRISE — mode ÉPINGLÉ (≥ 900 px, JS actif, mouvement autorisé)
   Le scroll vertical fait défiler les chapitres à l'horizontale.
   ======================================================================== */
.gh--pinned .gh-tl{
  padding-bottom:0;
  --gh-stage:min(560px,76vh);          /* hauteur de la scène : ne prend plus tout l'écran */
}
.gh--pinned .gh-tl__sticky{
  position:sticky;top:calc((100vh - var(--gh-stage)) / 2);height:var(--gh-stage);
  display:flex;flex-direction:column;
  overflow:hidden;overflow:clip;   /* clip : le focus clavier ne peut plus faire défiler ce conteneur */
}

/* Fondu des bords pendant le défilement : un masque plutôt que deux bandes peintes,
   sinon on voit une cassure sur les côtés entre l'intro et la frise. */
.gh--pinned .gh-tl__sticky{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5vw,#000 calc(100% - 5vw),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5vw,#000 calc(100% - 5vw),transparent 100%);
}
.gh--pinned .gh-tl__hud,.gh--pinned .gh-tl__progress{position:relative;z-index:3}
.gh--pinned .gh-tl__hud{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  width:100%;max-width:var(--gh-wrap);margin:0 auto;padding:22px var(--gh-pad) 0;
}
.gh-odo{display:flex;font-size:clamp(28px,2.6vw,40px);line-height:1;font-weight:800;font-stretch:125%;color:var(--gh-ink)}
.gh-odo__col{height:1em;overflow:hidden}
.gh-odo__strip{display:block;transition:transform .9s var(--gh-ease)}
.gh-odo__strip span{display:block;height:1em}
.gh-tl__label{text-align:right;font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--gh-dim)}
.gh-tl__label b{color:var(--gh-yellow);font-weight:800}
.gh-tl__name{display:block;margin-top:8px;color:var(--gh-ink);letter-spacing:.14em}

.gh--pinned .gh-tl__track{
  --pw:min(960px,74vw);--gap:5vw;
  flex:1;display:flex;align-items:center;gap:var(--gap);width:max-content;max-width:none;margin:0;
  padding:0 calc((100vw - var(--pw)) / 2);
  will-change:transform;
}
.gh--pinned .gh-tl__track::before,.gh--pinned .gh-tl__track::after{display:none}

.gh--pinned .gh-ch{
  --d:0;--a:1;--f:0;
  width:var(--pw);flex:none;padding:0;
  display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;column-gap:5vw;align-items:end;
}
.gh--pinned .gh-ch::before{display:none}
.gh--pinned .gh-ch__year{
  grid-column:1 / -1;
  font-size:clamp(76px,8.6vw,132px);-webkit-text-stroke-width:1.5px;
  transform:translateX(calc(var(--d) * 14vw));
  opacity:calc(.35 + var(--a) * .65);
}
.gh--pinned .gh-ch__body{
  margin-top:20px;
  opacity:calc(var(--a) * var(--a));
  transform:translateX(calc(var(--d) * -6vw));
}
.gh--pinned .gh-ch__title{font-size:clamp(24px,2.4vw,34px)}
.gh--pinned .gh-ch__text{font-size:15.5px;margin-top:12px}
.gh--pinned .gh-ch__cta{margin-top:20px;padding:13px 18px 13px 22px}
.gh--pinned .gh-ticket{
  width:min(330px,100%);justify-self:end;margin:0 0 6px;
  opacity:calc(.2 + var(--a) * .8);
  transform:translate(calc(var(--d) * 9vw), calc(var(--d) * var(--d) * 60px)) rotate(calc(var(--d) * 16deg - 3deg));
}

.gh-tl__sticky{display:flex;flex-direction:column}
.gh-tl__track{width:100%}
.gh-tl__progress{
  position:relative;width:100%;max-width:var(--gh-wrap);margin:0 auto 44px;padding:0 var(--gh-pad);
  display:flex;align-items:center;gap:28px;order:-1;        /* en vertical : le lien passe en tête de frise */
}
.gh-tl__rail{display:none;position:relative;flex:1;height:2px;background:var(--gh-line);border-radius:2px}
.gh--pinned .gh-tl__progress{order:0;margin:0 auto;padding-bottom:24px}
.gh--pinned .gh-tl__rail{display:block}

.gh-skip{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:10px 16px;border-radius:100px;border:1px solid rgba(244,244,240,.22);
  color:var(--gh-ink);text-decoration:none;
  font-size:11px;font-weight:700;font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s var(--gh-ease),color .3s var(--gh-ease),background .3s var(--gh-ease);
}
.gh-skip svg{width:14px;height:14px;transition:transform .3s var(--gh-ease)}
.gh-skip:hover{border-color:var(--gh-yellow);color:var(--gh-yellow)}
.gh-skip:hover svg{transform:translateY(3px)}
.gh-end{display:block;height:0;outline:none}
.gh-tl__bar{position:absolute;inset:0;background:var(--gh-yellow);transform-origin:left;transform:scaleX(var(--p,0));border-radius:2px}
.gh-tl__dot{
  position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--gh-bg);border:2px solid rgba(244,244,240,.3);transition:border-color .4s,background .4s,transform .4s var(--gh-ease);
}
.gh-tl__dot.is-past{border-color:var(--gh-yellow);background:var(--gh-yellow)}
.gh-tl__dot.is-current{transform:scale(1.5)}

/* ----------------------------------------------------------- responsive */
@media (min-width:640px){
  .gh{--gh-pad:32px}
}
@media (min-width:900px){
  .gh{--gh-pad:48px}
  .gh-intro{grid-template-columns:1fr 1fr;gap:6vw;padding-block:84px 44px}
  .gh-copy{padding-top:6px;font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .gh-js .gh-line > span,.gh-js .gh-copy > *,
  .gh-js .gh-ch__body,.gh-js .gh-ticket{opacity:1!important;transform:none!important;transition:none!important}
  .gh-js .gh-ch__year{--f:1;transition:none!important}
  .gh-ch__cta,.gh-ch__cta svg{transition:none}
}