@font-face{font-family:Anton;src:url("fonts/anton-400.ttf") format("truetype");font-weight:400;font-display:swap}

.edc{
  --every:#FF5C31; --data:#2B2B2B; --counts:#26C7FF; --counts-text:#0A5F7A;
  --muted:#576373; --ink:#172331; --paper:#FFFFFF;
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(72px,10vw,140px);
  background:var(--paper);color:var(--ink);
  font-family:Poppins,"Segoe UI",system-ui,sans-serif;
}
html.theme-dark .edc{--data:#F3F6FA;--muted:#BDC9D5;--ink:#F3F6FA;--paper:#0E151E;--counts-text:#7FDCFF}
.edc__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.edc__title{
  margin:0;font-family:Anton,"Bebas Neue",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;
  font-size:clamp(72px,15vw,230px);line-height:.92;text-transform:uppercase;display:grid;
}
.edc__w{display:block;width:max-content;will-change:transform}
.edc__w--1{color:var(--every)}
.edc__w--2{color:var(--data);margin-left:clamp(48px,17vw,300px)}
.edc__w--3{color:var(--counts);margin-left:clamp(96px,34vw,600px)}

/* lettres découpées par le JS */
.edc .ch{display:inline-block;text-align:center;will-change:transform}
.edc.is-armed .ch{transform:translateY(60%);opacity:0}
.edc.is-in .ch{transform:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease;transition-delay:calc(var(--i) * 45ms)}

/* EVERY : vague */
.edc.is-live .edc__w--1 .ch{animation:edc-wave 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * 110ms)}
/* COUNTS : saut façon compteur */
.edc.is-live .edc__w--3 .ch{animation:edc-count 3s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:calc(1.2s + var(--i) * 140ms)}
/* DATA : lettre en cours de décodage */
.edc .ch.is-scramble{color:var(--every)}

@keyframes edc-wave{0%,60%,100%{transform:translateY(0)}20%{transform:translateY(-9%)}40%{transform:translateY(3%)}}
@keyframes edc-count{0%,40%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-12%) scale(1.06)}24%{transform:translateY(0) scale(.98)}}

.edc__aside{margin-top:clamp(28px,4vw,44px);margin-left:clamp(96px,34vw,600px);max-width:52ch;display:grid;gap:22px}
.edc__text{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--muted)}
.edc__text strong{color:var(--ink);font-weight:600}
.edc__cta{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:999px;border:2px solid var(--counts);
  color:var(--counts-text);font-size:15px;font-weight:600;text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.edc__cta svg{width:18px;height:18px;transition:transform .25s ease}
.edc__cta:hover,.edc__cta:focus-visible{background:var(--counts);color:#0B121B;transform:translateY(-2px)}
.edc__cta:hover svg,.edc__cta:focus-visible svg{transform:translateX(4px)}
.edc__cta:focus-visible{outline:3px solid var(--every);outline-offset:3px}
.edc.is-armed .edc__aside{opacity:0;transform:translateY(16px)}
.edc.is-in .edc__aside{opacity:1;transform:none;transition:opacity .8s ease .6s,transform .8s ease .6s}

@media (max-width:640px){
  .edc__w--2{margin-left:12vw}
  .edc__w--3{margin-left:24vw}
  .edc__aside{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .edc *{animation:none!important;transition:none!important}
  .edc.is-armed .ch,.edc.is-armed .edc__aside{transform:none;opacity:1}
  .edc__w{transform:none!important}
  .edc__canvas{display:none}
}

/* Keep the stepped title within the container at every width. */
.edc{scroll-margin-top:100px}
.edc .wrap{container-type:inline-size}
.edc .edc__title{font-size:clamp(64px,15vw,210px);font-size:clamp(48px,16cqw,230px);line-height:1.02;letter-spacing:0}
.edc .edc__w--2{margin-left:18%}
.edc .edc__w--3{margin-left:32%}
.edc .edc__aside{margin-left:32%}
@media(max-width:640px){.edc .edc__aside{margin-left:0}.edc .edc__w--2{margin-left:12%}.edc .edc__w--3{margin-left:24%}}

/* V11.12: the reference's three-step composition. */
.edc{min-height:90svh;display:grid;align-items:center;padding-block:clamp(48px,6svh,90px)}
.edc .wrap{position:relative;width:90%;max-width:1440px;margin-inline:auto;padding-inline:0}
.edc .edc__title{display:grid;width:100%;font-size:min(19vw,24svh,270px);line-height:.94;gap:.02em;font-weight:400;letter-spacing:-.015em}
.edc .edc__w{margin:0;transform:none;width:max-content;max-width:100%}
.edc .edc__w--1{justify-self:start}
.edc .edc__w--2{justify-self:center}
.edc .edc__w--3{justify-self:end}
.edc .edc__aside{margin:24px 0 0;max-width:none;justify-items:end}
.edc .edc__cta{justify-self:end}
.edc .edc__canvas{z-index:-1;opacity:.85}
@media(max-width:640px){.edc{min-height:70svh}.edc .edc__title{font-size:20vw}.edc .edc__aside{margin-top:32px}}