/* =========================================================
   Section « Affiliation »
   Reprise depuis Documents/Test de section/goat-affiliation.
   Tout est préfixé .ga pour ne rien casser dans le reste du site.
   ========================================================= */
.ga{
  --ga-bg:#111111;
  --ga-surface:#171717;
  --ga-surface-2:#1E1E1E;
  --ga-ink:#F4F4F0;
  --ga-dim:#A6A6A1;            /* 7,7:1 sur le fond */
  --ga-yellow:#F5C518;
  --ga-line:rgba(244,244,240,.14);
  --ga-wrap:1240px;
  --ga-pad:20px;
  --ga-ease:cubic-bezier(.22,1,.36,1);

  position:relative;overflow:clip;
  background:var(--ga-bg);color:var(--ga-ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-stretch:112%;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.ga *,.ga *::before,.ga *::after{box-sizing:border-box}
/* :where() garde cette remise à zéro peu prioritaire : sinon elle annule les marges
   définies plus bas (titre, texte d'intro, titres et textes des étapes). */
.ga :where(p,h2,h3,ol){margin:0;padding:0}
.ga :focus-visible{outline:2px solid var(--ga-yellow);outline-offset:4px;border-radius:6px}
.ga__grain{
  position:absolute;inset:0;pointer-events:none;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");
}
.ga__wrap{position:relative;max-width:var(--ga-wrap);margin:0 auto;padding:72px var(--ga-pad) 80px}

/* ------------------------------------------------------------ en-tête */
.ga-head{display:grid;gap:26px;align-items:start}
.ga-eyebrow{font-size:12px;font-weight:700;font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;color:var(--ga-yellow)}
.ga-title{margin-top:22px;font-size:clamp(30px,8.2vw,60px);   /* « Soyez récompensé. » tient sur une ligne */
  line-height:1;font-weight:800;font-stretch:125%;letter-spacing:-.025em}
.ga-title__alt{font-weight:400;color:var(--ga-yellow)}
.ga-line{display:block;overflow:hidden;padding-bottom:.08em}
.ga-line > span{display:block}
.ga-lead{color:var(--ga-dim);font-size:17px;max-width:38rem}

/* -------------------------------------------------------------- étapes */
.ga-steps{list-style:none;display:grid;gap:52px;margin-top:64px}
.ga-step{position:relative;padding-top:34px}
.ga-step::before,.ga-step::after{           /* le filet, qui se remplit de jaune d'une étape à l'autre */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
}
.ga-step::before{background:var(--ga-line)}
.ga-step::after{height:2px;top:-.5px;background:var(--ga-yellow);transform-origin:left;transform:scaleX(0)}

.ga-num{
  display:block;font-size:clamp(52px,5.4vw,76px);line-height:.9;font-weight:800;font-stretch:125%;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.2px rgba(245,197,24,.62);
  background:linear-gradient(var(--ga-yellow),var(--ga-yellow)) 0 0/0% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;
}
.ga-step__title{margin-top:26px;font-size:clamp(22px,2.1vw,27px);line-height:1.15;font-weight:800;font-stretch:125%;letter-spacing:-.01em}
.ga-step__text{margin-top:12px;color:var(--ga-dim);font-size:16px;max-width:30rem}

/* ------------------------------------------ vignettes animées (décor) */
.ga-mock{
  --mx:50%;--my:0%;
  position:relative;overflow:hidden;margin-top:28px;height:196px;border-radius:16px;
  background:var(--ga-surface);border:1px solid var(--ga-line);
  font-size:12px;
}
.ga-mock::before{                         /* halo qui suit le pointeur */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ga-ease);
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(245,197,24,.13),transparent 65%);
}
.ga-step:hover .ga-mock::before{opacity:1}
.ga-mock__label{font-size:10px;font-weight:700;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--ga-dim)}

/* 01 — l'espace affilié : le code se « déchiffre » */
.ga-m1{display:grid;align-content:center;gap:14px;padding:22px}
.ga-m1__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:10px;background:var(--ga-surface-2);border:1px solid var(--ga-line)}
.ga-m1__code{font-size:17px;font-weight:800;font-stretch:125%;letter-spacing:.08em;color:var(--ga-yellow);font-variant-numeric:tabular-nums}
.ga-m1__link{color:var(--ga-ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-m1__copy{
  flex:none;padding:5px 10px;border-radius:100px;border:1px solid var(--ga-line);color:var(--ga-dim);
  font-size:10px;font-weight:700;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.ga-m1__copy.is-done{background:var(--ga-yellow);border-color:var(--ga-yellow);color:#111}

/* 02 — partagez : le lien part vers trois publics */
.ga-m2 svg{position:absolute;inset:0;width:100%;height:100%}
.ga-m2 .ga-flow{stroke:var(--ga-yellow);stroke-width:1.6;fill:none;stroke-dasharray:3 9;opacity:.25}
.ga-m2 .ga-node{fill:var(--ga-surface-2);stroke:var(--ga-line);stroke-width:1}
.ga-m2 .ga-node-ring{fill:none;stroke:var(--ga-yellow);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.ga-m2 .ga-check{fill:none;stroke:#111;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ga-m2 .ga-node-fill{fill:var(--ga-yellow);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.ga-m2 text{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ga-dim)}
.ga-m2 .ga-pill{fill:var(--ga-yellow)}
.ga-m2 .ga-pill-txt{fill:#111;font-weight:800}

/* 03 — encaissez : les réservations confirmées tombent une à une */
.ga-m3{display:grid;gap:7px;align-content:center;padding:14px 16px}
.ga-m3__row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--ga-surface-2);border:1px solid var(--ga-line)}
.ga-m3__tick{flex:none;width:18px;height:18px;border-radius:50%;background:var(--ga-yellow);display:grid;place-items:center}
.ga-m3__tick svg{width:10px;height:10px}
.ga-m3__row span{flex:1;min-width:0;color:var(--ga-ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-m3__row em{flex:none;font-style:normal;font-size:9.5px;font-weight:700;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;color:var(--ga-yellow)}
.ga-m3__gauge{margin-top:4px;display:grid;gap:6px}
.ga-m3__bar{height:6px;border-radius:6px;background:var(--ga-surface-2);overflow:hidden}
.ga-m3__bar i{display:block;height:100%;width:78%;border-radius:6px;background:var(--ga-yellow);transform-origin:left;transform:scaleX(0)}

/* ------------------------------------------------------------- bouton */
.ga-foot{margin-top:60px}
.ga-cta{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:16px;
  padding:20px 30px;border-radius:14px;background:var(--ga-yellow);color:#111;text-decoration:none;
  font-size:14px;font-weight:800;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 18px 40px -22px rgba(245,197,24,.55);
  transition:transform .4s var(--ga-ease),box-shadow .4s var(--ga-ease);
}
.ga-cta::after{                           /* reflet qui balaie le bouton */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  transition:left .8s var(--ga-ease);
}
.ga-cta svg{width:17px;height:17px;transition:transform .4s var(--ga-ease)}
.ga-cta:hover{transform:translateY(-3px);box-shadow:0 24px 50px -20px rgba(245,197,24,.7)}
.ga-cta:hover::after{left:130%}
.ga-cta:hover svg{transform:translateX(5px)}

/* ======================================================================
   ANIMATIONS — déclenchées par .is-in (ajoutée au scroll par le JS)
   Sans JS, rien n'est masqué : tout est dans son état final.
   ====================================================================== */
.ga-js .ga-line > span{transform:translateY(106%);transition:transform 1s var(--ga-ease)}
.ga-js .ga-head.is-in .ga-line > span{transform:none}
.ga-js .ga-head.is-in .ga-line + .ga-line > span{transition-delay:.1s}
.ga-js .ga-lead{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ga-ease) .2s,transform .9s var(--ga-ease) .2s}
.ga-js .ga-head.is-in .ga-lead{opacity:1;transform:none}

.ga-js .ga-step{--delay:calc(var(--i) * .45s)}
.ga-js .ga-step::after{transition:transform 1.1s var(--ga-ease) var(--delay)}
.ga-js .ga-step .ga-num{transition:background-size 1.1s var(--ga-ease) calc(var(--delay) + .35s)}
.ga-js .ga-step__title,.ga-js .ga-step__text,.ga-js .ga-mock{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ga-ease),transform .8s var(--ga-ease);
}
.ga-js .ga-step__title{transition-delay:calc(var(--delay) + .2s)}
.ga-js .ga-step__text{transition-delay:calc(var(--delay) + .3s)}
.ga-js .ga-mock{transition-delay:calc(var(--delay) + .4s)}

.ga-js .ga-steps.is-in .ga-step::after{transform:scaleX(1)}
.ga-js .ga-steps.is-in .ga-num{background-size:100% 100%}
.ga-js .ga-steps.is-in .ga-step__title,
.ga-js .ga-steps.is-in .ga-step__text,
.ga-js .ga-steps.is-in .ga-mock{opacity:1;transform:none}

/* 02 : flux continu + nœuds qui s'allument l'un après l'autre */
.ga-js .ga-steps.is-in .ga-m2 .ga-flow{opacity:.9;animation:ga-flow 1.1s linear infinite;transition:opacity .6s 1.4s}
@keyframes ga-flow{to{stroke-dashoffset:-24}}
.ga-js .ga-steps.is-in .ga-m2 .ga-node-fill{animation:ga-pop .5s var(--ga-ease) forwards;animation-delay:calc(1.8s + var(--k) * .35s)}
.ga-js .ga-steps.is-in .ga-m2 .ga-check{animation:ga-fade .3s forwards;animation-delay:calc(2s + var(--k) * .35s)}
.ga-js .ga-steps.is-in .ga-m2 .ga-node-ring{animation:ga-ring 2.8s var(--ga-ease) infinite;animation-delay:calc(2.4s + var(--k) * .9s)}
@keyframes ga-pop{to{opacity:1;transform:scale(1)}}
@keyframes ga-fade{to{opacity:1}}
@keyframes ga-ring{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}

/* 03 : lignes qui tombent, jauge qui se remplit */
.ga-js .ga-m3__row{opacity:0;transform:translateY(-10px)}
.ga-js .ga-steps.is-in .ga-m3__row{animation:ga-drop .6s var(--ga-ease) forwards;animation-delay:calc(1.6s + var(--k) * .45s)}
@keyframes ga-drop{to{opacity:1;transform:none}}
.ga-js .ga-m3__bar i{transition:transform 1.6s var(--ga-ease) 3s}
.ga-js .ga-steps.is-in .ga-m3__bar i{transform:scaleX(1)}
.ga-js .ga-foot{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ga-ease),transform .8s var(--ga-ease)}
.ga-js .ga-foot.is-in{opacity:1;transform:none}

/* sans JS : états finaux visibles */
.ga:not(.ga-js) .ga-step::after{transform:scaleX(1)}
.ga:not(.ga-js) .ga-num{background-size:100% 100%}
.ga:not(.ga-js) .ga-m2 .ga-node-fill,.ga:not(.ga-js) .ga-m2 .ga-check{opacity:1;transform:none}
.ga:not(.ga-js) .ga-m3__bar i{transform:none}

/* ----------------------------------------------------------- responsive */
@media (min-width:640px){ .ga{--ga-pad:32px} }
@media (min-width:900px){
  .ga{--ga-pad:48px}
  .ga__wrap{padding-block:110px 110px}
  .ga-head{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:5vw}
  .ga-title{font-size:clamp(34px,4.6vw,60px)}
  .ga-lead{margin-top:44px}
  .ga-steps{grid-template-columns:repeat(3,1fr);gap:4.5vw;margin-top:88px}
  .ga-foot{margin-top:72px}
}

@media (prefers-reduced-motion:reduce){
  .ga-js .ga-line > span,.ga-js .ga-lead,.ga-js .ga-step__title,.ga-js .ga-step__text,.ga-js .ga-mock,
  .ga-js .ga-foot,.ga-js .ga-m3__row{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .ga-js .ga-step::after,.ga-js .ga-m3__bar i{transform:none!important;transition:none!important}
  .ga-js .ga-num{background-size:100% 100%!important;transition:none!important}
  .ga-js .ga-m2 .ga-flow{animation:none!important;opacity:.9!important}
  .ga-js .ga-m2 .ga-node-fill,.ga-js .ga-m2 .ga-check{animation:none!important;opacity:1!important;transform:none!important}
  .ga-js .ga-m2 .ga-node-ring{animation:none!important}
  .ga-cta,.ga-cta svg,.ga-cta::after{transition:none}
}

/* =========================================================
   Ajustements GOAT TICKETS
   ========================================================= */
/* 01 : icône de copie à la place du lien */
.ga-m1{gap:12px}
.ga-m1__copy{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:10px}
.ga-m1__copy svg{width:16px;height:16px;grid-area:1/1;transition:opacity .3s,transform .3s var(--ga-ease)}
.ga-m1__copy .ga-ico-done{opacity:0;transform:scale(.6)}
.ga-m1__copy.is-done .ga-ico-copy{opacity:0;transform:scale(.6)}
.ga-m1__copy.is-done .ga-ico-done{opacity:1;transform:none}

/* 03 : statuts de couleur */
.ga-m3__row span{font-size:12.5px}
.ga-m3__row--ok .ga-m3__tick{background:#22c55e}
.ga-m3__row--wait .ga-m3__tick{background:#3b82f6}
.ga-m3__row--new .ga-m3__tick{background:#ef4444}

/* Les trois cadres au même niveau, quelle que soit la longueur des textes */
@media (min-width:900px){
  .ga-step{display:flex;flex-direction:column}
  .ga-mock{margin-top:auto}
  .ga-step__text{margin-bottom:28px}
}

/* Question et bouton centrés */
.ga-foot{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.ga-foot__question{font-size:clamp(20px,2vw,26px);line-height:1.2;font-weight:800;font-stretch:125%;letter-spacing:-.01em;color:var(--ga-ink)}

/* Espacement resserré avec les sections voisines */
@media (min-width:900px){ .ga__wrap{padding-block:86px 86px} }