/* Home layout copied from the validated V3 on 19 September 2026. */
:root {
  --green: #29504a; --sage: #9cb29d; --cream: #f8f4f0; --orange: #eb5a32;
  --font: "Mona Sans ASTRA", "Segoe UI", system-ui, sans-serif;
  --desktop-min-width: 640px; --desktop-min-height: 360px;
  --layout-width: max(100vw, var(--desktop-min-width));
  --layout-height: max(100svh, var(--desktop-min-height));
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: var(--desktop-min-width); min-height: var(--desktop-min-height); font-family: var(--font); line-height: 1.45; text-rendering: optimizeLegibility; font-optical-sizing: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 10px 14px; background: var(--green); color: var(--cream); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
@font-face { font-family: "Mona Sans ASTRA"; src: url('../fonts/MonaSans-v2-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans ASTRA"; src: url('../fonts/MonaSans-v2-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans ASTRA"; src: url('../fonts/MonaSans-v2-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans ASTRA"; src: url('../fonts/MonaSans-v2-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
.home-page {
  overflow: auto;
  background: #fefdfc;
}

.home-cover {
  --home-frame-x: min(100px, calc(var(--layout-width) * 0.0694444444));
  --home-frame-y: min(100px, calc(var(--layout-height) * 0.1111111111));
  --home-picto-size: min(150px, calc(var(--layout-width) * 0.1041666667), calc(var(--layout-height) * 0.1666666667));
  position: relative;
  width: 100%;
  height: var(--layout-height);
  padding: var(--home-frame-y) var(--home-frame-x);
  background: #fefdfc;
}

.home-stack {
  width: 100%;
  height: 100%;
}

.home-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--green);
  color: #f8f4f0;
}

.home-brand {
  position: absolute;
  top: 13.7142857143%;
  left: calc(50% - 0.5px);
  width: min(563px, 45.4032258065%, calc(var(--layout-height) * 0.6255555556));
  aspect-ratio: 563 / 231;
  transform: translateX(-50%);
}

.home-logo {
  width: 100%;
  height: 100%;
}

.home-dividers {
  position: absolute;
  top: 56.1428571429%;
  left: calc(50% - 1.5px);
  width: 34.1935483871%;
  height: min(200px, calc(var(--layout-height) * 0.2222222222));
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.home-actions {
  position: absolute;
  top: 56.8571428571%;
  left: 0;
  width: 100%;
  height: calc(var(--home-picto-size) + 45px);
}

.home-action {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(168px, 30%);
  gap: 1px;
  transform: translateX(-50%);
}

.home-action:first-child {
  --home-label-x: calc(50% - 59.19921875px);
  --home-label-y: 4.2800293px;
  left: 16.0887096774%;
  width: min(173px, 30%);
  gap: 0;
}

.home-action:nth-child(2) {
  --home-label-x: calc(50% - 50.5546875px);
  --home-label-y: 4.2800293px;
  left: 49.9193548387%;
}

.home-action:nth-child(3) {
  --home-label-x: calc(50% - 44.8828125px);
  --home-label-y: 0.2800293px;
  left: 83.5483870968%;
}

.home-action:first-child span {
  margin-top: -4px;
}

.home-animation {
  display: block;
  flex: none;
  width: var(--home-picto-size);
  height: var(--home-picto-size);
}

.home-animation img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-action span {
  position: relative;
  display: block;
  width: 100%;
  color: #f8f4f0;
  font-size: 20px;
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  line-height: 22px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}


.home-action span { color: transparent; }
.home-label-art {
  position: absolute;
  left: var(--home-label-x);
  top: var(--home-label-y);
  max-width: none;
}


/* This standalone page also fits desktop responsive previews and narrow windows. */
@media (max-width: 840px) {
  :root { --desktop-min-width: 0px; --desktop-min-height: 0px; --layout-width: 100vw; --layout-height: 100svh; }
  .home-page {
    overflow: auto;
  }

  .home-cover {
    --home-mobile-frame: clamp(28px, 9.75vw, 39px);
    --home-link-space: clamp(58px, 12svh, 72px);
    min-height: 100svh;
    height: auto;
    padding: var(--home-mobile-frame) var(--home-mobile-frame) 0;
    place-items: center;
  }

  .home-stack {
    display: grid;
    width: min(322px, calc(100vw - var(--home-mobile-frame) * 2));
    height: calc(100svh - var(--home-mobile-frame));
    min-height: 480px;
    grid-template-rows: minmax(0, 1fr) var(--home-link-space);
    gap: 0;
  }

  .home-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: clamp(22px, 5.2svh, 42px) clamp(10px, 3.8vw, 15px) clamp(22px, 4svh, 32px);
    border-radius: clamp(20px, 7vw, 28px);
  }

  .home-brand {
    position: static;
    width: min(252px, 100%, 34svh);
    transform: none;
    align-self: start;
    justify-self: center;
  }

  .home-logo {
    width: 100%;
  }

  .home-dividers {
    display: none;
  }

  .home-actions {
    position: static;
    display: grid;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    margin-top: clamp(18px, 3.8svh, 34px);
    min-height: 0;
  }

  .home-action {
    position: static;
    display: grid;
    transform: none;
    grid-template-columns: minmax(0, 1fr) clamp(76px, 22vw, 90px);
    grid-template-rows: 1fr;
    column-gap: clamp(6px, 2vw, 10px);
    min-height: 0;
    height: auto;
    align-items: center;
    justify-items: left;
    padding-inline: clamp(20px, 6vw, 28px) clamp(20px, 6vw, 28px);
    padding-block: clamp(10px, 1.9svh, 15px);
    border-right: 0;
    border-bottom: 1px solid #f8f4f0;
    overflow: hidden;
  }

  .home-action:first-child,
  .home-action:nth-child(2),
  .home-action:nth-child(3) {
    width: 100%;
  }

  .home-action:first-child span {
    margin-top: 0;
  }

  .home-action + .home-action {
    padding-top: clamp(10px, 1.9svh, 15px);
  }

  .home-action:last-child {
    border-bottom: 0;
  }

  .home-animation {
    grid-column: 2;
    grid-row: 1;
    width: min(86px, 12svh, 22vw);
    height: min(86px, 12svh, 22vw);
    justify-self: start;
    align-self: center;
    z-index: 0;
  }

  .home-action:first-child .home-animation {
    width: min(78px, 11svh, 20vw);
    height: min(78px, 11svh, 20vw);
  }

  .home-action:nth-child(3) .home-animation {
    width: min(92px, 13svh, 24vw);
    height: min(92px, 13svh, 24vw);
  }

  .home-action span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    width: auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.04;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .home-action span,
  .home-action:hover span,
  .home-action:focus-visible span,
  .home-link .home-link-label {
    color: inherit;
  }

  .home-label-art {
    display: none;
  }

  .home-link-label {
    position: static;
    width: auto;
    height: auto;
  }

  .home-action:nth-child(2) span,
  .home-action:nth-child(3) span {
    max-width: 104px;
    white-space: normal;
    line-height: 1.08;
  }

  .home-action:nth-child(3) span {
    max-width: 92px;
  }


  html:has(.home-page), .home-page { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  .home-cover { --home-mobile-frame: 39px; --home-link-space: clamp(50px, 14dvh, 106px); --home-mobile-picto: min(80px, 10.6dvh, 24vw); height: 100dvh; min-height: 0; padding: max(12px, min(5dvh, 38px), env(safe-area-inset-top, 0px)) max(var(--home-mobile-frame), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--home-mobile-frame), env(safe-area-inset-left, 0px)); }
  .home-stack { width: 100%; max-width: none; height: 100%; min-height: 0; grid-template-columns: minmax(0,1fr); }
  .home-card { min-width: 0; border-radius: 20px; padding: clamp(12px, 4.63dvh, 35px) 29px clamp(12px, 9.13dvh, 69px); grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); }
  .home-brand { width: min(263px,100%,34.8dvh); max-width: 100%; min-width: 0; }
  .home-actions { margin: clamp(12px, 12.7dvh, 96px) 5px 0 6px; height: auto; width: calc(100% - 11px); grid-template-rows: minmax(0,96fr) minmax(0,112fr) minmax(0,96fr); }
  .home-action { padding: 0 3px 0 0; overflow: visible; grid-template-columns: minmax(0,1fr) var(--home-mobile-picto); gap: 0; border-bottom: 1px solid #f8f4f0; }
  .home-action + .home-action { padding: min(16px, 2.12dvh) 0 0; }
  .home-action:last-child { border-bottom: 0; }
  .home-action:first-child .home-animation, .home-action:nth-child(2) .home-animation, .home-action:nth-child(3) .home-animation { width: var(--home-mobile-picto); height: var(--home-mobile-picto); align-self: start; }
  .home-action span { align-self: start; margin-top: min(21px, 2.78dvh); font-size: clamp(13px, 2.12dvh, 16px); line-height: 1.1875; }
  .home-action:first-child span { margin-top: min(30.5px, 4.03dvh); }
  .home-action:first-child, .home-action:nth-child(2), .home-action:nth-child(3) { width: 100%; }
  .home-action:nth-child(2) span, .home-action:nth-child(3) span { max-width: 88px; line-height: 1.1875; }
  .home-action span br { display: initial; }
  .home-action:nth-child(3) span { max-width: 78px; }
}
@media (max-width: 380px) {
  .home-cover { --home-mobile-frame: 24px; }
  .home-card { padding-inline: 24px; }
  .home-actions { margin-top: min(72px, 9.52dvh); }
}