/*
 * Sections — layout of the landing page.
 * Mobile-first from the 390 px maquette (30:342, y in comments = Figma y), then desktop
 * from the 1728 px maquette (30:86) at ≥ 1024 px. Spacing values are Figma distances.
 */

/* =========================== Header (Nav-hover) =========================== */
.site-header {
  /* Mobile : barre collante (30:439 « sticky top-0 »), sans fond dans la maquette. */
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--m));
  padding: calc(24 * var(--m));
}

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

.nav__logo img {
  width: calc(89.02 * var(--m));
  height: calc(32 * var(--m));
}

.nav__menu,
.nav__actions {
  display: none;
}

@media (min-width: 1024px) {
  .site-header {
    position: relative;
    padding: calc(40 * var(--u)) calc(73 * var(--u));
    border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .nav {
    height: calc(57 * var(--u));
    padding: 0;
    gap: 0;
  }

  .nav__logo {
    width: calc(271 * var(--u));
  }

  .nav__logo img {
    width: calc(111.275 * var(--u));
    height: calc(40 * var(--u));
  }

  .nav__menu {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: calc(80 * var(--u));
    padding: 0 calc(80 * var(--u));
    border-radius: calc(60 * var(--u));
    background: var(--c-cream);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: calc(60 * var(--u));
  }

  .menu-btn {
    display: none;
  }
}

/* ================================ Hero ================================ */
.hero {
  position: relative;
  min-height: calc(656 * var(--m));            /* 95 → 751 */
  padding: calc(100 * var(--m)) calc(32 * var(--m)) 0; /* slogan y = 195 */
}

.hero__numbers .num--1 {
  left: calc(99 * var(--m));
  top: calc(67 * var(--m));
}

.hero__numbers .num--2 {
  left: calc(229 * var(--m));
  top: calc(117 * var(--m));
}

.hero__numbers .num--3 {
  left: calc(54 * var(--m));
  top: calc(152 * var(--m));
}

.tag--1 {
  left: calc(30 * var(--m));
  top: calc(250 * var(--m));
}

.tag--2 {
  left: calc(44 * var(--m));
  top: calc(300 * var(--m));
}

.tag--3 {
  left: calc(24 * var(--m));
  top: calc(330 * var(--m));
}

/*
 * Slogan « Un monde de … » — Animation header 30:232 / texte mobile 30:354.
 * Mobile : « Un monde » sur la 1re ligne, puis « de » + mot animé sur la 2e (« de solutions. »).
 * Desktop : une seule ligne. 0.256em = chasse de l'espace d'Unbounded Medium (256/1000).
 */
.tagline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: calc(326 * var(--m));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(28 * var(--m));
  line-height: 1.2;
  color: var(--c-deep-black);
}

.tagline__lead {
  flex: 0 0 100%;
  white-space: nowrap;
}

.tagline__de {
  flex: none;
  white-space: nowrap;
}

.tagline__window {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  overflow: clip visible;                     /* coupe à droite sans rogner accents ni jambages */
  padding-left: 0.256em;
}

.tagline__track {
  display: flex;
  gap: 0.333em;
  width: max-content;
  white-space: nowrap;
  transform: translateX(var(--tagline-shift, 0));
  transition: transform 700ms var(--ease-out);
}

.tagline__word {
  color: var(--c-cream-c50);
  transition: color 500ms ease;
}

.tagline__dot {
  color: var(--c-cream);
  transition: color 500ms ease;
}

.tagline.is-final .tagline__dot {
  color: inherit;
}

.tagline__word.is-active {
  color: var(--c-deep-black);
}

/* Maquette mobile (état statique) : « Un monde / de solutions. » */
.no-js .tagline__word:not(.tagline__word--last) {
  display: none;
}

.no-js .tagline__word--last,
.no-js .tagline__dot {
  color: inherit;
}

.hero__lead {
  width: calc(318 * var(--m));
  margin-top: calc(54.8 * var(--m));
  font-family: var(--font-text);
  font-size: calc(20 * var(--m));
  line-height: 1.4;
  color: var(--c-blue-b70);
}

.hero__lead strong {
  font-weight: 700;
}

@media (min-width: 1024px) {
  .hero {
    min-height: calc(798 * var(--u));        /* 137 → 935 */
    padding: calc(201 * var(--u)) 0 0 calc(291 * var(--u));
  }

  .hero__numbers .num--1 {
    left: calc(374 * var(--u));
    top: calc(142 * var(--u));
  }

  .hero__numbers .num--2 {
    left: calc(789 * var(--u));
    top: calc(142 * var(--u));
  }

  .hero__numbers .num--3 {
    left: calc(1090 * var(--u));
    top: calc(142 * var(--u));
  }

  .tag--1 {
    left: calc(300 * var(--u));
    top: calc(410 * var(--u));
  }

  .tag--2 {
    left: calc(560 * var(--u));
    top: calc(440 * var(--u));
  }

  .tag--3 {
    left: calc(900 * var(--u));
    top: calc(410 * var(--u));
  }

  .tagline {
    flex-wrap: nowrap;
    width: calc(1441 * var(--u));
    margin-left: calc(-4 * var(--u));
    font-size: calc(60 * var(--u));
    line-height: 1.1;
    color: var(--c-dark);
  }

  .tagline__lead {
    flex: none;
  }

  .tagline__de {
    margin-left: 0.256em;
  }

  .tagline__window {
    padding-left: calc(20 * var(--u));        /* « développement » à x = 596 (Figma) */
  }

  .tagline__track {
    gap: calc(20 * var(--u));
  }

  .tagline__word.is-active {
    color: var(--c-dark);
  }

  /* Maquette desktop (état statique) : tous les mots en Cream/C50. */
  .no-js .tagline__word:not(.tagline__word--last) {
    display: inline;
  }

  .no-js .tagline__word--last {
    color: var(--c-cream-c50);
  }

  .no-js .tagline__dot {
    color: var(--c-cream);
  }

  .hero__lead {
    width: calc(1146 * var(--u));
    margin-top: calc(60 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.2;
  }
}

/* ============================== Expertises ============================== */
.expertises .eyebrow {
  margin-left: calc(40 * var(--m));          /* y = 751 */
}

.bento {
  display: grid;
  grid-template-columns: calc(183 * var(--m)) calc(183 * var(--m));
  grid-template-rows: calc(240 * var(--m)) calc(283 * var(--m)) calc(248 * var(--m)) calc(308 * var(--m));
  grid-template-areas:
    "s1 pro"
    "team team"
    "s3 s2"
    "nov nov";
  column-gap: calc(8 * var(--m));
  margin-top: calc(23.8 * var(--m));          /* y = 794 */
  padding-left: calc(8 * var(--m));
}

.bento__cell--svc1 {
  grid-area: s1;
}

.bento__cell--proactifs {
  grid-area: pro;
}

.bento__cell--team {
  grid-area: team;
  height: calc(300 * var(--m));
  margin-top: calc(-17 * var(--m));          /* y = 1017 */
}

.bento__cell--svc3 {
  grid-area: s3;
  margin-top: calc(8 * var(--m));            /* y = 1325 */
}

.bento__cell--svc2 {
  grid-area: s2;
  margin-top: calc(8 * var(--m));
}

.bento__cell--novateurs {
  grid-area: nov;
  margin-top: calc(8 * var(--m));            /* y = 1573 */
}

/* Photo « Team » + mot défilant (note 30:561) */
.team {
  overflow: hidden;
  border-radius: calc(300 * var(--m)) calc(300 * var(--m)) calc(20 * var(--m)) calc(20 * var(--m));
  background: var(--c-dark);
}

.team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team__marquee {
  --word-gap: calc(23.8 * var(--m));
  --word-period: calc(316 * var(--m));
  position: absolute;
  left: calc(102 * var(--m) - 2 * var(--word-period));
  top: calc(230.27 * var(--m));
  display: flex;
  gap: var(--word-gap);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(40 * var(--m));
  line-height: 1;
  color: var(--c-white);
  animation: marquee-right 11s linear infinite;
}

@keyframes marquee-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--word-period));
  }
}

/* Cercle « proactifs » (note 30:557 : rotation lente et constante) */
.proactifs {
  width: calc(240 * var(--m));
  height: calc(240 * var(--m));
  border-radius: 50%;
  background: var(--c-white);
}

/*
 * Mobile (30:395) : groupe 139.23 × 163.47 en (231.27, 836.56), tourné de 180° autour de SON centre C.
 * La rotation continue se fait autour du centre O du cercle (319, 914) → origine = O.
 * Avec l'origine en O : rotation de 180° autour de C = translate(2·(C − O)) rotate(180deg),
 * soit C − O = (69.61 − 87.73, 81.73 − 77.44). La propriété `rotate` (animée) s'applique avant `transform`.
 */
.proactifs__word {
  position: absolute;
  left: calc(32.27 * var(--m));
  top: calc(42.56 * var(--m));
  width: calc(139.23 * var(--m));
  height: calc(163.47 * var(--m));
  transform-origin: calc(87.73 * var(--m)) calc(77.44 * var(--m));
  transform: translate(calc(-36.23 * var(--m)), calc(8.59 * var(--m))) rotate(180deg);
  animation: turn 48s linear infinite;
}

@keyframes turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

/* Carte « novateurs » */
.novateurs img,
.novateurs svg {
  width: 100%;
  height: 100%;
}

.novateurs__text {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--c-pear);
}

.novateurs__text--d {
  font-size: 80px;
}

.novateurs__text--m {
  font-size: 52px;
}

@media (min-width: 1024px) {
  .expertises {
    padding-left: calc(73 * var(--u));
  }

  .expertises .eyebrow {
    margin-left: 0;                          /* y = 935, x = 73 */
  }

  .bento {
    grid-template-columns: calc(490 * var(--u)) calc(635 * var(--u)) calc(417 * var(--u));
    grid-template-rows:
      calc(400 * var(--u)) calc(20 * var(--u)) calc(180 * var(--u)) calc(20 * var(--u))
      calc(100 * var(--u)) calc(20 * var(--u)) calc(480 * var(--u));
    grid-template-areas:
      "s1  team pro"
      "s1  team ."
      "s1  team s3"
      ".   team s3"
      "nov team s3"
      "nov .    s3"
      "nov s2   s3";
    column-gap: calc(20 * var(--u));
    margin-top: calc(40.2 * var(--u));        /* y = 1004 */
    padding-left: 0;
  }

  .bento__cell--team,
  .bento__cell--svc3,
  .bento__cell--svc2,
  .bento__cell--novateurs {
    height: auto;
    margin-top: 0;
  }

  .bento__cell--svc1 {
    left: calc(3.11 * var(--u));              /* Service 1 (30:137) à x = 3.11 dans le groupe 30:98 */
  }

  .team {
    border-radius: calc(300 * var(--u)) calc(300 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
  }

  .team__marquee {
    --word-gap: calc(22.5 * var(--u));
    --word-period: calc(607 * var(--u));
    left: calc(68 * var(--u) - 2 * var(--word-period));
    top: calc(558 * var(--u));
    font-size: calc(80 * var(--u));
    line-height: 1.4;
  }

  .proactifs {
    width: 100%;
    height: 100%;
    border-radius: calc(400 * var(--u));
  }

  .proactifs__word {
    left: calc(119 * var(--u));
    top: calc(57 * var(--u));
    width: calc(241.91 * var(--u));
    height: calc(272.45 * var(--u));
    transform: none;
    transform-origin: calc(92.52 * var(--u)) calc(143.92 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .team__marquee,
  .proactifs__word {
    animation: none;
  }
}

/* ============================== Services ============================== */
.services {
  padding-top: calc(200 * var(--m));          /* y = 2073 */
}

.services .eyebrow {
  margin-left: calc(40 * var(--m));
}

.carousel__viewport {
  margin-top: calc(23.8 * var(--m));          /* y = 2116 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__viewport:focus-visible {
  outline-offset: -3px;
}

.carousel__track {
  display: flex;
  gap: calc(20 * var(--m));
  width: max-content;
  margin-left: calc(-24 * var(--m));          /* x = -24 (sans JS) */
}

.js .carousel__track {
  margin-left: 0;
}

.carousel__dots {
  display: flex;
  gap: calc(16 * var(--m));
  margin: calc(24 * var(--m)) 0 0 calc(40 * var(--m)); /* y = 2184 */
}

@media (min-width: 1024px) {
  .services {
    padding-top: calc(431 * var(--u));        /* 2224 → 2655 */
  }

  .services .eyebrow {
    margin-left: calc(291 * var(--u));
  }

  .carousel__viewport {
    margin-top: calc(40.2 * var(--u));        /* y = 2724 */
  }

  .carousel__track {
    gap: calc(80 * var(--u));
    margin-left: calc(23 * var(--u));
  }

  .js .carousel__track {
    margin-left: 0;
  }

  .carousel__dots {
    gap: calc(12 * var(--u));
    margin: calc(80 * var(--u)) 0 0 calc(291 * var(--u)); /* y = 2914 */
  }
}

/* =============================== À propos =============================== */
.about {
  position: relative;
  padding-top: calc(200 * var(--m));          /* cercle y = 2394 */
}

.about__circle {
  --slide: 0px;
  width: calc(277 * var(--m));
  height: calc(277 * var(--m));
  margin-left: calc(104 * var(--m));
  overflow: hidden;
  border-radius: 50%;
  transform: translate3d(0, var(--slide), 0);
}

.about__circle picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Parallaxe : l'agrandissement 1.14 (marge 7 % par côté) couvre le décalage de ±5 % sans montrer le bord de l'export. */
.about__circle img {
  width: 100%;
  height: 100%;
  transform: var(--parallax, none);
}

.about .eyebrow {
  margin: calc(200 * var(--m)) 0 0 calc(40 * var(--m)); /* y = 2871 */
}

.about__block {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--m));
}

.about__block--1 {
  width: calc(247 * var(--m));
  margin: calc(23.8 * var(--m)) 0 0 calc(40 * var(--m)); /* y = 2914 */
}

.about__block--2 {
  width: calc(246 * var(--m));
  margin: calc(120 * var(--m)) 0 0 calc(104 * var(--m)); /* y = 3401 */
}

.about__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--m));
  line-height: 1.2;
  color: var(--c-deep-black);
}

.about__text {
  font-family: var(--font-text);
  font-size: calc(16 * var(--m));
  line-height: 1.4;
  color: var(--c-blue-b70);
}

.about__text strong {
  font-weight: 700;
}

/* Collage (note 30:573 : formes qui se poussent doucement) */
.collage {
  position: relative;
  z-index: 2;
  width: calc(390 * var(--m));
  height: calc(655 * var(--m));
  margin-top: calc(200 * var(--m));           /* y = 3939 */
}

.collage img {
  position: absolute;
  height: auto;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.collage__code {
  z-index: 2;
  left: calc(8 * var(--m));
  top: 0;
  width: calc(246 * var(--m));
  animation-name: push-a;
}

.collage__phones {
  z-index: 3;
  left: 0;
  top: calc(147.15 * var(--m));
  width: calc(390 * var(--m));
  animation-name: push-b;
}

.collage__circuit {
  z-index: 1;
  left: calc(136 * var(--m));
  top: calc(449 * var(--m));
  width: calc(246 * var(--m));
  animation-name: push-c;
}

@keyframes push-a {
  to {
    transform: translate(1.2%, 1.6%) rotate(0.6deg);
  }
}

@keyframes push-b {
  to {
    transform: translate(-0.8%, -1.4%) rotate(-0.4deg);
  }
}

@keyframes push-c {
  to {
    transform: translate(-1.6%, -1.8%);
  }
}

@media (min-width: 1024px) {
  .about {
    padding: calc(657 * var(--u)) calc(291 * var(--u)) 0; /* 2934 → 3591 */
  }

  .about__circle {
    position: absolute;
    left: calc(1019 * var(--u));
    top: calc(397 * var(--u));                /* y = 3331 */
    width: calc(563 * var(--u));
    height: calc(563 * var(--u));
    margin: 0;
  }

  .about .eyebrow {
    margin: 0;
  }

  .about__block {
    gap: calc(40 * var(--u));
  }

  .about__block--1 {
    width: calc(563 * var(--u));
    margin: calc(60.2 * var(--u)) 0 0;        /* y = 3680 */
  }

  .about__block--2 {
    width: calc(563 * var(--u));
    margin: calc(200 * var(--u)) 0 0 calc(583 * var(--u)); /* y = 4238, x = 874 */
  }

  .about__title {
    font-size: calc(36 * var(--u));
    line-height: 1.1;
  }

  .about__text {
    font-size: calc(24 * var(--u));
  }

  .collage {
    width: calc(1437 * var(--u));
    height: calc(1280 * var(--u));
    margin: calc(-8 * var(--u)) 0 0 calc(-146 * var(--u)); /* (145, 4548) */
  }

  .collage__code {
    z-index: 3;
    left: 0;
    top: 0;
    width: calc(563 * var(--u));
  }

  .collage__phones {
    z-index: 1;
    left: calc(74 * var(--u));
    top: calc(424 * var(--u));
    width: calc(1072 * var(--u));
  }

  .collage__circuit {
    z-index: 2;
    left: calc(948 * var(--u));
    top: calc(791 * var(--u));
    width: calc(489 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .collage img {
    animation: none;
  }
}

/* ============================ Bande jaune (valeurs) ============================ */
.values {
  position: relative;
  z-index: 1;
  height: calc(845 * var(--m));
  margin-top: calc(-113 * var(--m));          /* y = 4481 */
  padding: calc(205 * var(--m)) calc(40 * var(--m)) 0;
  background: url("../assets/figma/mobile/yellow-subtract.svg") no-repeat 0 0 / 100% 100%;
}

.values__content {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--m));
  width: calc(310 * var(--m));
}

.values__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--m));
  line-height: 1.2;
  letter-spacing: calc(0.48 * var(--m));
  color: var(--c-indigo);
}

.values__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--m));
  line-height: 1.4;
  color: var(--c-deep-black);
}

.values__brand {
  font-weight: inherit;                       /* mobile : « Actif » non graissé (30:434) */
}

.values__words {
  position: absolute;
  left: calc(-75 * var(--m));
  top: calc(721 * var(--m));                  /* y = 5202 */
  display: flex;
  gap: calc(20 * var(--m));
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(40 * var(--m));
  line-height: 1.1;
  color: var(--c-cream);
}

@media (min-width: 1024px) {
  .values {
    height: calc(1317 * var(--u));
    margin-top: calc(-178 * var(--u));        /* y = 5650 */
    padding: calc(338 * var(--u)) 0 0 calc(364 * var(--u)); /* texte y = 5988 */
    background-image: url("../assets/figma/yellow-subtract.svg");
  }

  .values__content {
    gap: calc(40 * var(--u));
    width: calc(1000 * var(--u));
  }

  .values__title {
    font-size: calc(32 * var(--u));
    letter-spacing: calc(0.64 * var(--u));
  }

  .values__text {
    font-size: calc(40 * var(--u));
    color: var(--c-dark);
  }

  .values__brand {
    font-weight: 600;
  }

  .values__words {
    left: calc(-236 * var(--u));
    top: calc(1007 * var(--u));               /* y = 6657 */
    gap: calc(64 * var(--u));
    font-size: calc(120 * var(--u));
  }
}

/* ============================ Contact (collant) ============================ */
.contact-track {
  position: relative;
  margin-top: calc(200 * var(--m));           /* y = 5526 */
}

.contact {
  /*
   * Notes 30:500 et 30:349 : le formulaire colle, le pied de page glisse par-dessus.
   * Hauteur Figma = hauteur de la fenêtre de conception (844 mobile, 1117 desktop) : la section
   * remplit l'écran et ne descend jamais sous la hauteur de la maquette.
   */
  position: sticky;
  top: min(0px, calc(100svh - var(--contact-h, 0px)));
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(100svh, calc(844 * var(--m)));
  padding: calc(120 * var(--m)) calc(40 * var(--m));
  border-radius: calc(80 * var(--m)) calc(80 * var(--m)) 0 0;
  background: var(--c-cream);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--m));
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--m));
  line-height: 1.1;
  color: var(--c-dark);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--m));
}

.contact-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(32 * var(--m));
}

.contact-form__status {
  align-self: flex-end;
  max-width: 100%;
  margin-top: calc(8 * var(--m));
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--c-cream-c40);
  font-family: var(--font-text);
  font-size: max(14px, calc(14 * var(--m)));
  line-height: 1.4;
  color: var(--c-dark);
}

.contact-track__spacer {
  height: calc((200 + 749) * var(--m));       /* 6370 → 7319 */
}

@media (min-width: 1024px) {
  .contact-track {
    margin-top: calc(200 * var(--u));         /* y = 7167 */
  }

  .contact {
    justify-content: flex-end;
    min-height: max(100svh, calc(1117 * var(--u)));
    padding: calc(120 * var(--u)) calc(291 * var(--u));
    border-radius: calc(80 * var(--u)) calc(80 * var(--u)) 0 0;
  }

  .contact__inner {
    gap: calc(40 * var(--u));
  }

  .contact__title {
    font-size: calc(60 * var(--u));
  }

  .contact-form {
    gap: calc(20 * var(--u));
  }

  .contact-form__actions {
    margin-top: calc(20 * var(--u));
  }

  .contact-form__status {
    margin-top: 0;
    font-size: max(14px, calc(20 * var(--u)));
  }

  .contact-track__spacer {
    height: calc((443 + 964) * var(--u));     /* 8284 → 9691 */
  }
}

/* ================================ Footer ================================ */
.site-footer {
  position: relative;
  z-index: 2;
  height: calc(749 * var(--m));
  margin-top: calc(-749 * var(--m));          /* y = 6570 */
  border-radius: calc(40 * var(--m)) calc(40 * var(--m)) 0 0;
  background: var(--c-dark);
  color: var(--c-cream);
}

.footer__rings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.footer__ring {
  position: absolute;
  height: auto;
}

.footer__ring--m {
  left: calc(60 * var(--m));
  top: calc(132 * var(--m));
  width: calc(452 * var(--m));
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: calc(120 * var(--m)) calc(24 * var(--m)) calc(40 * var(--m));
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--m));
}

.footer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--m));
  line-height: normal;
  color: var(--c-cream);
}

.footer__lines {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--m));
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(16 * var(--m));
  line-height: normal;
}

.footer__lines a {
  text-decoration: underline;
  text-underline-position: from-font;
}

.footer__lines a:focus-visible,
.lang--footer .lang__btn:focus-visible {
  outline-color: var(--c-pear);
}

.lang--footer {
  order: 3;
}

.footer__logo {
  order: 2;
  width: calc(342 * var(--m));
  height: auto;
}

.footer__legal {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--m));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(11px, calc(12 * var(--m)));
  line-height: normal;
  letter-spacing: calc(0.24 * var(--m));
  color: var(--c-blue-b50);
}

.footer__year {
  order: 2;
}

.footer__credit {
  order: 3;
}

/* Cercles « cible » autour du point du i (note 30:504). */
.footer__ring {
  transform-origin: 50% 50%;
}

.site-footer.rings-armed .footer__ring {
  opacity: 0;
  transform: scale(0.15);
}

.site-footer.rings-armed.is-visible .footer__ring {
  opacity: 1;
  transform: none;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease;
}

.site-footer.rings-armed.is-visible .footer__ring--lg {
  transition-delay: 140ms;
}

@media (min-width: 1024px) {
  .site-footer {
    height: calc(964 * var(--u));
    margin-top: calc(-964 * var(--u));        /* y = 8727 */
    border-radius: calc(80 * var(--u)) calc(80 * var(--u)) 0 0;
  }

  .footer__rings {
    inset: calc(-56 * var(--u)) 0 0;          /* cadre 30:155 : y = 8671 */
    border-radius: 0;
  }

  .footer__ring--lg {
    left: calc(713 * var(--u));
    top: 0;
    width: calc(1066 * var(--u));
  }

  .footer__ring--sm {
    left: calc(960 * var(--u));
    top: calc(247 * var(--u));
    width: calc(572 * var(--u));
  }

  .footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "contact lang"
      "logo    logo"
      "legal   legal";
    align-items: start;
    padding: calc(140 * var(--u)) calc(146 * var(--u)) calc(40 * var(--u));
  }

  .footer__contact {
    grid-area: contact;
    gap: calc(40 * var(--u));
  }

  .footer__title {
    font-size: calc(30 * var(--u));
  }

  .footer__lines {
    gap: calc(8 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
  }

  .lang--footer {
    grid-area: lang;
  }

  .footer__logo {
    grid-area: logo;
    align-self: center;
    width: calc(1436 * var(--u));
  }

  .footer__legal {
    grid-area: legal;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    font-size: max(12px, calc(15 * var(--u)));
    letter-spacing: calc(0.3 * var(--u));
  }

  .footer__year {
    order: 3;
  }

  .footer__credit {
    order: 2;
  }
}

.contact-form__status:empty {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: none;
}

.carousel__viewport {
  position: relative;
}

.novateurs.is-animated .novateurs__static {
  display: none !important;
}