/* Move in Fleurus — version commentée : commentaires/styles.css */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --jaune:  #ffdd0d;
  --noir:   #2a292e;
  --creme:  #fffbf0;
  --sable:  #f7dd7e;
  --bleu:   #88d0f1;
  --blanc:  #ffffff;

  --degrade-a:   #ffe330;
  --degrade-b:   #ffea63;
  --jaune-fonce: #ffd405;

  --ff-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;

  --fs-eyebrow:    clamp(16px, 23.06px - 0.7843vw, 20px);
  --fs-eyebrow-sm: clamp(12.8px, 25.51px - 1.4118vw, 20px);
  --fs-lead:       16px;
  --fs-body:       clamp(14px, 13.63px + 0.095vw, 15px);
  --fs-nav:        clamp(12px, 13.76px - 0.1961vw, 13px);
  --fs-scroll:     clamp(26px, 24.51px + 0.381vw, 30px);

  --fs-card-title: clamp(16px, 23.06px - 0.7843vw, 20px);
  --fs-card-text:  clamp(12px, 15.53px - 0.3922vw, 14px);
  --lh-card-text:  1.1429;
  --fs-num:        clamp(45px, 18.235px + 6.8627vw, 80px);
  --fs-display-s:  clamp(26.3px, 22.737px + 0.9137vw, 30.96px);
  --fs-display-l:  clamp(40px, 24.40px + 4.000vw, 82px);
  --fs-display-xl: clamp(62px, 61.69px + 0.0784vw, 62.4px);

  --titre-w:       clamp(350px, 81.13px + 68.9412vw, 701.6px);

  --lh-body:  1.5;
  --lh-lead:  1.2;
  --lh-tight: 1.05;
  --lh-xl:    .935;
  --ls-label: .06em;

  --content-max: 1440px;

  --px: calc(clamp(1152px, 100vw, 1440px) / 1440);
  --marge:     clamp(20px, -4.4706px + 6.2745vw, 52px);
  --gutter:    clamp(9.6px, 20.8941px - 1.2549vw, 16px);
  --section-y: clamp(20px,  5.14px + 3.810vw, 60px);
  --cols: 4;

  --logo-h:    clamp(44px, 40.9412px + 0.7843vw, 48px);
  --header-h:  clamp(72px, 29.1765px + 10.9804vw, 128px);

  --header-bar-pad: 8px;
  --header-bar-y: min(
      calc((var(--header-h) - var(--logo-h)) * .3),
      calc((var(--header-h) - var(--logo-h)) / 2 - var(--header-bar-pad))
  );

  --header-bar-r: calc((var(--header-h) - 2 * var(--header-bar-y)) * .2);
  --nav-gap:   clamp(20px, 17.03px + 0.762vw, 28px);
  --r-card: clamp(16px, 23.0588px - 0.7843vw, 20px);
  --r-pill: 999px;

  --carte-p:         clamp(16px, 23.0588px - 0.7843vw, 20px);
  --carte-pt:        clamp( 0px, 32.647px - 3.6275vw, 18.5px);
  --carte-pb:        clamp(16px, 26.412px - 1.1569vw, 21.9px);
  --carte-gap-titre: clamp(11px, -0.776px + 3.0196vw, 26.4px);
  --carte-gap-texte: clamp( 8.8px, 5.129px + 0.9412vw, 13.6px);
  --mobilite-pb:     clamp(38px, 30.9647px + 1.8039vw, 47.2px);

  --hero-pt:    clamp(52px, 50.1647px + 0.4706vw, 54.4px);
  --hero-pb:    clamp(48px, 25.9765px + 5.6471vw, 76.8px);
  --phone-w:    clamp(124px, 49.9765px + 18.9804vw, 220.8px);
  --phone-mt:   clamp(-45.6px, -21.6px - 2.6667vw, -32px);

  --gauche-mt:  0px;
  --dl-mt:      64px;
  --mots-mt:    68px;
  --intro-mt:   59px;
  --intro-gap:  clamp(47px, 41.9529px + 1.2941vw, 53.6px);

  --btn-dl-py: clamp(12px, 22.5882px - 1.1765vw, 18px);
  --btn-dl-px: clamp(25.6px, 36.8941px - 1.2549vw, 32px);

  --fid-pt:        clamp(39.3px, 11.08px + 7.2353vw, 76.2px);
  --fid-pb:        clamp(30px, 24.8px + 1.3333vw, 36.8px);
  --fid-titre-mt:  clamp(54.6px, 54.08px + 0.1333vw, 55.3px);
  --fid-cartes-mt: 27px;
  --fid-inset:     clamp(8px, 4.941px + 0.7843vw, 12px);
  --fid-media-r:   clamp(10px, 2.965px + 1.8039vw, 19.2px);
  --fid-media-h:   clamp(851px, 826.99px + 6.1569vw, 882.4px);
  --fid-zoom:      22%;
  --fid-photo-x:   47%;
  --fid-photo-y:   1.87%;
  --fid-photo-dx:  -10.34%;
  --fid-photo-dy:  -0.41%;

  --fs-titre-section: clamp(37.3px, 18.106px + 4.9216vw, 62.4px);
  --titre-texte-mt:   clamp(50.64px, 58.863px - 0.9137vw, 55.3px);

  --com-pt:       clamp(37.3px, 27.894px + 2.4118vw, 49.6px);
  --com-titre-mt: clamp(49.6px, 45.318px + 1.098vw, 55.2px);
  --com-dl-mt:    clamp(37.68px, 144.657px - 11.8863vw, 98.3px);
  --com-pb:       0px;
  --com-visuel-w:     min(232.023px + 91.2863vw, 1053.6px);
  --com-visuel-h:     calc(var(--com-visuel-w) * 923 / 1317);
  --com-visuel-bleed: min(73.335px + 15.2294vw, 210.4px);
  --com-visuel-mt:    52.3px;
  --com-dl-bas:       calc(var(--com-visuel-h) * 0.076079);

  --pil-pt:       clamp(32px, 37.294px - 0.5882vw, 35px);
  --pil-pb:       clamp(38.5px, 25.806px + 3.2549vw, 55.1px);
  --pil-picto:    clamp(28px, 24.941px + 0.7843vw, 32px);
  --pil-gap:      clamp(12px, 10.777px + 0.3137vw, 13.6px);
  --pil-texte-mt: clamp(14.8px, 7.52px + 1.8667vw, 24.32px);
  --pil-sep-e:    clamp(1px, 0.5411px + 0.11765vw, 1.6px);
  --pil-sep-l:    clamp(48px, 69.176px - 2.3529vw, 60px);

  --pil-stack:    74.5px;
  --pil-sep-mt:   37px;

  --esp-pt:       clamp(72.8px, 51.39px + 5.4902vw, 100.8px);
  --esp-texte-mt: clamp(35.32px, 44.108px - 0.9765vw, 40.3px);
  --esp-cta-mt:   clamp(19.8px, 49.62px - 3.3137vw, 36.7px);
  --mobilite-air: 160px;
  --illu-mt:      clamp(136px, 160.706px - 2.7451vw, 150px);
  --fs-esp-titre: clamp(33.2px, 11.9373vw - 13.36px, 94.08px);
  --fs-esp-texte: clamp(16px, 11.412px + 1.1765vw, 22px);
  --lh-esp-texte: clamp(19px, 14.871px + 1.0588vw, 24.4px);

  --fs-esp-btn:   clamp(14.4px, 18.106px - 0.4118vw, 16.5px);
  --btn-esp-py:   clamp(5.84px, 6.652px - 0.0902vw, 6.3px);
  --btn-esp-px:   clamp(29.6px, 40.894px - 1.2549vw, 36px);

  --part-h:           240px;
  --part-gap:         48px;
  --part-logo-h:      clamp(63px, 50px + 3.3333vw, 80px);
  --part-logo-dw:     clamp(47.6px, 37.78px + 2.5185vw, 60.5px);
  --part-logo-gap:    clamp(31px, 22.282px + 2.2353vw, 42.4px);

  --part-duree:       28s;

  --foot-marge:       clamp(20px, 14.902vw - 38.12px, 96px);
  --foot-logo-move:   clamp(44px, 37.71px + 1.6118vw, 52px);
  --foot-haut-gap:    28px;
  --foot-pt:          clamp(14.6px, 0.682px + 3.5686vw, 32.8px);
  --foot-pb:          clamp(36.8px, 33.252px + 0.9098vw, 41.44px);
  --foot-mentions-mt: clamp(51.52px, 54.308px - 0.3098vw, 53.1px);

  --bulle-d:          clamp(28.8px, 48.565px - 2.1961vw, 40px);
  --bulle-gap:        clamp(9.6px, 17.365px - 0.8627vw, 14px);
  --bulle-icone:      clamp(16px, 26.941px - 1.2157vw, 22.2px);

  --fs-foot:          12px;
  --fs-foot-poids:    400;
  --fs-foot-caps:     none;
  --fs-foot-ls:       normal;
  --lh-foot:          1.667;
  --foot-legal-gap:   clamp(16px, 12.902px + 0.7941vw, 22.5px);

  --page-pt:        clamp(48px, 35.76px + 3.1373vw, 64px);
  --page-pb:        clamp(64px, 39.53px + 6.2745vw, 96px);
  --fs-page-titre:  clamp(34px, 25.74px + 2.1176vw, 44.8px);
  --fs-page-texte:  clamp(15px, 16.76px - 0.1961vw, 16px);

  --trame-w: clamp(2800px, 4035.29px - 137.2549vw, 3500px);

  --t-reveal: cubic-bezier(.22, 1, .36, 1);

  --t-fast: 160ms ease;
  --t-header: 300ms ease-in-out;
  --t-link: 200ms ease-in-out;
  --t-cue:  1.5s;
  --t-menu: 620ms cubic-bezier(.77, 0, .18, 1);
}

@media (min-width: 900px) {
  :root { --cols: 12; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;

  overflow-x: clip;

  &.is-locked { overflow: hidden; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: min(100% - (var(--marge) * 2), calc(var(--content-max) - var(--marge) * 2));
  margin-inline: auto;
}

.display {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: .005em;
}

.display--s { font-size: var(--fs-display-s); }

.titre-section {
  font-size: var(--fs-titre-section);
  line-height: .897;
}

.eyebrow {
  font-family: var(--ff-text);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.souligne {
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: var(--souligne-bottom, 0);
    width: 0;
    height: .1rem;
    background-color: currentColor;
    transition: width var(--t-link);
  }

  &:hover::after,
  &:focus-visible::after {
    left: 0;
    width: 100%;
  }
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo {
  height: var(--logo-h);
  width: calc(var(--logo-h) * 1.19945);
  max-width: none;
  overflow: visible;
  color: var(--blanc);
  fill: currentColor;
  transition: color var(--t-link);
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: translate var(--t-header);

  &::before {
    content: "";
    position: absolute;
    inset-block: var(--header-bar-y);
    inset-inline: calc(var(--marge) / 2);
    max-width: calc(var(--content-max) - var(--marge));
    margin-inline: auto;
    z-index: -1;
    border-radius: var(--header-bar-r);
    background-color: transparent;
    transition: background-color var(--t-header);
  }

  &.header--pose::before { background-color: var(--jaune); }
  &.header--cache        { translate: 0 -100%; }
}

:is(.header__inner, .menu__top) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: var(--header-h);
}

.header__logo {
  flex: none;
  display: block;

  & .logo { color: var(--noir); }

  &:hover .logo,
  &:focus-visible .logo { color: var(--blanc); }
}

.nav { display: none; }

@media (min-width: 900px) {
  .nav { display: block; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-link {
  font-weight: 700;
  font-size: var(--fs-nav);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--noir);
  padding-block: 4px;
}

.burger {
  flex: none;
  display: grid;
  gap: 5px;
  padding: 8px;
  margin-right: -8px;

  & .burger__bar {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--noir);
    border-radius: 2px;
    transition: width var(--t-link);
  }

  &:hover .burger__bar:nth-child(2) { width: 16px; }
}

@media (min-width: 900px) {
  .burger { display: none; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--noir);
  color: var(--blanc);

  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--t-menu),
    visibility 0s linear var(--t-menu-out, 620ms);

  & .menu__logo:hover .logo,
  & .menu__logo:focus-visible .logo { color: var(--jaune); }

  &.is-open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--t-menu), visibility 0s;
  }
}

.menu__logo {
  flex: none;
  display: block;
}

.menu__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  color: var(--blanc);

  & svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  &:hover { color: var(--jaune); }
}

.menu__nav {
  display: flex;
  align-items: center;
  padding-bottom: 12vh;
}

.menu__list {
  display: grid;
  gap: clamp(6px, 1.5vw, 12px);
  text-align: left;
  width: 100%;

  & li {
    overflow: hidden;
  }

  & a {
    --souligne-bottom: .06em;
    font-size: clamp(38px, 12vw, 68px);
    line-height: 1.12;
    color: var(--blanc);

    opacity: 0;
    transform: translateY(105%);
    transition:
      opacity 420ms ease,
      transform 620ms cubic-bezier(.22, 1, .36, 1),
      color var(--t-link);

    &:hover { color: var(--jaune); }
  }
}

.menu.is-open .menu__list a {
  opacity: 1;
  transform: translateY(0);
}

.menu.is-open .menu__list li:nth-child(1) a { transition-delay: 260ms, 260ms, 0s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: 340ms, 340ms, 0s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: 420ms, 420ms, 0s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: 500ms, 500ms, 0s; }

.bande-jaune {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background-image:
    url("assets/images/carte-fleurus-jaune.svg"),
    linear-gradient(to top right, var(--degrade-a), var(--degrade-b));
  background-repeat: no-repeat, no-repeat;
  background-position: center 60%, center top;

  background-size:
    auto max(100%, calc(var(--trame-w) * 1.2)),
    100% 100%;
}

.hero {
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
}

.hero__titre {
  & img {
    width: min(100%, var(--titre-w));
    height: auto;
    margin-inline: auto;
  }
}

.hero__grille {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;

  & > *,
  & > .hero__gauche > * { grid-column: 1 / -1; }
}

.hero__gauche { display: contents; }

.hero__phone  { order: 1; }
.hero__dl     { order: 2; margin-top: var(--dl-mt); }
.hero__mots   { order: 3; margin-top: var(--mots-mt); }
.hero__intro  { order: 4; margin-top: var(--intro-mt); }

.hero__phone {
  margin-top: var(--phone-mt);
  display: grid;
  justify-items: center;

  & img {
    width: var(--phone-w);
    height: auto;

    filter: drop-shadow(-20px 20px 30px rgba(224, 175, 14, 0.7));
  }
}

.scroll-cue {
  display: none;
  gap: 16px;
  align-items: flex-start;

  --piste-h: 120px;
  --barre-h: 40px;
  --piste-c: rgb(255 255 255 / .4);
}

.scroll-cue__piste {
  position: relative;
  flex: none;
  width: 3px;
  height: var(--piste-h);
  overflow: hidden;
  background: linear-gradient(var(--piste-c), var(--piste-c)) center / 2px 100% no-repeat;
}

.scroll-cue__barre {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 3px;
  height: var(--barre-h);
  background: var(--blanc);
  border-radius: 2px;

  transform-origin: center;
  animation:
    scroll-cue-descente  var(--t-cue) cubic-bezier(.25, .65, .3, 1) infinite,
    scroll-cue-etirement var(--t-cue) cubic-bezier(.4, 0, .2, 1)    infinite;
}

@keyframes scroll-cue-descente {
  from { translate: 0 calc(-1 * var(--barre-h)); }
  to   { translate: 0 var(--piste-h); }
}

@keyframes scroll-cue-etirement {
  0%   { scale: 1 1;    }
  32%  { scale: 1 1.30; }
  100% { scale: 1 1;    }
}

.scroll-cue__texte {
  font-size: var(--fs-scroll);
  line-height: 1.1;
  color: var(--blanc);
}

.hero__intro {
  display: grid;
  gap: var(--intro-gap);

  scroll-margin-top: var(--mobilite-air);
}

.hero__dl {
  display: grid;
  justify-items: center;
  text-align: center;
}

.btn-dl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
  padding: var(--btn-dl-py) var(--btn-dl-px);
  border-radius: var(--r-pill);
  background: var(--blanc);

  font-family: var(--ff-text);
  font-weight: 700;
  font-size: var(--fs-eyebrow-sm);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);

  text-indent: calc(var(--ls-label) / 2);
  text-align: center;
  color: var(--noir);
  transition: color var(--t-link) 120ms;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--noir);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--t-link);
  }

  &:hover,
  &:focus-visible {
    color: var(--blanc);

    &::before { transform: scaleY(1); }
  }
}

.btn-dl--jaune {
  padding: var(--btn-esp-py) var(--btn-esp-px);
  background: var(--jaune);
  font-size: var(--fs-esp-btn);
}

.hero__mots {
  height: fit-content;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-xl);
  display: grid;
  justify-items: start;
}

.hero__mot--blanc { color: var(--blanc); }
.hero__mot--noir  { color: var(--noir); }

@media (min-width: 900px) {
  :root {
    --marge:    calc( 65 * var(--px));
    --gutter:   calc( 12 * var(--px));
    --header-h: calc(160 * var(--px));
    --logo-h:   calc( 60 * var(--px));
    --nav-gap:  calc( 28 * var(--px));

    --fs-nav:        max(12px, calc( 14   * var(--px)));
    --fs-eyebrow-sm: max(12px, calc( 16   * var(--px)));
    --fs-eyebrow:              calc( 20   * var(--px));
    --fs-lead:                 calc( 20   * var(--px));
    --fs-display-xl:           calc( 78   * var(--px));
    --lh-xl:                   .897;

    --titre-w:                 calc(877  * var(--px));

    --trame-w:                 calc(3500 * var(--px));

    --phone-w:   calc(276 * var(--px));
    --phone-mt:  calc(-57 * var(--px));
    --gauche-mt: calc( 29 * var(--px));

    --dl-mt:     calc( 64 * var(--px));
    --intro-mt:  calc(169 * var(--px));
    --mots-mt:   calc(182 * var(--px));
    --intro-gap: calc( 67 * var(--px));

    --btn-dl-py:    calc(15 * var(--px));
    --btn-dl-px:    calc(32 * var(--px));
  }

  .hero {
    padding-top:    calc(68 * var(--px));
    padding-bottom: calc(96 * var(--px));
  }

  .hero__grille { column-gap: calc(12 * var(--px)); }
  .hero__grille > *,
  .hero__grille > .hero__gauche > * { grid-column: auto; }

  .hero__gauche {
    display: grid;
    align-content: start;
    row-gap: 0;
    grid-column: 1 / 6;
    grid-row: 1;
    margin-top: var(--gauche-mt);
  }

  .hero__dl    { justify-items: start; text-align: left; }

  .hero__phone { grid-column: 5 /  9; grid-row: 1; order: 0; }
  .hero__mots  { grid-column: 9 / 13; grid-row: 1; order: 0; }

  .scroll-cue {
    display: flex;
    gap: calc(13 * var(--px));
    --piste-h: calc(150 * var(--px));
    --barre-h: calc( 34 * var(--px));
  }
}

.mobilite {
  padding-bottom: var(--mobilite-pb);
}

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gutter);
}

.carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--creme);
  border-radius: var(--r-card);
  padding: var(--carte-pt) var(--carte-p) var(--carte-pb);
}

.carte__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--jaune);
}

.carte__titre {
  margin-top: var(--carte-gap-titre);
  font-family: var(--ff-text);
  font-weight: 800;
  font-size: var(--fs-card-title);
  line-height: 1.1;
  color: var(--noir);
}

.carte__texte {
  margin-top: var(--carte-gap-texte);
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  color: var(--noir);

  & strong { font-weight: 700; }
}

.br-lg { display: none; }

@media (min-width: 900px) {
  :root {
    --carte-p:         calc(20 * var(--px));
    --carte-pt:        0px;
    --carte-pb:        calc(20 * var(--px));
    --r-card:          calc(20 * var(--px));
    --mobilite-pb:     calc(59 * var(--px));

    --fs-num:          calc(100 * var(--px));
    --fs-card-title:   calc( 20 * var(--px));

    --fs-card-text:    max(12px, calc(14 * var(--px)));

    --carte-gap-titre: calc(33 * var(--px));
    --carte-gap-texte: calc(17 * var(--px));
  }

  .cartes {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
  .carte { grid-column: span 3; }

  .br-lg { display: inline; }
}

.fidelite {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: var(--fid-pt);
  padding-bottom: var(--fid-pb);
  background: var(--bleu);
  color: var(--blanc);
}

.fidelite__photo {
  position: absolute;
  top: var(--fid-inset);
  left: var(--fid-inset);
  z-index: -1;
  width: calc(100% - 2 * var(--fid-inset));
  height: var(--fid-media-h);
  border-radius: var(--fid-media-r);
  overflow: clip;

  & img {
    position: absolute;
    left: var(--fid-photo-dx);
    top: var(--fid-photo-dy);
    width: calc(100% + var(--fid-zoom));
    height: calc(100% + var(--fid-zoom));
    max-width: none;
    object-fit: cover;
    object-position: var(--fid-photo-x) var(--fid-photo-y);
  }
}

.fidelite__intro {
  min-height: calc(var(--fid-inset) + var(--fid-media-h) - var(--fid-pt));
}

.fidelite__titre {
  margin-top: var(--fid-titre-mt);
}

.fidelite__texte {
  margin-top: var(--titre-texte-mt);

  & p + p { margin-top: calc(var(--lh-lead) * 1em); }
}

.fidelite__cartes {
  margin-top: var(--fid-cartes-mt);
}

@media (min-width: 900px) {
  :root {
    --fid-pt:       calc(95 * var(--px));
    --fid-pb:       calc(46 * var(--px));
    --fid-titre-mt: calc(69 * var(--px));
    --fid-inset:    calc(15 * var(--px));
    --fid-media-r:  calc(24 * var(--px));
    --fid-zoom:     10.2%;
    --fid-photo-x:  11.7%;
    --fid-photo-y:  71.15%;
    --fid-photo-dx: -1.19%;
    --fid-photo-dy: -7.2%;

    --fs-titre-section: calc( 78   * var(--px));
    --titre-texte-mt:   calc( 63.3 * var(--px));
    --lead-w:           calc(539   * var(--px));

    --fid-rab: max(0px, calc(100vw * 1133 / 1440 - 1133px));
  }

  .fidelite { --lead-w: calc(400 * var(--px)); }

  .fidelite__photo { height: calc(100% - 2 * var(--fid-inset)); }

  .fidelite__grille {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: calc(643 * var(--px) + var(--fid-rab)) auto;
    column-gap: calc(12 * var(--px));
    row-gap: 0;
  }

  .fidelite__intro { grid-column: 1 / 7;  grid-row: 1; min-height: 0; }

  .fidelite__texte { max-width: var(--lead-w); }

  .fidelite__cartes {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: calc(79 * var(--px));
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
}

.commercants {
  position: relative;
  z-index: 0;
  overflow: clip;
  padding-top: var(--com-pt);
  padding-bottom: var(--com-pb);
  background: var(--jaune);
  color: var(--blanc);
}

.commercants__titre { margin-top: var(--com-titre-mt); }

.commercants__texte {
  margin-top: var(--titre-texte-mt);
  color: var(--noir);
}

.commercants__visuel {
  position: relative;
  height: var(--com-visuel-h);
  margin-top: var(--com-visuel-mt);
  margin-inline: calc(-1 * var(--marge));
}

.commercants__visuel > img {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc(-1 * var(--com-visuel-bleed));
  width: var(--com-visuel-w);
  height: auto;
  max-width: none;
}

.commercants__dl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--com-dl-bas);
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  :root {
    --com-pt:       calc( 62   * var(--px));
    --com-titre-mt: calc( 69   * var(--px));
    --com-dl-mt:    calc( 47.1 * var(--px));
    --com-pb:       calc(264.8 * var(--px));
  }

  .commercants__texte { max-width: var(--lead-w); }

  .commercants__visuel { display: contents; }

  .commercants__visuel > img {
    top: calc(67.8 * var(--px));
    right: min(0px, calc(100vw - 1703 * var(--px)));
    width: calc(1317 * var(--px));
  }

  .commercants__dl {
    position: static;
    justify-content: flex-start;
    margin-top: var(--com-dl-mt);
  }
}

.piliers {
  padding-top: var(--pil-pt);
  padding-bottom: var(--pil-pb);
  background: var(--blanc);
}

.piliers__grille {
  display: grid;
  gap: 0;
  width: min(100%, calc(1440 * var(--px)));
  margin-inline: auto;
}

.pilier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  & + & {
    margin-top: var(--pil-stack);

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: calc(-1 * (var(--pil-sep-mt) + var(--pil-sep-e)));
      width: var(--pil-sep-l);
      height: var(--pil-sep-e);
      margin-left: calc(var(--pil-sep-l) / -2);
      background: var(--sable);
    }
  }
}

.pilier__titre {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: var(--sable);
}

.pilier__picto {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--pil-gap);
  width: var(--pil-picto);
  height: var(--pil-picto);
}

.pilier__texte {
  margin-top: var(--pil-texte-mt);
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  color: var(--noir);
}

@media (min-width: 900px) {
  :root {
    --pil-pt:       calc(40   * var(--px));
    --pil-pb:       calc(68.9 * var(--px));
    --pil-picto:    calc(40   * var(--px));
    --pil-gap:      calc(17   * var(--px));
    --pil-texte-mt: calc(30.4 * var(--px));
    --pil-sep-e:    calc( 2   * var(--px));
    --pil-sep-h:    calc(60   * var(--px));
    --pil-sep-top:  calc(35   * var(--px));
    --fs-display-s: calc(38.7 * var(--px));
  }

  .piliers__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pilier + .pilier {
    margin-top: 0;

    &::before {
      left: calc(var(--pil-sep-e) / -2);
      top: var(--pil-sep-top);
      width: var(--pil-sep-e);
      height: var(--pil-sep-h);
      margin-left: 0;
    }
  }
}

.savoir-plus {
  padding-top: var(--esp-pt);
  background: var(--creme);
  text-align: center;
}

.savoir-plus__illu {
  overflow: clip;
  margin-top: var(--illu-mt);

  margin-bottom: -1px;
  aspect-ratio: 859.11 / 217.81;

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.savoir-plus__titre {
  font-size: var(--fs-esp-titre);
  line-height: 1;
  color: var(--jaune);
}

.savoir-plus__texte {
  margin-top: var(--esp-texte-mt);
  margin-inline: auto;
  font-size: var(--fs-esp-texte);
  line-height: var(--lh-esp-texte);
  color: var(--noir);
}

.savoir-plus__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-cta-mt);
}

@media (min-width: 900px) {
  :root {
    --esp-pt:       calc(126   * var(--px));
    --esp-texte-mt: calc( 44.15 * var(--px));
    --esp-cta-mt:   calc( 24.75 * var(--px));
    --mobilite-air: calc(200   * var(--px));
    --illu-mt:      calc(170   * var(--px));
    --fs-esp-titre: calc(117.6 * var(--px));
    --fs-esp-texte: calc( 27.5 * var(--px));
    --lh-esp-texte: calc( 30.5 * var(--px));
    --fs-esp-btn:   calc( 18   * var(--px));
    --btn-esp-py:   calc(  7.3 * var(--px));
    --btn-esp-px:   calc( 37   * var(--px));
  }

  .savoir-plus__texte { max-width: calc(649 * var(--px)); }
}

.partenaires {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--part-gap);
  min-height: var(--part-h);

  background: var(--creme);
  color: var(--sable);
  text-align: center;
}

.marquee {
  display: flex;
  overflow: clip;
}

.marquee__piste {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--part-logo-gap);
  min-width: 100%;
  padding-inline: calc(var(--part-logo-gap) / 2);

  animation-duration: var(--part-duree);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee--anime .marquee__piste { animation-name: defile; }

.marquee__logo {
  display: block;
  height: var(--part-logo-h);
  width: calc(var(--part-logo-h) * var(--part-logo-ratio));
  color: var(--noir);
  background-color: currentColor;
  -webkit-mask: var(--part-logo-src) no-repeat center / contain;
  mask: var(--part-logo-src) no-repeat center / contain;
  transition: color var(--t-fast);

  &[href]:hover,
  &[href]:focus-visible { color: var(--jaune); }

  &:focus-visible { outline-color: var(--noir); }
}

.partenaires__dw .marquee__logo {
  height: var(--part-logo-dw);
  width: calc(var(--part-logo-dw) * var(--part-logo-ratio));
}

.marquee__logo--fleurus {
  --part-logo-src: url(assets/logos/logo-ville-de-fleurus-noir.svg);
  --part-logo-ratio: calc(74.82 / 51.6);
}

.marquee__logo--wallonie {
  --part-logo-src: url(assets/logos/logo-wallonie-noir.svg);
  --part-logo-ratio: calc(39.87 / 51.6);
}

.marquee__logo--shop-in {
  --part-logo-src: url(assets/logos/logo-shop-in-noir.svg);
  --part-logo-ratio: calc(74.8 / 51.6);
}

.marquee__logo--dw {
  --part-logo-src: url(assets/logos/logo-digitalwallonia-noir.svg);
  --part-logo-ratio: calc(156.46 / 39.01);
}

.marquee:hover .marquee__piste,
.marquee:focus-within .marquee__piste { animation-play-state: paused; }

@keyframes defile {
  from { translate: 0 0; }
  to   { translate: -100% 0; }
}

@media (min-width: 900px) {
  :root {
    --part-h:   calc(300 * var(--px));
    --part-gap: calc( 60 * var(--px));
    --part-logo-h:   calc(100 * var(--px));
    --part-logo-dw:  calc( 75.6 * var(--px));
    --part-logo-gap: calc( 53 * var(--px));
  }
}

.footer {
  padding-top: var(--foot-pt);
  padding-bottom: var(--foot-pb);
  background: var(--noir);
  color: var(--blanc);
}

.footer__inner {
  width: min(100% - var(--foot-marge) * 2, calc(1200 * var(--px)));
  margin-inline: auto;
}

.footer__haut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--foot-haut-gap);
}

.footer__logo { --logo-h: var(--foot-logo-move); }

.footer__reseaux {
  display: flex;
  gap: var(--bulle-gap);
}

.bulle {
  display: grid;
  place-items: center;
  width: var(--bulle-d);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--noir);
  transition: background-color var(--t-fast), color var(--t-fast);

  & svg {
    width: var(--bulle-icone);
    height: var(--bulle-icone);
    fill: currentColor;
  }

  &:hover,
  &:focus-visible {
    background: var(--jaune);
    color: var(--blanc);
  }
}

.footer__mentions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px var(--foot-legal-gap);
  margin-top: var(--foot-mentions-mt);
  font-size: var(--fs-foot);
  font-weight: var(--fs-foot-poids);
  line-height: var(--lh-foot);
  text-transform: var(--fs-foot-caps);
  letter-spacing: var(--fs-foot-ls);
}

.footer__legal {
  display: flex;
  gap: var(--foot-legal-gap);
}

@media (min-width: 900px) {
  :root {
    --foot-marge:       calc(120  * var(--px));
    --foot-logo-move:   calc( 65  * var(--px));
    --foot-haut-gap:    0px;
    --foot-pt:          calc( 41  * var(--px));
    --foot-pb:          calc( 51.8 * var(--px));
    --foot-mentions-mt: calc( 64.4 * var(--px));
    --bulle-d:          calc( 36    * var(--px));
    --bulle-gap:        calc( 12    * var(--px));
    --bulle-icone:      calc( 20    * var(--px));

    --page-pt:       calc(80 * var(--px));
    --page-pb:       calc(120 * var(--px));
    --fs-page-titre: calc(56 * var(--px));
    --fs-page-texte: max(15px, calc(17 * var(--px)));
    --foot-legal-gap:   calc( 25  * var(--px));
    --fs-foot:          max(12px, calc(14 * var(--px)));
    --fs-foot-poids:    700;
    --fs-foot-caps:     uppercase;
    --fs-foot-ls:       .04em;
    --lh-foot:          1.3;
  }

  .footer__haut {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer__mentions {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js-anim :is(.apparait, .carte) {
    opacity: 0;
    translate: 0 48px;
    transition: opacity 800ms var(--t-reveal), translate 800ms var(--t-reveal);
  }

  .js-anim .lignes > span > span {
    translate: 0 calc(100% + .2em);
    transition: translate 800ms var(--t-reveal);
  }

  .js-anim :is(.apparait, .carte).est-visible {
    opacity: 1;
    translate: 0 0;
  }

  .js-anim .lignes.est-visible > span > span { translate: 0 0; }

  .js-anim .carte:nth-child(2) { transition-delay: 120ms; }
  .js-anim .carte:nth-child(3) { transition-delay: 240ms; }
  .js-anim .carte:nth-child(4) { transition-delay: 360ms; }
  .js-anim .lignes > span:nth-child(2) > span { transition-delay: 120ms; }
  .js-anim .lignes > span:nth-child(3) > span { transition-delay: 240ms; }
}

.lignes {
  display: flex;
  flex-direction: column;
}

.lignes > span {
  display: block;
  overflow: clip;
  padding-block: .1em;
  margin-block: -.1em;
}

.lignes > span > span { display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--noir);
  color: var(--blanc);
  padding: 12px 18px;

  &:focus {
    left: 0;
  }
}

.fond-creme { background: var(--creme); }

.page {
  padding-top: var(--page-pt);
  padding-bottom: var(--page-pb);
  color: var(--noir);
}

.page__titre {
  font-size: var(--fs-page-titre);
  line-height: 1;
}

.prose {
  max-width: 68ch;
  font-size: var(--fs-page-texte);
  line-height: 1.65;
  margin-top: 1.9em;

  & > * + * { margin-top: 1.15em; }

  & h2 {
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: 1.35em;
    line-height: 1.25;
    margin-top: 2.4em;
  }

  & h3 {
    font-family: var(--ff-text);
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.3;
    margin-top: 1.9em;
  }

  & ul {
    padding-left: 1.3em;
    list-style: disc;
  }

  & li + li { margin-top: .45em; }
  & li::marker { color: var(--jaune-fonce); }

  & a {
    text-decoration: underline;
    text-underline-offset: .2em;
  }

  & strong { font-weight: 700; }

  & .prose__maj {
    margin-top: 2.4em;
    padding-top: 1.15em;
    border-top: 1px solid rgb(42 41 46 / .2);
    font-size: .9em;
  }

  & > :first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-cue__barre {
    animation: none !important;
    translate: none;
    scale: none;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}