:root {
  
  --vif: #ff5fa2;          
  --vif-doux: rgba(255, 95, 162, .22);
  --pulse: 0;              

  
  --vif-h: 337;
  --vif-s: 100%;
  --vif-l: 69%;
}

:root {
  --violet: hsl(var(--vif-h) var(--vif-s) var(--vif-l));
  --violet-clair: hsl(var(--vif-h) var(--vif-s) calc(var(--vif-l) + 13%));
  
  --cyan: hsl(calc(var(--vif-h) + 168) var(--vif-s) calc(var(--vif-l) + 4%));
  --cyan-clair: hsl(calc(var(--vif-h) + 168) var(--vif-s) calc(var(--vif-l) + 16%));
  --glow: hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .32);
  --ligne: hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .18);
}

.grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}
@media (min-width: 1500px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte {
  position: relative; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--carte); border: 1px solid transparent;
  transition: border-color .25s, transform .25s;
  min-width: 0;
}
.carte:hover { transform: translateY(-3px); border-color: var(--vif-doux); }
.carte-img { position: relative; aspect-ratio: 1; overflow: hidden; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s, filter .4s; }
.carte:hover .carte-img img { transform: scale(1.06); }

.carte-voile {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(6,6,12,.1) 0%, rgba(6,6,12,.72) 100%);
  opacity: 0; transition: opacity .28s;
}

.carte:hover .carte-voile { opacity: 1; }
.carte-play {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vif); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 30px -6px var(--vif);
  transform: scale(.86); transition: transform .25s;
}
.carte:hover .carte-play { transform: scale(1); }
.carte-play svg { width: 20px; height: 20px; }

.carte.joue {
  border-color: var(--vif);
  box-shadow: 0 0 0 1px var(--vif), 0 calc(14px + var(--pulse) * 22px) calc(30px + var(--pulse) * 40px) calc(-18px) var(--vif);
}
.carte.joue .carte-img img { filter: saturate(calc(1 + var(--pulse) * .5)) brightness(calc(1 + var(--pulse) * .12)); }

.carte-bas { padding: 15px 16px 17px; }
.carte-titre { font-weight: 680; font-size: 16.5px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.carte-meta { font-size: 12.5px; color: var(--txt3); display: flex; align-items: center; gap: 9px; }

.carte-meta b { color: var(--violet-clair); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }

.carte-prix { margin-left: auto; color: var(--txt); font-weight: 700; font-size: 13.5px; }

.onde { display: block; width: 100%; height: 34px; cursor: pointer; }
.carte .onde { height: 22px; margin-top: 9px; opacity: .55; }
.carte.joue .onde { opacity: 1; }

.lecteur {
  position: fixed; left: 14px; right: 14px; z-index: 65;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-radius: 20px; overflow: hidden;
  background: rgba(14, 14, 24, .74); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--vif-doux);
  box-shadow: 0 20px 60px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transform: translateY(160%); transition: transform .42s cubic-bezier(.2, .9, .2, 1), border-color .6s;
  
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px; padding: 12px 16px;
}

.lecteur > #viz-dock { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.lecteur > *:not(#viz-dock) { position: relative; z-index: 1; }

@media (max-width: 620px) {
  .lecteur { grid-template-columns: auto auto auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .lecteur .lec-cover { display: none; }
  .lecteur .lec-temps { display: none; }
}
body.charge .lecteur, body.joue .lecteur { transform: translateY(0); }

#viz-dock { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.lecteur > * { position: relative; z-index: 1; }

.lec-cover {
  width: 52px; height: 52px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
  transform: scale(calc(1 + var(--pulse) * .07));
  box-shadow: 0 0 calc(var(--pulse) * 26px) var(--vif);
  transition: box-shadow .12s linear;
}
.lec-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lec-play {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: var(--vif); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 22px -6px var(--vif);
  transition: transform .18s, background .5s;
}

.lec-nav {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  color: var(--txt2, rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 8px -4px rgba(0, 0, 0, .6);
  transition: color .2s, border-color .2s, background .2s, transform .12s, box-shadow .2s;
}
.lec-nav svg { width: 18px; height: 18px; display: block; }
.lec-nav:hover {
  color: #fff;
  border-color: hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .55);
  background: linear-gradient(180deg,
    hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .16),
    hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 6px 18px -8px var(--vif);
}
.lec-nav:active { transform: scale(.93); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.lec-nav:focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; }

.lec-play {
  border-radius: 50%;
  background: linear-gradient(180deg,
    hsl(var(--vif-h) var(--vif-s) calc(var(--vif-l) + 8%)),
    hsl(var(--vif-h) var(--vif-s) calc(var(--vif-l) - 6%)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -8px var(--vif);
}
.lec-play svg { width: 20px; height: 20px; display: block; }
.lec-play:active { transform: scale(.93); }

@media (max-width: 460px) {
  .lec-nav { width: 40px; height: 40px; border-radius: 12px; }
  .lec-nav svg { width: 16px; height: 16px; }
}
.lec-play:active { transform: scale(.9); }
.lec-play svg { width: 18px; height: 18px; }

.lec-mid { min-width: 0; }
.lec-titre { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lec-sous { font-size: 11.5px; color: var(--txt3); margin-top: 1px; }
.lec-temps { font-size: 11.5px; color: var(--txt3); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1024px) {
  .lecteur { grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; padding: 10px 13px; }
  .lec-temps { display: none; }
  .lec-cover { width: 44px; height: 44px; border-radius: 11px; }
  .lec-play { width: 42px; height: 42px; }
  
  .lecteur { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 22px); }
  body { padding-bottom: calc(var(--dock-h) + 108px + env(safe-area-inset-bottom, 0px)); }
}

.hero-aura {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(45% 40% at 30% 55%, var(--vif) 0%, transparent 70%);
  opacity: calc(.05 + var(--pulse) * .17);
  transform: scale(calc(1 + var(--pulse) * .06));
  transition: opacity .1s linear;
  mix-blend-mode: screen;
}

@media (min-width: 1024px) {
  
  .hero-in {
    
    min-height: 0;
    max-height: calc(100svh - 62px - var(--barre-h) - 12px);
    padding-block: 8px 12px;
  }
  
  
  .hero-txt { max-width: 640px; }
  .hero-ctas { margin-top: 16px; }
  .hero-points { margin-top: 12px; }
  .hero-txt h1 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.04; margin-bottom: .3rem;
                 max-width: none; white-space: nowrap; }
  .hero-txt > p { font-size: .95rem; line-height: 1.5; margin-bottom: .55rem; max-width: 52ch; }
  
  .pastille { margin-top: 16px; }
  
  .hero-in > .avant { max-width: 358px; align-self: center; }
  .hero-in > .avant .avant-cover { aspect-ratio: 1; height: auto; }
  
  .hero-in > .avant .avant-eti { white-space: nowrap; font-size: 10px; letter-spacing: .16em; }
  .hero-in > .avant .avant-titre { font-size: 18px; line-height: 1.2; }
  .hero-in > .avant .avant-bas { gap: 10px; }
  .hero-in > .avant .gros-play { width: 46px; height: 46px; }
  .hero-in > .avant .avant-cover img { height: 100%; width: 100%; object-fit: cover; }
  .hero-in > .avant .avant-bas { padding: 12px 6px 4px; }
  .descendre, .descubrir { margin-top: 8px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  
  .hero-txt h1 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
  .hero-txt > p { font-size: .9rem; margin-bottom: .45rem; }
  
  .pastille { margin-top: 11px; }
  
  .hero-in > .avant { max-width: 292px; }
  .hero-in > .avant .avant-titre { font-size: 16px; }
  .hero-in { padding-block: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .friso-pista, .ruban-pista { animation-name: rubanDefile; animation-duration: 210s; animation-play-state: running; }
}

.nav-cta-2 {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: var(--txt, #f0eaf2) !important;
  box-shadow: none !important;
}
.nav-cta-2:hover {
  border-color: hsl(var(--vif-h) var(--vif-s) var(--vif-l) / .6) !important;
  color: #fff !important;
}
@media (max-width: 900px) {
  
  .nav-cta-2 { display: none !important; }
}

body.joue .hero-fond img {
  filter:
    saturate(calc(1.2 + var(--pulse) * .45))
    contrast(calc(1.02 + var(--pulse) * .06))
    brightness(calc(1.18 + var(--pulse) * .30));
  transition: filter .09s linear, transform .9s cubic-bezier(.2, .7, .2, 1);
}

body.joue .hero-fond::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 38%,
    hsl(var(--vif-h) var(--vif-s) var(--vif-l) / calc(.10 + var(--pulse) * .26)) 0%,
    transparent 72%);
  mix-blend-mode: screen;
  transition: background .09s linear;
}

body.joue .hero-voile { opacity: calc(1 - var(--pulse) * .38); transition: opacity .12s linear; }

@media (prefers-reduced-motion: reduce) {
  body.joue .hero-fond img { filter: saturate(1.2) contrast(1.02) brightness(1.18); }
  body.joue .hero-fond::after { display: none; }
  body.joue .hero-voile { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .carte.joue, .lec-cover, .hero-aura { transform: none !important; box-shadow: none !important; }
}

a.carte-titre {
  display: block; color: inherit; text-decoration: none;
  transition: color .2s;
}
a.carte-titre:hover { color: var(--violet-clair); text-decoration: underline; }

.carte-demander {
  width: 100%; margin-top: 9px; padding: 9px 12px; border: 0; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 650;
  color: #fff; background: linear-gradient(135deg, var(--violet) 0%, #ff7ab0 100%);
  box-shadow: 0 6px 18px -8px var(--glow);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s, filter .2s;
}
.carte:hover .carte-demander,
.carte:focus-within .carte-demander { opacity: 1; transform: translateY(0); }
.carte-demander:hover { filter: brightness(1.08); }
.carte-demander:active { transform: scale(.96); }
@media (hover: none) {
  
  .carte-demander { opacity: 1; transform: none; }
}

.nav-wa {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px;
  border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700;
  color: #06301f; background: linear-gradient(180deg, #4ee39a, #25c579);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(37, 197, 121, .8);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.nav-wa:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -10px rgba(37,197,121,.9); }
.nav-wa:active { transform: scale(.95); }
.nav-wa svg { flex: 0 0 auto; }
@media (max-width: 900px) { .nav-wa span { display: none; } .nav-wa { padding: 8px 11px; } }

.hero .hero-fond {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, transparent, var(--fond, #07070d));
  pointer-events: none; z-index: 2;
}

#beats, .catalogue { scroll-margin-top: 80px; }
body { padding-bottom: calc(var(--barre-h, 72px) + 28px); }

#dock-wa { color: #25c579; }
#dock-wa svg { fill: currentColor; stroke: none; }

body { --nav-h: 63px; }
.hero { margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); }

body.defile .nav { background: rgba(6, 6, 12, .82); }

.carte.beat {
  display: block; grid-template-columns: none; gap: 0; padding: 0;
  align-items: initial; text-align: left;
}
.carte.beat > .carte-img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.carte.beat > .carte-bas { width: 100%; display: block; }

.carte-bas { padding: 16px 16px 18px; }
.carte-titre {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  font-size: 17px; line-height: 1.3; margin-bottom: 9px;
}
.carte-meta { flex-wrap: wrap; row-gap: 5px; font-size: 12.5px; }
.carte-prix { margin-left: auto; white-space: nowrap; }
.carte.beat .onde { width: 100%; height: 28px; margin-top: 11px; }
.carte-demander { margin-top: 11px; width: 100%; min-height: 42px; }

.prix-converti { opacity: .62; font-weight: 500; font-size: .86em; white-space: nowrap; }
.lic-prix .prix-converti { display: block; margin-top: 3px; font-size: .5em; opacity: .55; }

.hero-in {
  max-height: none;
  min-height: calc(100svh - var(--nav-h, 63px) - var(--barre-h, 96px) - 18px);
  align-content: start;
  align-items: start;
  padding-top: clamp(18px, 4.5vh, 52px);
}

.hero-logo { width: 116px; height: 116px; margin-bottom: .85rem; }

.descendre, .descubrir { display: none !important; }

@media (max-width: 1023px) {
  .hero-logo { width: 96px; height: 96px; margin-bottom: .7rem; }
  .hero-in { min-height: calc(100svh - var(--barre-h, 96px) - 14px); }
}
@media (max-width: 600px) {
  .hero-logo { width: 84px; height: 84px; }
}

.hero-in { padding-top: clamp(10px, 2.2vh, 40px); padding-bottom: clamp(8px, 1.6vh, 24px); }
.hero-logo { width: clamp(64px, 11.5vh, 116px); height: clamp(64px, 11.5vh, 116px);
  margin-bottom: clamp(.3rem, 1.1vh, .85rem); }
.hero-in .pastille { margin-bottom: clamp(6px, 1.2vh, 16px); }
.hero-in h1 { font-size: clamp(30px, 5.6vh, 52px); line-height: 1.08;
  margin-bottom: clamp(6px, 1.2vh, 14px); }
.hero-in > div > p, .hero-in .sous { font-size: clamp(13.5px, 1.9vh, 16px);
  line-height: 1.5; margin-bottom: clamp(10px, 2.4vh, 26px); }
.hero-in .cta { padding-block: clamp(11px, 1.7vh, 16px); }

@media (max-height: 700px) and (min-width: 1024px) {
  
  .hero-in > .avant { display: flex; max-width: 272px; padding: 12px; }
  .hero-in > .avant .avant-bas { padding: 11px 5px 3px; gap: 10px; }
  .hero-in > .avant .avant-eti { font-size: 10px; letter-spacing: .16em; margin-bottom: 4px; }
  .hero-in > .avant .avant-titre { font-size: 18px; }
  .hero-in > .avant .avant-meta { font-size: 12.5px; }
  .hero-in > .avant .gros-play { width: 44px; height: 44px; }
}

@media (max-height: 700px) {
  .hero-in { min-height: 0; padding-bottom: clamp(90px, 14vh, 130px); }
}

.hero-points{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;
  margin:clamp(10px,1.8vh,18px) 0 0;font-size:12.5px;opacity:.62}
.hero-points li{display:flex;align-items:center;gap:6px;white-space:nowrap}

.sec-points{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;list-style:none;padding:0;margin:10px auto 22px;font-size:13px;color:var(--muted,#b8bcc8)}
.sec-points li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.sec-points li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent,#7c7cff);box-shadow:0 0 8px var(--accent,#7c7cff)}
@media(max-width:600px){.sec-points{font-size:11.5px;gap:5px 13px}}
.hero-points li::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--vif,#ff5fa2);flex:0 0 auto}
@media(max-width:600px){.hero-points{font-size:11.5px;gap:5px 13px}}

.lg-fl{display:inline-flex;align-items:center;line-height:0}
.lg-fl svg{border-radius:2.5px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

.lg-fl img{border-radius:2.5px;display:block;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

.hero-in > div { align-items: flex-start; }
.hero-in .cta, .hero-in .hero-points { align-self: flex-start; margin-left: 0; }
.hero-in > div > div:has(> .cta) { justify-content: flex-start; margin-left: 0; }

.hero-logo-zone { height: var(--logo-place, 112px); position: relative; }
.hero-logo {
  position: absolute; left: 0; bottom: 0;
  width: clamp(96px, 15vh, 168px); height: auto; margin: 0;
  transform-origin: left bottom;
}

.hero-in .hero-logo:not(.hero-logo-zone > *) {
  width: clamp(96px, 15vh, 168px);
  height: var(--logo-place, 112px);
  object-fit: contain; object-position: left center;
  margin-bottom: clamp(.3rem, 1vh, .8rem);
}

.licences, .lics, #licences .grille {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: 16px; max-width: 1080px; margin-inline: auto;
}
@media (min-width: 1024px) {
  .licences, .lics, #licences .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lic { padding: 20px 20px 22px; }
.lic-prix { font-size: clamp(25px, 3vw, 33px); }
.lic h3, .lic-nom { font-size: 17px; }
.lic ul { font-size: 13.5px; line-height: 1.5; }
.lic li { padding-block: 3px; }

.hero-in .hero-logo, .hero-logo {
  position: static !important; bottom: auto !important; left: auto !important;
  
  width: clamp(88px, 13.5vh, 132px) !important;
  height: auto !important;
  transform: scale(1.45);
  transform-origin: left center;
  margin-bottom: clamp(1.2rem, 2.8vh, 2.2rem) !important;
}
.hero-logo-zone { height: auto; position: static; }
@media (max-width: 600px) { .hero-in .hero-logo, .hero-logo { transform: scale(1.28); } }

@media (max-width: 1024px) {
  .lecteur {
    grid-template-columns: auto auto auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  
  .lecteur .lec-cover { display: none !important; }
  .lecteur .lec-play { width: 38px !important; height: 38px !important; }
  .lecteur .lec-nav { gap: 4px; }
  .lecteur .lec-nav button,
  .lecteur .lec-nav a { width: 34px !important; height: 34px !important; }
  .lecteur .lec-titre {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; line-height: 1.25;
  }
  .lecteur .lec-mid canvas,
  .lecteur canvas { height: 22px !important; }
}

@media (max-width: 380px) {
  .lecteur { grid-template-columns: auto auto minmax(0, 1fr) !important; }
  .lecteur .lec-nav { display: none !important; }
}

@media (max-width: 1023px) {
  .hero-pastille, .pastille, .hero-txt .pastille {
    font-size: 10.5px; letter-spacing: .12em; padding: 7px 14px; opacity: .82;
    line-height: 1.5; max-width: 300px; margin-left: auto; margin-right: auto;
  }
  .hero-txt h1 { font-size: clamp(34px, 9.4vw, 46px); line-height: 1.03;
                 letter-spacing: -.02em; margin-bottom: .5rem; }
  .hero-txt > p { font-size: .95rem; line-height: 1.55; max-width: 34ch;
                  margin-left: auto; margin-right: auto; }
  
  .hero-in { justify-content: center; }
  .pastille { line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
}

@media (max-width: 1023px) {
  #licences .licences {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
    margin-inline: calc(var(--marge, 20px) * -1);
    padding-inline: var(--marge, 20px);
    padding-bottom: 6px;
  }
  #licences .licences::-webkit-scrollbar { display: none; }
  #licences .lic {
    flex: 0 0 82%;
    max-width: 320px;
    scroll-snap-align: center;
  }
}

footer.pied,
.pied {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 160px);
}
@media (max-width: 620px) {
  footer.pied,
  .pied { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 170px); }
}

@media (max-width: 900px) {
  
  .hero-in { text-align: center; }
  .hero-logo,
  .hero-in .hero-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform-origin: center center;
  }

  
  .hero-in .pastille,
  .hero-pastille {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 12px auto 14px;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 6px 22px -12px rgba(0, 0, 0, .8);
  }

  
  
  .hero-in {
    align-content: space-between;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  }
  .hero-txt {
    margin-top: clamp(24px, 9vh, 84px);
  }
  .hero-ctas {
    margin-top: clamp(18px, 3.6vh, 28px);
  }
}