/*
 * Base visuelle de la page d'accueil.
 * Les variables ci-dessous permettront d'adapter rapidement la direction
 * artistique sans modifier toute la feuille de styles.
 */

:root {
  --color-bg: #fffaf0;
  --color-surface: #f6f0df;
  --color-text: #50536d;
  --color-muted: #707287;
  --color-accent: #4fd0d3;
  --color-accent-strong: #2fb1b0;
  --color-gold-deep: #e6ad02;
  --color-gold-light: #ffd966;
  --color-ink: #50536d;
  --color-turquoise-base: #d5f3f3;
  --page-gutter: clamp(1.25rem, 4vw, 5rem);
  --content-width: clamp(75rem, calc(36rem + 32.5vw), 88rem);
  --viewport-height: 100vh;
  --scene-space-block: clamp(5rem, 10vh, 8rem);
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-size-ui-copy: clamp(
    0.95rem,
    calc(0.35rem + 0.59375vw),
    1.3rem
  );
  --font-size-highlight-copy: clamp(
    1.05rem,
    calc(0.45rem + 0.78125vw),
    1.7rem
  );
  --font-size-stat-copy: clamp(
    1rem,
    calc(0.4rem + 0.6875vw),
    1.5rem
  );
  --font-size-section-title: clamp(
    1.85rem,
    calc(1rem + 1.625vw),
    3.6rem
  );
  --font-size-hero-title: clamp(1.85rem, calc(0.9rem + 1.5vw), 3.3rem);
  --font-size-hero-promise: clamp(
    0.95rem,
    calc(0.3rem + 0.625vw),
    1.3rem
  );
  --font-size-cta: clamp(0.875rem, calc(0.5rem + 0.3125vw), 1rem);
  --cta-height: clamp(2.75rem, calc(-4rem + 5.625vw), 5rem);
  --cta-icon-size: clamp(1.875rem, calc(-1.35rem + 2.6875vw), 2.95rem);
  --cta-icon-glyph-size: clamp(
    1.375rem,
    calc(-1.55rem + 2.4375vw),
    2.35rem
  );
  --cta-padding-block: clamp(
    0.375rem,
    calc(-0.15rem + 0.4375vw),
    0.55rem
  );
  --cta-padding-inline-end: clamp(0.55rem, 0.4375vw, 0.7rem);
  --cta-padding-inline-start: clamp(1.25rem, 1vw, 1.6rem);
  --feature-cta-height: var(--cta-height);
}

@supports (height: 100svh) {
  :root {
    --viewport-height: 100svh;
    --scene-space-block: clamp(5rem, 10svh, 8rem);
  }
}

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

html {
  color-scheme: light;
  background: var(--color-bg);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  min-height: var(--viewport-height);
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-bg);
  font-family:
    "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  transform: translateY(-200%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell,
.page-home {
  width: 100%;
}

.scene {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: var(--viewport-height);
  padding: var(--scene-space-block) var(--page-gutter);
  isolation: isolate;
}

.scene__content {
  z-index: 1;
  width: min(100%, var(--content-width));
  margin: auto;
}

.scene__content--compact {
  max-width: 68rem;
}

.scene--hero {
  display: grid;
  grid-template-rows: repeat(2, minmax(50vh, auto));
  grid-template-rows: repeat(2, minmax(50svh, auto));
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  color: var(--color-ink);
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.scene--hero::before {
  z-index: 0;
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 12% 10%, rgb(255 255 255 / 32%), transparent 28%),
    linear-gradient(115deg, transparent 45%, rgb(255 255 255 / 10%) 70%, transparent);
  pointer-events: none;
}

.hero-half {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 50vh;
  min-height: 50svh;
  padding: clamp(1.5rem, 3.5svh, 3.5rem) var(--page-gutter);
  place-items: center;
}

.hero-half--features {
  --hero-turquoise-blend: clamp(3.5rem, 7svh, 6.5rem);

  color: var(--color-text);
  background: linear-gradient(
    -45deg,
    #c3e8e8,
    #d5f3f3,
    #bce3e3,
    #caeeee,
    #c3e8e8
  );
  background-size: 400% 400%;
  animation: turquoise-gradient 18s ease infinite;
}

.hero-half--features::before {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--hero-turquoise-blend));
  right: 0;
  left: 0;
  height: calc(var(--hero-turquoise-blend) + 1px);
  content: "";
  background: linear-gradient(
    -45deg,
    #c3e8e8,
    #d5f3f3,
    #bce3e3,
    #caeeee,
    #c3e8e8
  );
  background-size: 400% 400%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
  animation: turquoise-gradient 18s ease infinite;
  pointer-events: none;
}

.scene__ambient {
  position: absolute;
  top: 50%;
  left: clamp(1.5rem, 10vw, 12rem);
  width: clamp(0.55rem, 0.7vw, 0.8rem);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  background: var(--color-ink);
  transform: translateY(-50%);
  pointer-events: none;
}

.scene__ambient::before,
.scene__ambient::after {
  display: none;
}

.scene__content--hero {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 0;
  margin: auto;
  padding: 0;
  text-align: center;
}

.scene__content--hero-features {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  color: var(--color-muted);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  content: "";
  background: var(--color-accent);
  box-shadow: 0 0 1.5rem rgb(200 247 96 / 50%);
}

.hero-title {
  width: 100%;
  max-width: 40ch;
  margin: 0;
  font-size: var(--font-size-hero-title);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.hero-title__brand {
  display: block;
  margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
  font-size: 1.6675em;
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.hero-title__coco {
  color: var(--color-accent);
}

.hero-title__message {
  display: block;
  max-width: 100%;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  overflow-wrap: break-word;
  text-wrap: inherit;
}

.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.8vw, 1.6rem);
  margin: clamp(2.5rem, 6vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-hero-promise);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  justify-content: center;
}

.hero-promises li {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 1vw, 1rem);
  white-space: nowrap;
}

.hero-promises li::before {
  display: grid;
  width: 1em;
  place-items: center;
  content: "✭";
  color: var(--color-accent);
  font-size: 1.8em;
  line-height: 1;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.scene--features {
  z-index: 2;
  display: grid;
  min-height: 100vh;
  min-height: var(--viewport-height);
  padding: 0 var(--page-gutter) var(--scene-space-block);
  align-items: start;
  color: var(--color-text);
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
  overflow: hidden;
  scroll-margin-top: 0;
}

.scene--features.is-cta-docked {
  height: fit-content;
  min-height: 0;
}

.scene--features::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 12% 10%, rgb(255 255 255 / 32%), transparent 28%),
    linear-gradient(115deg, transparent 45%, rgb(255 255 255 / 10%) 70%, transparent);
  pointer-events: none;
}

.scene__content--features {
  position: relative;
  z-index: 1;
  margin: 0 auto auto;
}

.feature-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.125vw, 1.8rem);
  margin: 0;
}

.feature-card {
  min-width: 0;
  padding: clamp(0.55rem, 0.53125vw, 0.85rem);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: clamp(1.1rem, 1.125vw, 1.8rem);
  background: rgb(255 255 255 / 19%);
  box-shadow:
    0 1.25rem 3.5rem rgb(49 114 118 / 12%),
    0 2px 0 rgb(80 83 109 / 8%);
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out);
}

.feature-card__media {
  aspect-ratio: 1.6;
  overflow: hidden;
  border-radius: clamp(0.8rem, 0.78125vw, 1.25rem);
  background: #f7f7f7;
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 700ms var(--ease-out);
}

.feature-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  min-height: clamp(4.8rem, calc(1.75rem + 2.96875vw), 6.5rem);
  padding: clamp(0.9rem, 0.9375vw, 1.5rem)
    clamp(0.35rem, 0.5vw, 0.8rem);
  text-align: center;
}

.feature-card h2 {
  margin: 0;
  font-size: var(--font-size-highlight-copy);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.feature-statement {
  --statement-gap: clamp(2rem, 4vh, 3.5rem);
  --statement-height: clamp(22rem, calc(3.33rem + 40.75vh), 40rem);
  --statement-top-space: clamp(5rem, 7.8125vw, 9.375rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--statement-gap);
  min-height: var(--statement-height);
  padding: var(--statement-top-space) 0 clamp(2.5rem, 6.67vh, 6rem);
  text-align: center;
  transition: min-height 1500ms cubic-bezier(0.37, 0, 0.63, 1);
}

.feature-statement.is-cta-docked {
  min-height: 0;
}

.feature-statement__copy {
  position: relative;
  display: grid;
  width: min(100%, 80rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  isolation: isolate;
  grid-auto-rows: 1fr;
}

.feature-statement__copy::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 7%;
  left: 7%;
  height: 1px;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    rgb(80 83 109 / 22%) 0 0.35rem,
    transparent 0.35rem 0.8rem
  );
}

.feature-statement h3 {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  max-width: 80ch;
  min-height: clamp(9rem, calc(4rem + 4.6875vw), 11.5rem);
  margin: 0;
  padding: clamp(1.15rem, 1.2vw, 1.75rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 1.1vw, 1.7rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: clamp(1.35rem, 1.25vw, 2rem);
  background: rgb(255 255 255 / 28%);
  box-shadow:
    0 1.1rem 2.8rem rgb(49 114 118 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 60%);
  font-size: var(--font-size-stat-copy);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: left;
  text-wrap: balance;
  backdrop-filter: blur(0.35rem);
  transform: rotate(-0.55deg);
}

.feature-statement h3:nth-child(2) {
  transform: rotate(0.55deg);
}

.feature-statement h3::after {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  content: "✦";
  color: rgb(80 83 109 / 34%);
  font-size: 0.85rem;
}

.feature-stat__value {
  position: relative;
  z-index: 1;
  display: flex;
  width: clamp(6.8rem, calc(2.5rem + 4.0625vw), 9rem);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  color: #2ebfc4;
  font-size: clamp(3.2rem, calc(1.475rem + 2.453125vw), 5.4rem);
  font-weight: 700;
  letter-spacing: -0.085em;
  line-height: 0.9;
}

.feature-stat__value::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgb(46 191 196 / 28%);
  border-radius: 50%;
  content: "";
}

.feature-stat__value small {
  margin: 0 0 0 0.08em;
  font-size: 0.42em;
  letter-spacing: -0.04em;
  transform: translateY(-0.55em);
}

.feature-stat__text {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  color: var(--color-text);
  font: inherit;
}

.cta-stage {
  display: grid;
  height: var(--feature-cta-height);
  min-width: min(100%, 18rem);
  min-height: var(--feature-cta-height);
  place-items: center;
  transition:
    height 1500ms cubic-bezier(0.37, 0, 0.63, 1),
    min-height 1500ms cubic-bezier(0.37, 0, 0.63, 1),
    margin-top 1500ms cubic-bezier(0.37, 0, 0.63, 1),
    opacity 500ms ease;
}

.cta-stage.is-collapsed {
  height: 0;
  min-height: 0;
  margin-top: calc(-1 * var(--statement-gap));
  opacity: 0;
  pointer-events: none;
}

.test-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.625vw, 1rem);
  min-height: var(--feature-cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  box-shadow:
    0 1.1rem 2.8rem rgb(49 81 91 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 12%);
  font-size: var(--font-size-cta);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms var(--ease-out),
    right 360ms var(--ease-out);
}

.test-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.test-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.test-cta__brand span {
  color: var(--color-accent);
}

.test-cta.is-traveler,
.test-cta.is-floating {
  position: fixed;
  z-index: 100;
}

.test-cta.is-floating {
  right: clamp(1rem, 1.25vw, 2rem);
  bottom: clamp(1rem, 1.25vw, 2rem);
}

.back-to-top {
  position: fixed;
  z-index: 101;
  right: clamp(1rem, 1.25vw, 2rem);
  bottom: clamp(1rem, 1.25vw, 2rem);
  display: grid;
  width: var(--cta-height);
  height: var(--cta-height);
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow:
    0 1.1rem 2.8rem rgb(49 81 91 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 30%);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(0.75rem) scale(0.9);
  transition:
    opacity 260ms ease,
    visibility 260ms ease,
    transform 360ms var(--ease-out),
    background-color 240ms ease,
    box-shadow 240ms ease;
}

.back-to-top svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.has-back-to-top-visible .test-cta.is-floating {
  right: calc(
    clamp(1rem, 1.25vw, 2rem) + var(--cta-height) +
      clamp(0.5rem, 0.6vw, 0.8rem)
  );
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 4px;
}

.test-cta.is-transitioning {
  transition: none;
}

.test-cta:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 4px;
}

.scene--about {
  overflow: hidden;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at 8% 18%,
      rgb(79 208 211 / 10%),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(230 173 2 / 9%),
      transparent 24rem
    ),
    #f5f5f5;
}

.scene--about::before {
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(70rem, 100vw);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: 50%;
  background: linear-gradient(
    -45deg,
    #c3e8e8,
    #d5f3f3,
    #bce3e3,
    #caeeee,
    #c3e8e8
  );
  background-size: 400% 400%;
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
  will-change: background-position;
  animation: turquoise-gradient 18s ease infinite;
}

.scene__content--about {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 6vh, 5rem);
  max-width: 74rem;
}

.about-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vh, 2.4rem);
  text-align: center;
}

.about-heading__logo {
  width: clamp(5.5rem, 8vw, 8.5rem);
  height: auto;
}

.about-heading h2 {
  max-width: 25ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.about-heading__brand {
  font-weight: 700;
  letter-spacing: -0.055em;
}

.about-heading__brand span {
  color: var(--color-accent);
}

.about-benefits {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.4rem);
  list-style: none;
}

.about-benefits li {
  display: grid;
  min-height: clamp(8rem, 13vw, 10rem);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: clamp(1.1rem, 2vw, 1.7rem);
  background: rgb(255 255 255 / 68%);
  box-shadow:
    0 1rem 2.8rem rgb(118 87 0 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 22%);
}

.about-benefits__star {
  display: flex;
  width: 2.4rem;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-accent);
  font-size: 1.7rem;
  line-height: 1;
}

.about-benefits p {
  margin: 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 500;
  line-height: 1.55;
}

.about-benefits strong {
  font-weight: 700;
  background: linear-gradient(
    transparent 68%,
    rgb(79 208 211 / 38%) 68%
  );
}

.about-actions {
  display: grid;
  width: fit-content;
  max-width: 100%;
  justify-items: stretch;
  gap: clamp(0.85rem, 2vh, 1.15rem);
}

.softskills-definition {
  position: relative;
  z-index: 5;
  width: max-content;
  max-width: 100%;
}

.softskills-definition summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: clamp(0.65rem, 0.625vw, 1rem);
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-start)
    var(--cta-padding-block) var(--cta-padding-inline-end);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 62%);
  box-shadow: 0 0.6rem 1.4rem rgb(92 69 0 / 10%);
  font-size: var(--font-size-cta);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.softskills-definition summary::-webkit-details-marker {
  display: none;
}

.softskills-definition__icon {
  display: flex;
  width: var(--cta-icon-size);
  height: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-text);
  font-size: 1.65rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.softskills-definition__panel {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 1rem);
  left: 50%;
  width: min(38rem, calc(100vw - 2 * var(--page-gutter)));
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  border-radius: 1.25rem;
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 1.5rem 4rem rgb(63 53 24 / 24%);
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition:
    opacity 240ms ease,
    transform 300ms var(--ease-out);
  pointer-events: none;
}

.softskills-definition__panel::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1rem;
  aspect-ratio: 1;
  content: "";
  background: var(--color-text);
  transform: translate(-50%, -50%) rotate(45deg);
}

.softskills-definition__panel p {
  margin: 0;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.softskills-definition[open] summary {
  border-color: var(--color-text);
  background: rgb(255 255 255 / 82%);
}

.softskills-definition[open] .softskills-definition__panel {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0.65rem, 0.625vw, 1rem);
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgb(255 255 255 / 48%);
  font-size: var(--font-size-cta);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 240ms ease,
    background-color 240ms ease,
    transform 240ms var(--ease-out);
}

.about-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.about-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene--transformation,
.scene--how-it-works {
  overflow: hidden;
  color: var(--color-text);
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.scene--transformation::before {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -9rem;
  width: clamp(18rem, 32vw, 34rem);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 4rem rgb(255 255 255 / 18%),
    0 0 0 8rem rgb(255 255 255 / 12%);
}

.scene--transformation:target [data-transformation-visual],
.scene--transformation:target [data-transformation-reveal],
.scene--how-it-works:target [data-usage-visual],
.scene--how-it-works:target [data-usage-reveal] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.transformation-layout {
  display: grid;
  max-width: 82rem;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(24rem, 1.1fr);
  align-items: center;
  gap: clamp(3.5rem, 7vw, 7rem);
}

.transformation-visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0;
  justify-self: start;
}

.transformation-visual::before {
  position: absolute;
  z-index: -1;
  inset: 1.2rem -1.2rem -1.2rem 1.2rem;
  border: 1px solid rgb(79 208 211 / 48%);
  border-radius: clamp(1.8rem, 3vw, 2.8rem);
  content: "";
}

.transformation-visual::after {
  position: absolute;
  z-index: 2;
  top: -1.2rem;
  left: -1.2rem;
  width: clamp(3.75rem, 5vw, 5.5rem);
  aspect-ratio: 1;
  border: clamp(0.65rem, 1vw, 0.9rem) solid var(--color-gold-light);
  border-radius: 50%;
  content: "";
  background: var(--color-accent);
  box-shadow: 0 0.7rem 1.8rem rgb(49 114 118 / 18%);
}

.transformation-visual__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  padding: clamp(0.55rem, 0.9vw, 0.8rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: clamp(1.8rem, 3vw, 2.8rem);
  background: #fff;
  box-shadow:
    0 2.2rem 5rem rgb(50 62 75 / 16%),
    0 2px 0 rgb(80 83 109 / 7%);
}

.transformation-visual__frame img {
  width: 100%;
  height: 100%;
  border-radius: clamp(1.35rem, 2.4vw, 2.2rem);
  object-fit: cover;
}

.transformation-visual__caption {
  position: absolute;
  z-index: 3;
  right: clamp(-1.5rem, -2vw, -0.75rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  min-width: min(17rem, calc(100% - 2rem));
  padding: 1rem 1.25rem 1rem 1.5rem;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: 1.15rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 1.2rem 3rem rgb(45 52 68 / 18%);
  backdrop-filter: blur(0.65rem);
}

.transformation-visual__caption::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 0.3rem;
  border-radius: 999px;
  content: "";
  background: var(--color-accent);
}

.transformation-visual__caption span {
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.transformation-visual__caption strong {
  margin-top: 0.15rem;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 650;
}

.transformation-content {
  width: 100%;
  min-width: 0;
  max-width: 44rem;
}

.transformation-content h2 {
  max-width: 19ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.transformation-heading__brand {
  font-weight: 700;
  letter-spacing: -0.06em;
}

.transformation-heading__brand span {
  color: var(--color-accent);
}

.transformation-steps {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: clamp(0.7rem, 1.4vh, 1rem);
  margin: clamp(2.25rem, 5vh, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: transformation-step;
}

.transformation-steps li {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 5.8rem;
  padding: clamp(0.8rem, 1.3vw, 1.05rem) clamp(2.7rem, 3.3vw, 3.4rem)
    clamp(0.8rem, 1.3vw, 1.05rem) clamp(0.8rem, 1.3vw, 1.05rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 1.7vw, 1.35rem);
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: clamp(1rem, 1.5vw, 1.3rem);
  background: rgb(255 255 255 / 78%);
  box-shadow:
    0 0.8rem 2.2rem rgb(64 72 87 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
  counter-increment: transformation-step;
  transition:
    border-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.transformation-steps li::after {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  content: "0" counter(transformation-step);
  color: rgb(80 83 109 / 34%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.transformation-step__icon {
  display: grid;
  width: clamp(3.35rem, 4.2vw, 3.8rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1.1rem;
  color: var(--color-accent);
  background: var(--color-text);
  box-shadow: 0 0.65rem 1.5rem rgb(52 61 83 / 16%);
}

.transformation-steps li:nth-child(even) .transformation-step__icon {
  color: var(--color-text);
  background: var(--color-accent);
}

.transformation-step__icon svg {
  width: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene--transformation .transformation-step__icon {
  width: clamp(3rem, 3.8vw, 3.5rem);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scene--transformation
  .transformation-steps
  li:nth-child(even)
  .transformation-step__icon {
  background: transparent;
}

.scene--transformation .transformation-step__icon svg {
  width: clamp(2rem, 2.2vw, 2.25rem);
  stroke-width: 2.2;
}

.transformation-steps p {
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 450;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.transformation-steps strong {
  font-weight: 700;
}

.scene--how-it-works::before {
  position: absolute;
  z-index: -1;
  bottom: 8%;
  left: -10rem;
  width: clamp(20rem, 35vw, 38rem);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 4.5rem rgb(255 255 255 / 17%),
    0 0 0 9rem rgb(255 255 255 / 10%);
}

.transformation-layout--reverse {
  grid-template-columns: minmax(24rem, 1.1fr) minmax(18rem, 0.9fr);
}

.transformation-layout--reverse .transformation-visual {
  justify-self: end;
}

.usage-content h2 {
  max-width: 18ch;
}

.usage-intro {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  padding: 0.65rem 1rem 0.65rem 0.7rem;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgb(80 83 109 / 11%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 52%);
  box-shadow: 0 0.7rem 1.8rem rgb(64 72 87 / 7%);
  font-size: var(--font-size-ui-copy);
  line-height: 1.35;
}

.usage-intro__check {
  display: grid;
  width: 2.45rem;
  flex: 0 0 2.45rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.usage-intro__check svg {
  width: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.usage-steps {
  margin-top: clamp(1.25rem, 2.5vh, 1.8rem);
}

.usage-steps li {
  min-height: 6.6rem;
}

.usage-steps li::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 0.22rem;
  border-radius: 999px;
  content: "";
  background: var(--usage-accent, var(--color-accent));
}

.usage-steps li:nth-child(1) {
  --usage-accent: #8c65a8;
}

.usage-steps li:nth-child(2) {
  --usage-accent: var(--color-accent);
}

.usage-steps li:nth-child(3) {
  --usage-accent: var(--color-gold-deep);
}

.usage-steps .usage-step__icon {
  width: clamp(3.5rem, 4.5vw, 4.1rem);
  border-radius: 0;
  color: var(--usage-accent);
  background: transparent;
  box-shadow: none;
}

.usage-steps li:nth-child(even) .usage-step__icon {
  color: var(--usage-accent);
  background: transparent;
}

.usage-steps .usage-step__icon svg {
  width: clamp(2.25rem, 2.8vw, 2.65rem);
  stroke-width: 2.15;
}

.usage-steps .usage-step__icon--weather {
  color: var(--usage-accent);
}

.usage-visual::before {
  inset: 1.2rem 1.2rem -1.2rem -1.2rem;
}

.usage-visual::after {
  right: -1.2rem;
  left: auto;
}

.usage-visual .transformation-visual__caption {
  right: auto;
  left: clamp(-1.5rem, -2vw, -0.75rem);
}

.usage-visual .transformation-visual__caption::before {
  right: 0;
  left: auto;
}

.usage-more {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
}

.usage-more__toggle {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: clamp(1.4rem, 2vw, 1.9rem);
  color: #fff;
  background: var(--color-text);
  box-shadow:
    0 1.25rem 3rem rgb(62 61 77 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 13%);
  font-size: var(--font-size-cta);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 260ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.usage-more__toggle::before {
  position: absolute;
  top: -5rem;
  right: 10%;
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgb(79 208 211 / 20%), transparent 68%);
  pointer-events: none;
}

.usage-more__toggle-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
}

.usage-more__toggle-copy strong {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--font-size-cta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.usage-more__toggle-copy strong::after {
  content: none;
  color: var(--color-accent);
  font-size: 1.65em;
  font-weight: 500;
  line-height: 0.7;
}

.usage-more.is-open .usage-more__toggle-copy strong::after {
  content: none;
}

.usage-more__toggle-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1.35rem;
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: 0 0.65rem 1.5rem rgb(19 31 43 / 18%);
}

.usage-more__toggle-icon span {
  position: absolute;
  width: 56%;
  height: 0.16rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform 500ms var(--ease-out);
}

.usage-more__toggle-icon span:last-child {
  transform: rotate(90deg);
}

.usage-more.is-open .usage-more__toggle-icon span:first-child {
  transform: rotate(45deg);
}

.usage-more.is-open .usage-more__toggle-icon span:last-child {
  transform: rotate(135deg);
}

.usage-more__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 700ms var(--ease-out),
    opacity 420ms ease,
    visibility 0s linear 700ms;
}

.usage-more.is-open .usage-more__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 700ms var(--ease-out),
    opacity 500ms ease 100ms,
    visibility 0s linear;
}

.usage-more__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.usage-more__grid {
  display: grid;
  margin: 0;
  padding: clamp(1.4rem, 2.8vw, 2.4rem) 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  list-style: none;
}

.usage-more__card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 13rem;
  padding: clamp(1.15rem, 2vw, 1.65rem);
  align-content: start;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: clamp(1.25rem, 2vw, 1.7rem);
  background: rgb(255 255 255 / 74%);
  box-shadow:
    0 1rem 2.6rem rgb(62 61 77 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 82%);
}

.usage-more__card::after {
  position: absolute;
  right: -3.5rem;
  bottom: -4.5rem;
  width: 10rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: rgb(79 208 211 / 9%);
}

.usage-more__card:nth-child(even)::after {
  background: rgb(255 217 102 / 22%);
}

.usage-more__card-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.usage-more__card-icon {
  display: grid;
  width: 3.7rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 1.15rem;
  color: var(--color-accent);
  background: var(--color-text);
  box-shadow: 0 0.6rem 1.4rem rgb(52 61 83 / 15%);
}

.usage-more__card:nth-child(even) .usage-more__card-icon {
  color: var(--color-text);
  background: var(--color-accent);
}

.usage-more__card-icon svg {
  width: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.usage-more__check {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(80 83 109 / 13%);
  border-radius: 50%;
  color: var(--color-text);
  background: rgb(255 255 255 / 58%);
  font-size: 1.1rem;
  font-weight: 700;
}

.usage-more__card p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 450;
  line-height: 1.55;
  text-wrap: pretty;
}

.usage-more__card strong {
  font-weight: 700;
}

.usage-more__toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.usage-faq-cta {
  display: flex;
  width: fit-content;
  min-height: var(--cta-height);
  margin: clamp(1.15rem, 2vw, 1.5rem) auto 0;
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 0.9rem 2.2rem rgb(50 62 75 / 18%);
  font-size: var(--font-size-cta);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.usage-faq-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.usage-faq-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.usage-faq-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.scene--companion {
  overflow: hidden;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at 8% 12%,
      rgb(79 208 211 / 18%),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 84%,
      rgb(255 217 102 / 22%),
      transparent 30rem
    ),
    linear-gradient(135deg, #fff 0%, #f4f6f6 48%, #fffdf8 100%);
}

.scene--companion::before {
  position: absolute;
  z-index: -1;
  top: 18%;
  left: 50%;
  width: min(88rem, 94vw);
  height: 58%;
  border: 1px solid rgb(80 83 109 / 6%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 6rem rgb(255 255 255 / 38%),
    0 0 0 12rem rgb(79 208 211 / 3%);
  transform: translateX(-50%) rotate(-4deg);
}

.scene--companion:target [data-companion-reveal] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.scene--companion:target [data-companion-card] {
  visibility: visible !important;
  opacity: 1 !important;
}

.companion-layout {
  max-width: 86rem;
}

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

.companion-heading__badge {
  display: inline-block;
  width: clamp(12.5rem, 19.5vw, 17rem);
  height: auto;
  margin: 0 0.22em 0.08em 0;
  vertical-align: middle;
  filter: drop-shadow(0 0.65rem 1.2rem rgb(49 114 118 / 13%));
}

.companion-heading h2 {
  display: block;
  max-width: 31ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.companion-heading > p {
  margin: clamp(1rem, 2vh, 1.35rem) 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.companion-grid {
  display: grid;
  margin-top: clamp(4rem, 8vh, 6.5rem);
  padding: 0 clamp(0rem, 1vw, 1rem) clamp(3.5rem, 7vh, 6rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.8vw, 2.4rem);
}

.companion-card {
  --card-accent: var(--color-accent);
  --card-tilt: -2deg;
  --card-shift: 0rem;
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(31rem, 42vw, 36rem);
  perspective: 110rem;
  transform: translateY(var(--card-shift)) rotate(var(--card-tilt));
  transition:
    z-index 0s,
    transform 450ms var(--ease-out);
}

.companion-card--training {
  --card-accent: var(--color-accent);
  --card-tilt: -2.1deg;
  --card-shift: 1.1rem;
}

.companion-card--barometer {
  --card-accent: var(--color-gold-deep);
  --card-tilt: 1.35deg;
  --card-shift: 4rem;
}

.companion-card--targeted {
  --card-accent: #9b55e7;
  --card-tilt: -1.15deg;
  --card-shift: 0;
}

.companion-card__toggle {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: clamp(1.5rem, 2.6vw, 2.2rem);
  background: transparent;
  cursor: pointer;
}

.companion-card__toggle:focus-visible {
  outline: 4px solid var(--card-accent);
  outline-offset: 0.4rem;
}

.companion-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.companion-card.is-flipped {
  z-index: 3;
}

.companion-card.is-flipped .companion-card__inner {
  transform: rotateY(180deg);
}

.companion-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(1.35rem, 2.3vw, 2rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: clamp(1.5rem, 2.6vw, 2.2rem);
  background: rgb(255 255 255 / 91%);
  box-shadow:
    0 1.8rem 4rem rgb(55 64 77 / 13%),
    inset 0 1px 0 #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.companion-card__front::before {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 13rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
}

.companion-card__front::after {
  position: absolute;
  right: clamp(1.25rem, 2vw, 1.7rem);
  bottom: clamp(1.25rem, 2vw, 1.7rem);
  left: clamp(1.25rem, 2vw, 1.7rem);
  height: 0.22rem;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--card-accent), transparent 72%);
}

.companion-card__bubble {
  position: relative;
  z-index: 1;
  width: clamp(6.5rem, 9vw, 8.5rem);
  max-height: 8.5rem;
  object-fit: contain;
  filter: drop-shadow(0 0.7rem 1.2rem rgb(50 62 75 / 11%));
}

.companion-card__front p {
  position: relative;
  z-index: 1;
  max-width: 23ch;
  margin: clamp(1.75rem, 3.5vh, 2.6rem) 0 0;
  font-size: var(--font-size-highlight-copy);
  font-weight: 450;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.companion-card__front strong {
  font-weight: 700;
}

.companion-card__hint {
  position: absolute;
  z-index: 2;
  bottom: clamp(2rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.companion-card__hint span {
  color: var(--card-accent);
  font-size: 1.25rem;
  line-height: 1;
}

.companion-card__back {
  padding: clamp(1rem, 1.7vw, 1.4rem);
  justify-content: flex-start;
  background: #fff;
  transform: rotateY(180deg);
}

.companion-card__back h3 {
  flex: 0 0 auto;
  margin: 0 0 clamp(0.8rem, 1.5vw, 1.1rem);
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  font-size: var(--font-size-highlight-copy);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-align: center;
}

.companion-card__media {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  padding: 0.55rem;
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: clamp(1rem, 1.8vw, 1.45rem);
  background: #f7f8f7;
}

.companion-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.companion-card__back .companion-card__hint {
  position: static;
  margin-top: clamp(0.7rem, 1.2vw, 0.95rem);
}

.companion-cta {
  margin: 0 auto;
}

.scene--testimonials {
  overflow: hidden;
  color: var(--color-text);
  background: linear-gradient(
      0deg,
      rgb(178 164 219 / 88%) 0%,
      rgb(198 187 225) 50%,
      rgb(174 157 207 / 10%) 100%
    )
    rgb(246 246 249) !important;
}

.scene--testimonials::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 8% 18%, rgb(255 255 255 / 62%), transparent 26rem),
    radial-gradient(circle at 92% 72%, rgb(79 208 211 / 15%), transparent 31rem),
    linear-gradient(112deg, transparent 42%, rgb(255 255 255 / 14%) 68%, transparent);
  pointer-events: none;
}

.scene--testimonials:target [data-testimonials-reveal],
.scene--testimonials:target [data-testimonials-cards] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.testimonials-layout {
  max-width: 86rem;
}

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

.testimonials-heading h2 {
  max-width: 22ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.testimonials-proof {
  display: grid;
  margin-top: clamp(2.75rem, 5vh, 4.5rem);
  grid-template-columns: 0.85fr 1fr 1.45fr;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

.testimonials-proof__item {
  display: grid;
  min-width: 0;
  min-height: 9.5rem;
  margin: 0;
  padding: clamp(1rem, 1.8vw, 1.45rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.85rem, 1.3vw, 1.1rem);
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: clamp(1.15rem, 1.8vw, 1.5rem);
  background: rgb(255 255 255 / 48%);
  box-shadow:
    0 1rem 2.5rem rgb(67 57 101 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  backdrop-filter: blur(0.7rem);
}

.testimonials-proof__item > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.testimonials-proof__icon {
  display: grid;
  width: 2.8rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
}

.testimonials-proof strong {
  font-size: var(--font-size-highlight-copy);
  font-weight: 700;
  line-height: 1.1;
}

.testimonials-proof small {
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  font-weight: 500;
  line-height: 1.45;
}

.testimonials-proof__stars {
  color: var(--color-gold-deep);
  font-size: clamp(0.9rem, 1.25vw, 1.1rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.testimonials-proof__stars > span {
  color: rgb(80 83 109 / 24%);
}

.testimonials-carousel {
  position: relative;
  margin-top: clamp(4rem, 8vh, 6.5rem);
}

.testimonials-viewport {
  overflow: visible;
}

.testimonials-track {
  display: grid;
  padding: 0.5rem clamp(0rem, 1vw, 0.75rem) clamp(4rem, 7vh, 6rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 4.5vw, 4.25rem) clamp(1.3rem, 2.8vw, 2.5rem);
}

.testimonial-card {
  --testimonial-accent: var(--color-accent);
  --testimonial-tilt: -1.5deg;
  --testimonial-shift: 0rem;
  position: relative;
  display: grid;
  height: 27rem;
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 1.7rem);
  align-content: start;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: clamp(1.4rem, 2.2vw, 1.9rem);
  background: rgb(255 255 255 / 87%);
  box-shadow:
    0 1.5rem 3.6rem rgb(67 57 101 / 14%),
    inset 0 1px 0 #fff;
  transform: translateY(var(--testimonial-shift))
    rotate(var(--testimonial-tilt));
  transition:
    box-shadow 320ms ease,
    transform 380ms var(--ease-out);
}

.testimonial-card::before {
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 11rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: color-mix(in srgb, var(--testimonial-accent) 15%, transparent);
}

.testimonial-card::after {
  position: absolute;
  right: 1.4rem;
  bottom: 1.15rem;
  left: 1.4rem;
  height: 0.2rem;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--testimonial-accent), transparent 78%);
}

.testimonial-card--gaelle {
  --testimonial-accent: #965cbd;
  --testimonial-tilt: -2deg;
  --testimonial-shift: 1rem;
}

.testimonial-card--yoann {
  --testimonial-accent: var(--color-accent);
  --testimonial-tilt: 1.2deg;
  --testimonial-shift: 0;
}

.testimonial-card--julien {
  --testimonial-accent: var(--color-gold-deep);
  --testimonial-tilt: -1.1deg;
  --testimonial-shift: 2.4rem;
}

.testimonial-card--marie {
  --testimonial-accent: #e9829d;
  --testimonial-tilt: 1.5deg;
  --testimonial-shift: 1.4rem;
}

.testimonial-card--laetitia {
  --testimonial-accent: #6fa68d;
  --testimonial-tilt: -1.35deg;
  --testimonial-shift: 3rem;
}

.testimonial-card--thomas {
  --testimonial-accent: #647fc2;
  --testimonial-tilt: 1deg;
  --testimonial-shift: 0.5rem;
}

.testimonial-card__header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.testimonial-card__avatar {
  display: grid;
  width: clamp(4rem, 5vw, 4.8rem);
  flex: 0 0 auto;
  aspect-ratio: 1;
  place-items: center;
  padding: 0.12rem;
  overflow: hidden;
  border: 0.24rem solid
    color-mix(in srgb, var(--testimonial-accent) 56%, #fff);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.7rem 1.5rem rgb(67 57 101 / 16%);
}

.testimonial-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card h3 {
  margin: 0;
  font-size: var(--font-size-highlight-copy);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.testimonial-card em {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: clamp(0.76rem, 0.95vw, 0.88rem);
  font-weight: 500;
  line-height: 1.35;
}

.testimonial-card blockquote {
  position: relative;
  z-index: 1;
  margin: clamp(1.75rem, 3.5vh, 2.5rem) 0 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 450;
  line-height: 1.55;
  text-wrap: pretty;
}

.testimonial-card__quote {
  position: absolute;
  right: 1.4rem;
  bottom: -0.6rem;
  color: color-mix(in srgb, var(--testimonial-accent) 28%, transparent);
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  pointer-events: none;
}

.testimonials-nav {
  display: none;
}

.scene--faq {
  overflow: clip;
  color: var(--color-text);
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.scene--faq::before {
  position: absolute;
  z-index: -1;
  top: 12rem;
  left: -13rem;
  width: clamp(25rem, 42vw, 45rem);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 5rem rgb(255 255 255 / 14%),
    0 0 0 10rem rgb(255 255 255 / 8%);
}

.scene--faq:target [data-faq-reveal] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.faq-layout {
  display: grid;
  max-width: 86rem;
  grid-template-columns: minmax(16rem, 0.58fr) minmax(28rem, 1.42fr);
  grid-template-areas:
    "heading comparison"
    "heading accordion";
  align-items: start;
  column-gap: clamp(3.5rem, 7vw, 7rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
}

.faq-comparison {
  --comparison-axis-size: 3rem;
  --comparison-axis-column: 3.5rem;
  --comparison-cell-height: 4.5rem;
  position: relative;
  width: 100%;
  padding: clamp(0.8rem, 1.6vw, 1.25rem);
  overflow: hidden;
  grid-area: comparison;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: clamp(1.6rem, 3vw, 2.4rem);
  background: rgb(255 255 255 / 42%);
  box-shadow:
    0 1.8rem 4.5rem rgb(80 64 12 / 11%),
    inset 0 1px 0 rgb(255 255 255 / 82%);
  backdrop-filter: blur(0.75rem);
}

.faq-comparison::before {
  position: absolute;
  top: -9rem;
  left: 50%;
  width: 25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgb(79 208 211 / 16%), transparent 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

.faq-comparison__heading {
  position: relative;
  z-index: 1;
  display: grid;
  padding: 0 0 clamp(0.7rem, 1.2vw, 0.95rem);
  grid-template-columns:
    minmax(0, 1fr) var(--comparison-axis-column) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.faq-comparison__label {
  display: flex;
  height: var(--comparison-cell-height);
  min-height: var(--comparison-cell-height);
  margin: 0;
  padding: 0.55rem 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.faq-comparison__label--standard {
  border: 1px dashed rgb(80 83 109 / 22%);
  color: var(--color-muted);
  background: rgb(255 255 255 / 36%);
}

.faq-comparison__label--cocobot {
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 0.9rem 2rem rgb(50 62 75 / 16%);
}

.faq-comparison__label--cocobot > span {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.06em;
}

.faq-comparison__label--cocobot > span > span {
  color: var(--color-accent);
}

.faq-comparison__versus {
  display: grid;
  width: var(--comparison-axis-size);
  justify-self: center;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 1.05rem;
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: 0 0.6rem 1.35rem rgb(49 114 118 / 13%);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.faq-comparison__board {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.45rem, 0.8vw, 0.65rem);
}

.faq-comparison__row {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.6rem, 1.15vw, 0.9rem);
  transition: transform 350ms var(--ease-out);
}

.faq-comparison__standard,
.faq-comparison__cocobot {
  display: grid;
  min-width: 0;
  min-height: var(--comparison-cell-height);
  margin: 0;
  padding: clamp(0.55rem, 1vw, 0.8rem) clamp(0.75rem, 1.2vw, 1rem);
  align-items: center;
  border-radius: clamp(1rem, 1.6vw, 1.3rem);
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 500;
  line-height: 1.4;
}

.faq-comparison__standard {
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid rgb(80 83 109 / 9%);
  color: var(--color-muted);
  background: rgb(255 255 255 / 40%);
}

.faq-comparison__cocobot {
  border: 1px solid rgb(79 208 211 / 26%);
  background: rgb(255 255 255 / 88%);
  font-weight: 500;
  box-shadow:
    0 0.8rem 2rem rgb(80 64 12 / 7%),
    inset 0 1px 0 #fff;
}

.faq-heading {
  position: sticky;
  top: clamp(2rem, 8vh, 6rem);
  display: grid;
  min-width: 0;
  grid-area: heading;
  justify-items: start;
}

.faq-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-kicker::before {
  width: 2.5rem;
  height: 2px;
  content: "";
  background: var(--color-accent);
}

.faq-heading h2 {
  max-width: 10ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}

.faq-accordion {
  display: grid;
  min-width: 0;
  grid-area: accordion;
  gap: clamp(0.75rem, 1.4vw, 1rem);
}

.faq-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: clamp(1.15rem, 1.8vw, 1.5rem);
  background: rgb(255 255 255 / 45%);
  box-shadow:
    0 0.8rem 2rem rgb(76 65 30 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 65%);
  transition:
    background-color 350ms ease,
    border-color 300ms ease,
    box-shadow 350ms ease,
    transform 350ms var(--ease-out);
}

.faq-item.is-open {
  border-color: rgb(79 208 211 / 45%);
  background: rgb(255 255 255 / 88%);
  box-shadow:
    0 1.25rem 3rem rgb(76 65 30 / 11%),
    inset 0 1px 0 #fff;
}

.faq-item h3 {
  margin: 0;
  font-size: inherit;
}

.faq-item__toggle {
  display: grid;
  width: 100%;
  min-height: clamp(5.5rem, 8vw, 6.7rem);
  padding: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: minmax(0, 1fr) 3.4rem;
  align-items: center;
  gap: clamp(0.85rem, 1.7vw, 1.35rem);
  border: 0;
  color: var(--color-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.faq-item__question {
  font-size: var(--font-size-highlight-copy);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: pretty;
}

.faq-item__icon {
  position: relative;
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: 0 0.55rem 1.25rem rgb(49 114 118 / 14%);
  transition:
    color 300ms ease,
    background-color 300ms ease,
    transform 500ms var(--ease-out);
}

.faq-item__icon span {
  position: absolute;
  width: 1.4rem;
  height: 0.15rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform 500ms var(--ease-out);
}

.faq-item__icon span:last-child {
  transform: rotate(90deg);
}

.faq-item.is-open .faq-item__icon {
  color: #fff;
  background: var(--color-text);
  transform: rotate(180deg);
}

.faq-item.is-open .faq-item__icon span:last-child {
  transform: rotate(0deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 650ms var(--ease-out),
    opacity 360ms ease,
    visibility 0s linear 650ms;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 650ms var(--ease-out),
    opacity 450ms ease 80ms,
    visibility 0s linear;
}

.faq-item__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-item__panel-inner > p {
  margin: 0 clamp(1rem, 1.8vw, 1.4rem)
    clamp(1.4rem, 2.4vw, 1.9rem) clamp(4.1rem, 6vw, 5.45rem);
  padding: clamp(0.1rem, 0.5vw, 0.35rem) 0 0
    clamp(1rem, 1.8vw, 1.4rem);
  border-left: 0.22rem solid var(--color-accent);
  font-size: var(--font-size-ui-copy);
  font-weight: 450;
  line-height: 1.65;
  text-wrap: pretty;
}

.faq-item__panel-inner > p + p {
  margin-top: calc(-1 * clamp(0.7rem, 1.2vw, 1rem));
}

.faq-item__lines {
  line-height: 1.85 !important;
}

.faq-item__toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
  border-radius: inherit;
}

.scene--personas {
  overflow: hidden;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at 7% 16%,
      rgb(79 208 211 / 16%),
      transparent 25rem
    ),
    radial-gradient(
      circle at 94% 88%,
      rgb(255 217 102 / 22%),
      transparent 28rem
    ),
    linear-gradient(145deg, #f8f6f4 0%, #f4f2f5 54%, #f8f7f4 100%);
}

.scene--personas::before,
.scene--personas::after {
  position: absolute;
  z-index: -1;
  width: clamp(18rem, 32vw, 34rem);
  aspect-ratio: 1;
  border-radius: 42% 58% 63% 37% / 46% 39% 61% 54%;
  content: "";
  filter: blur(0.2rem);
  opacity: 0.25;
  pointer-events: none;
  animation: personas-orbit 16s ease-in-out infinite alternate;
}

.scene--personas::before {
  top: -15rem;
  right: -10rem;
  border: 1px solid rgb(79 208 211 / 34%);
  background: rgb(79 208 211 / 20%);
}

.scene--personas::after {
  bottom: -18rem;
  left: -11rem;
  border: 1px solid rgb(230 173 2 / 28%);
  background: rgb(255 217 102 / 24%);
  animation-delay: -8s;
}

.scene--personas:target [data-personas-reveal],
.scene--personas:target [data-persona-card] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.personas-layout {
  max-width: 86rem;
}

.personas-heading {
  display: grid;
  justify-items: center;
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}

.personas-heading h2 {
  max-width: 23ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.personas-heading__brand {
  font-weight: 700;
  letter-spacing: -0.06em;
}

.personas-heading__brand span {
  color: var(--color-accent);
}

.personas-intro {
  max-width: 67rem;
  margin: clamp(1.5rem, 3.5vh, 2.4rem) auto 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  text-wrap: balance;
}

.personas-intro .personas-heading__brand {
  display: inline-block;
  margin-right: 0.18em;
  color: var(--color-text);
}

.personas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.3vw, 2rem);
  margin-top: clamp(7rem, 14vh, 9rem);
}

.persona-card {
  --persona-color: #2ebfc4;

  position: relative;
  display: grid;
  min-width: 0;
  min-height: 24rem;
  padding: clamp(5.6rem, 7vw, 6.5rem) clamp(1.25rem, 2.2vw, 2rem)
    clamp(1.6rem, 2.5vw, 2.2rem);
  overflow: visible;
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: clamp(1.6rem, 2.4vw, 2.2rem);
  background: rgb(255 255 255 / 76%);
  box-shadow:
    0 1.5rem 3.5rem rgb(55 64 77 / 9%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
  backdrop-filter: blur(0.55rem);
  transition:
    border-color 260ms ease,
    box-shadow 360ms ease,
    transform 360ms var(--ease-out);
}

.persona-card::before {
  position: absolute;
  top: 0;
  right: 2rem;
  left: 2rem;
  height: 0.22rem;
  border-radius: 0 0 999px 999px;
  content: "";
  background: var(--persona-color);
  opacity: 0.78;
}

.persona-card__portrait {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(8.8rem, 11.5vw, 10.7rem);
  aspect-ratio: 1;
  padding: 0.28rem;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1.1rem 2.5rem rgb(50 62 75 / 18%),
    0 0 0 0.35rem rgb(255 255 255 / 54%);
  transform: translate(-50%, -50%);
}

.persona-card__portrait::after {
  position: absolute;
  inset: -0.7rem;
  border: 1px dashed color-mix(in srgb, var(--persona-color) 55%, transparent);
  border-radius: 50%;
  content: "";
}

.persona-card__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.persona-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.persona-card h3 {
  margin: 0;
  color: var(--persona-color);
  font-size: var(--font-size-highlight-copy);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.persona-card__promise {
  max-width: 27rem;
  margin: 1rem 0 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 650;
  line-height: 1.4;
  text-wrap: balance;
}

.persona-card__description {
  max-width: 26rem;
  margin: 1rem 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-ui-copy);
  line-height: 1.55;
  text-wrap: balance;
}

.personas-footer {
  display: flex;
  max-width: 70rem;
  min-height: 6rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  padding: 1rem 1rem 1rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: clamp(1.5rem, 2vw, 2rem);
  color: #fff;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 8%), transparent 42%),
    var(--color-text);
  box-shadow:
    0 1.4rem 3.4rem rgb(50 56 76 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 12%);
}

.personas-footer p {
  max-width: 36rem;
  margin: 0;
  color: #fff;
  font-size: var(--font-size-ui-copy);
  line-height: 1.45;
  text-wrap: balance;
}

.personas-footer strong {
  color: var(--color-accent);
  font-weight: 700;
}

.personas-cta {
  display: inline-flex;
  min-height: var(--cta-height);
  flex: 0 0 auto;
  align-items: center;
  gap: 0.9rem;
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: #fff;
  font-size: var(--font-size-cta);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.7rem 1.8rem rgb(25 29 43 / 22%);
  transition:
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.personas-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
}

.personas-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene--formats {
  overflow: hidden;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at 8% 12%,
      rgb(255 255 255 / 72%),
      transparent 25rem
    ),
    radial-gradient(
      circle at 92% 86%,
      rgb(255 217 102 / 28%),
      transparent 28rem
    ),
    linear-gradient(145deg, #d8f3f3 0%, #c6e9e9 52%, #d5f3f3 100%);
}

.scene--formats::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgb(80 83 109 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 83 109 / 4%) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 78%);
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
  pointer-events: none;
}

.scene--formats::after {
  position: absolute;
  z-index: -1;
  top: -12rem;
  right: -11rem;
  width: clamp(22rem, 36vw, 40rem);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 5rem rgb(255 255 255 / 10%),
    0 0 0 10rem rgb(255 255 255 / 7%);
  pointer-events: none;
}

.scene--formats:target [data-formats-reveal],
.scene--formats:target [data-formats-card] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.formats-layout {
  max-width: 86rem;
}

.formats-heading {
  display: grid;
  justify-items: center;
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}

.formats-heading h2 {
  max-width: 24ch;
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.formats-heading__brand {
  font-weight: 700;
  letter-spacing: -0.06em;
}

.formats-heading__brand span {
  color: #2ebfc4;
}

.formats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  margin-top: clamp(5.5rem, 11vh, 8rem);
}

.formats-grid::before {
  position: absolute;
  top: 4.1rem;
  right: 8%;
  left: 8%;
  height: 1px;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    rgb(80 83 109 / 20%) 0 0.42rem,
    transparent 0.42rem 0.95rem
  );
}

.formats-card {
  --formats-accent: #2ebfc4;
  --formats-outcome-height: 7rem;
  --formats-cta-height: var(--cta-height);

  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  height: 100%;
  grid-template-rows:
    auto
    minmax(min-content, 1fr)
    var(--formats-outcome-height)
    var(--formats-cta-height);
  row-gap: 1.25rem;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: clamp(1.6rem, 2.4vw, 2.2rem);
  background: rgb(255 255 255 / 78%);
  box-shadow:
    0 1.7rem 4rem rgb(49 86 91 / 12%),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(0.65rem);
  transition:
    border-color 280ms ease,
    box-shadow 380ms ease,
    transform 380ms var(--ease-out);
}

.formats-card::before {
  position: absolute;
  top: 0;
  right: 2rem;
  left: 2rem;
  height: 0.25rem;
  border-radius: 0 0 999px 999px;
  content: "";
  background: var(--formats-accent);
}

.formats-card__header {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.formats-card__icons {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 8.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.formats-card__icons::before {
  position: absolute;
  z-index: -1;
  width: 7.5rem;
  aspect-ratio: 1;
  border: 1px dashed color-mix(
    in srgb,
    var(--formats-accent) 44%,
    transparent
  );
  border-radius: 50%;
  content: "";
}

.formats-card__icon {
  display: grid;
  width: 4.7rem;
  aspect-ratio: 1;
  flex: 0 0 4.7rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 50%;
  color: var(--formats-accent);
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 0.85rem 2rem rgb(50 62 75 / 12%);
}

.formats-card__icon--cocobot img {
  width: 2.8rem;
  height: auto;
}

.formats-card__icon--neutral svg {
  width: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formats-card__plus {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-text);
  font-size: 1.2rem;
  font-weight: 500;
  box-shadow: 0 0.5rem 1.2rem rgb(50 62 75 / 16%);
}

.formats-card h3 {
  display: flex;
  min-height: 4rem;
  margin: 0;
  align-items: center;
  justify-content: center;
  color: var(--formats-accent);
  font-size: var(--font-size-highlight-copy);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

.formats-card__list {
  display: grid;
  align-content: start;
  gap: clamp(1rem, 2vh, 1.35rem);
  margin: clamp(0.35rem, 1.1vh, 0.8rem) 0 0;
  padding: 0;
  list-style: none;
}

.formats-card__list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.formats-card__list li > span {
  display: grid;
  width: 1.5rem;
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--formats-accent);
  font-size: 0.82rem;
  line-height: 1;
}

.formats-card__list p {
  margin: 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 500;
  line-height: 1.5;
}

.formats-card__outcome {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(0.65rem, 1vw, 0.8rem) clamp(0.75rem, 1.1vw, 1rem);
  align-items: center;
  gap: clamp(0.65rem, 0.9vw, 0.9rem);
  border: 1px solid color-mix(
    in srgb,
    var(--formats-accent) 22%,
    transparent
  );
  border-radius: 1.2rem;
  color: var(--color-text);
  background: color-mix(
    in srgb,
    var(--formats-accent) 9%,
    transparent
  );
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  font-weight: 650;
  line-height: 1.45;
  text-wrap: balance;
}

.formats-card__outcome strong {
  margin-right: 0;
  flex: 0 0 auto;
  color: var(--formats-accent);
  font-size: 1.15em;
  letter-spacing: -0.045em;
}

.formats-card__cta {
  display: inline-flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 0.8rem 2rem rgb(50 62 75 / 16%);
  font-size: var(--font-size-cta);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.formats-card__cta-icon {
  display: grid;
  width: var(--cta-icon-size);
  aspect-ratio: 1;
  flex: 0 0 var(--cta-icon-size);
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.formats-card__cta-icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-cta:focus-visible,
.softskills-definition summary:focus-visible,
.personas-cta:focus-visible,
.formats-card__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    box-shadow:
      0 1.8rem 4.5rem rgb(49 114 118 / 20%),
      0 2px 0 rgb(80 83 109 / 8%);
    transform: translateY(-0.45rem);
  }

  .feature-card:hover .feature-card__media img {
    transform: scale(1.045);
  }

  .test-cta:not(.is-transitioning):hover {
    background: #44475f;
    box-shadow:
      0 1.4rem 3.2rem rgb(49 81 91 / 26%),
      inset 0 1px 0 rgb(255 255 255 / 14%);
    transform: translateY(-0.18rem);
  }

  .back-to-top.is-visible:hover {
    background: #5bd8db;
    box-shadow:
      0 1.4rem 3.2rem rgb(49 81 91 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 36%);
    transform: translateY(-0.18rem) scale(1);
  }

  .about-benefits li {
    transition:
      transform 320ms var(--ease-out),
      background-color 240ms ease;
  }

  .about-benefits li:hover {
    background: rgb(255 250 240 / 38%);
    transform: translateY(-0.3rem);
  }

  .about-cta:hover {
    color: #fff;
    background: var(--color-text);
    transform: translateY(-0.18rem);
  }

  .transformation-steps li:hover {
    border-color: rgb(79 208 211 / 38%);
    box-shadow:
      0 1.15rem 2.8rem rgb(64 72 87 / 10%),
      inset 0 1px 0 rgb(255 255 255 / 90%);
    transform: translateX(0.35rem);
  }

  .persona-card:hover {
    border-color: color-mix(
      in srgb,
      var(--persona-color) 38%,
      transparent
    );
    box-shadow:
      0 2rem 4.5rem rgb(55 64 77 / 14%),
      inset 0 1px 0 #fff;
    transform: translateY(-0.55rem);
  }

  .personas-cta:hover {
    background: var(--color-accent);
    box-shadow: 0 1rem 2.4rem rgb(25 29 43 / 28%);
    transform: translateY(-0.18rem);
  }

  .formats-card:hover {
    border-color: color-mix(
      in srgb,
      var(--formats-accent) 32%,
      transparent
    );
    box-shadow:
      0 2.2rem 5rem rgb(49 86 91 / 17%),
      inset 0 1px 0 #fff;
    transform: translateY(-0.55rem);
  }

  .formats-card__cta:hover {
    background: #44475f;
    box-shadow: 0 1.1rem 2.6rem rgb(50 62 75 / 23%);
    transform: translateY(-0.16rem);
  }

  .usage-more__toggle:hover {
    background: #44475f;
    box-shadow:
      0 1.5rem 3.5rem rgb(62 61 77 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 15%);
    transform: translateY(-0.18rem);
  }

  .usage-faq-cta:hover {
    background: #44475f;
    box-shadow: 0 1.15rem 2.7rem rgb(50 62 75 / 24%);
    transform: translateY(-0.16rem);
  }

  .companion-card:hover {
    z-index: 3;
    transform: translateY(calc(var(--card-shift) - 0.65rem))
      rotate(var(--card-tilt)) scale(1.015);
  }

  .companion-card:hover .companion-card__inner {
    transform: rotateY(180deg);
  }

  .testimonial-card:hover {
    z-index: 3;
    box-shadow:
      0 2rem 4.5rem rgb(67 57 101 / 18%),
      inset 0 1px 0 #fff;
    transform: translateY(calc(var(--testimonial-shift) - 0.45rem))
      rotate(var(--testimonial-tilt)) scale(1.012);
  }

  .testimonials-nav:not(:disabled):hover {
    background: var(--color-accent);
    transform: scale(1.06);
  }

  .faq-item:not(.is-open):hover {
    border-color: rgb(79 208 211 / 32%);
    background: rgb(255 255 255 / 62%);
    transform: translateX(0.3rem);
  }

  .faq-item:not(.is-open):hover .faq-item__icon {
    transform: rotate(90deg);
  }
}

.section-title {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.4rem, 4.8vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.section-title span {
  display: block;
  color: var(--color-accent);
}

.section-copy {
  max-width: 39rem;
  margin: clamp(2rem, 5vh, 4rem) 0 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

@keyframes turquoise-gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes personas-orbit {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(-3deg);
  }

  100% {
    transform: translate3d(5%, 4%, 0) rotate(5deg);
  }
}

@media (max-width: 67.99rem) {
  .formats-grid {
    width: min(100%, 52rem);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .formats-grid::before {
    top: 4rem;
    right: auto;
    bottom: 4rem;
    left: 50%;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgb(80 83 109 / 20%) 0 0.42rem,
      transparent 0.42rem 0.95rem
    );
  }

  .companion-grid {
    width: min(100%, 54rem);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .companion-card {
    height: 34rem;
  }

  .companion-card--barometer {
    --card-shift: 2.5rem;
  }

  .companion-card--targeted {
    --card-shift: 1rem;
    width: calc((100% - clamp(1.25rem, 2.8vw, 2.4rem)) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .testimonials-proof {
    width: min(100%, 48rem);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonials-proof__item--wide {
    grid-column: 1 / -1;
  }

  .testimonials-carousel {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
  }

  .testimonials-nav {
    display: grid;
    width: 4.6rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 50%;
    color: var(--color-text);
    background: rgb(255 255 255 / 76%);
    box-shadow:
      0 0.9rem 2.2rem rgb(67 57 101 / 15%),
      inset 0 1px 0 #fff;
    cursor: pointer;
    transition:
      opacity 220ms ease,
      background-color 240ms ease,
      transform 260ms var(--ease-out);
  }

  .testimonials-nav:disabled {
    opacity: 0.32;
    cursor: default;
  }

  .testimonials-nav svg {
    width: 2.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .testimonials-nav:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
  }

  .testimonials-viewport {
    --testimonial-card-height: 26rem;
    width: min(100%, 38rem);
    height: calc(var(--testimonial-card-height) + 6rem);
    overflow: hidden;
  }

  .testimonials-track {
    display: flex;
    padding: 3rem 0;
    flex-direction: column;
    gap: 1rem;
    transition: transform 680ms var(--ease-out);
    will-change: transform;
  }

  .testimonials-viewport.is-measuring {
    height: auto;
  }

  .testimonials-viewport.is-measuring .testimonials-track {
    transform: none !important;
    transition: none;
  }

  .testimonials-viewport.is-measuring .testimonial-card {
    height: auto;
    flex-basis: auto;
  }

  .testimonial-card {
    --testimonial-shift: 0rem;
    width: 100%;
    height: var(--testimonial-card-height);
    flex: 0 0 var(--testimonial-card-height);
    opacity: 0.46;
    transform: rotate(var(--testimonial-tilt)) scale(0.94);
    transition:
      opacity 420ms ease,
      box-shadow 320ms ease,
      transform 520ms var(--ease-out);
  }

  .testimonial-card.is-active {
    z-index: 2;
    opacity: 1;
    transform: rotate(var(--testimonial-tilt)) scale(1);
  }

  .faq-layout {
    width: min(100%, 52rem);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "comparison"
      "accordion";
    gap: 3.5rem;
  }

  .faq-heading {
    position: static;
    justify-items: center;
    text-align: center;
  }

  .faq-heading h2 {
    max-width: 18ch;
  }

}

@media (max-width: 67.99rem) and (min-width: 48rem) {
  .transformation-layout {
    grid-template-columns: minmax(16rem, 0.82fr) minmax(22rem, 1.18fr);
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  .transformation-layout--reverse {
    grid-template-columns: minmax(22rem, 1.18fr) minmax(16rem, 0.82fr);
  }

  .transformation-content h2 {
    font-size: var(--font-size-section-title);
  }

  .transformation-visual__caption {
    right: -0.5rem;
  }

  .transformation-steps li {
    padding-right: 2.6rem;
  }

  .personas-grid {
    gap: 0.85rem;
  }

  .persona-card {
    min-height: 25rem;
    padding-right: 1.05rem;
    padding-left: 1.05rem;
  }

  .persona-card__portrait {
    width: clamp(8.2rem, 14vw, 9.5rem);
  }

  .persona-card h3 {
    font-size: var(--font-size-highlight-copy);
  }

  .persona-card__promise {
    font-size: var(--font-size-ui-copy);
  }

  .persona-card__description {
    font-size: var(--font-size-ui-copy);
  }
}

@media (max-width: 47.99rem) {
  .scene {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .scene--hero {
    padding: 0;
  }

  .hero-half {
    padding-top: clamp(1.5rem, 4svh, 2.5rem);
    padding-bottom: clamp(1.5rem, 4svh, 2.5rem);
  }

  .hero-half--features {
    padding-right: 0;
    padding-left: 0;
  }

  .hero-title {
    max-width: 40ch;
    font-size: clamp(1.4rem, 5.5vw, 1.85rem);
    line-height: 1.14;
    text-wrap: pretty;
  }

  .section-title {
    letter-spacing: -0.055em;
  }

  .scene__ambient {
    display: none;
  }

  .scene__content--hero {
    min-height: 0;
    margin: auto;
    padding: 0;
  }

  .scene__content--hero-features {
    width: 100%;
  }

  .hero-promises {
    display: grid;
    justify-items: center;
    gap: 0;
    margin-top: clamp(2rem, 5vh, 3rem);
    text-align: center;
  }

  .hero-promises li {
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
  }

  .hero-promises li::before {
    width: auto;
    margin: 0.22rem 0 0.08rem;
    font-size: 0.82rem;
  }

  .hero-promises li:first-child::before {
    display: none;
  }

  .scene--features {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .scene__content--features {
    width: 100%;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: 1rem;
    margin-right: 0;
    margin-left: 0;
    padding: 0 var(--page-gutter) 2rem;
    overflow: visible;
    scroll-snap-type: none;
  }

  .feature-grid::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    width: 100%;
    scroll-snap-align: none;
  }

  .feature-card__body {
    min-height: 5.4rem;
  }

  .feature-statement {
    min-height: auto;
    padding: 5rem var(--page-gutter) 2rem;
  }

  .feature-statement__copy {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .feature-statement__copy::before {
    top: 8%;
    right: auto;
    bottom: 8%;
    left: 3.25rem;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgb(80 83 109 / 22%) 0 0.35rem,
      transparent 0.35rem 0.8rem
    );
  }

  .feature-statement h3,
  .feature-statement h3:nth-child(2) {
    min-height: 8.5rem;
    padding: 1rem;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0.85rem;
    font-size: var(--font-size-stat-copy);
    transform: none;
  }

  .feature-stat__value {
    width: 4.6rem;
    min-width: 0;
    font-size: clamp(2.7rem, 13vw, 3.35rem);
  }

  .cta-stage {
    height: var(--cta-height);
    min-height: var(--cta-height);
  }

  .test-cta {
    min-height: var(--cta-height);
  }

  .test-cta__icon {
    width: var(--cta-icon-size);
  }

  .test-cta__icon svg {
    width: var(--cta-icon-glyph-size);
  }

  .scene--about {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .scene__content--about {
    gap: 2.75rem;
  }

  .about-heading h2 {
    font-size: var(--font-size-section-title);
  }

  .about-benefits {
    grid-template-columns: 1fr;
  }

  .about-benefits li {
    min-height: auto;
  }

  .about-actions,
  .softskills-definition {
    width: 100%;
  }

  .softskills-definition summary {
    text-align: left;
    white-space: normal;
  }

  .softskills-definition__panel {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 0.9rem;
    transform: translateY(0.5rem);
  }

  .softskills-definition__panel::after {
    display: none;
  }

  .softskills-definition[open] .softskills-definition__panel {
    transform: translateY(0);
  }

  .scene--transformation {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .scene--how-it-works {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .transformation-layout {
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }

  .transformation-visual {
    max-width: 32rem;
    margin-bottom: 0.75rem;
    justify-self: center;
  }

  .transformation-visual::before {
    inset: 0.85rem -0.65rem -0.85rem 0.65rem;
  }

  .usage-visual::before {
    inset: 0.85rem 0.65rem -0.85rem -0.65rem;
  }

  .transformation-visual::after {
    top: -0.8rem;
    left: -0.65rem;
  }

  .usage-visual::after {
    right: -0.65rem;
    left: auto;
  }

  .transformation-visual__frame {
    aspect-ratio: 4 / 3;
  }

  .transformation-visual__frame img {
    object-position: center 36%;
  }

  .transformation-visual__caption {
    right: 0.75rem;
    bottom: -2rem;
    min-width: min(16rem, calc(100% - 1.5rem));
  }

  .usage-visual .transformation-visual__caption {
    right: auto;
    left: 0.75rem;
  }

  .transformation-content h2 {
    max-width: 22ch;
    font-size: var(--font-size-section-title);
  }

  .scene--transformation .transformation-content h2 {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .transformation-steps {
    margin-top: 2.5rem;
  }

  .transformation-steps li {
    min-height: 0;
    padding: 0.85rem 2.5rem 0.85rem 0.85rem;
    gap: 0.9rem;
  }

  .usage-intro {
    width: 100%;
    border-radius: 1.3rem;
  }

  .transformation-step__icon {
    width: 3.25rem;
    border-radius: 1rem;
  }

  .transformation-step__icon svg {
    width: 1.5rem;
  }

  .scene--personas {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .personas-heading h2 {
    max-width: 21ch;
    font-size: var(--font-size-section-title);
  }

  .personas-intro {
    margin-top: 1.35rem;
    font-size: clamp(0.94rem, 4vw, 1.06rem);
    line-height: 1.55;
  }

  .personas-grid {
    grid-template-columns: 1fr;
    gap: 7rem;
    margin-top: 7rem;
  }

  .persona-card {
    width: min(100%, 32rem);
    min-height: 0;
    padding-top: 5.8rem;
    justify-self: center;
  }

  .persona-card__portrait {
    width: clamp(8.5rem, 36vw, 10.5rem);
  }

  .persona-card h3 {
    font-size: var(--font-size-highlight-copy);
  }

  .persona-card__promise {
    font-size: var(--font-size-ui-copy);
  }

  .persona-card__description {
    font-size: var(--font-size-ui-copy);
  }

  .personas-footer {
    width: min(100%, 32rem);
    min-height: 0;
    margin-top: 3rem;
    padding: 1.35rem;
    flex-direction: column;
    align-items: stretch;
    justify-self: center;
    text-align: center;
  }

  .personas-footer p {
    margin: 0 auto;
  }

  .personas-cta {
    width: 100%;
    justify-content: space-between;
  }

  .scene--formats {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .formats-heading h2 {
    max-width: 21ch;
    font-size: var(--font-size-section-title);
  }

  .formats-grid {
    margin-top: 5.5rem;
  }

  .formats-card {
    --formats-outcome-height: auto;
    --formats-cta-height: auto;

    height: auto;
    padding: 1.25rem;
    grid-template-rows: auto auto auto auto;
    row-gap: 1rem;
  }

  .formats-card__icons {
    min-height: 6rem;
  }

  .formats-card__icon {
    width: 4.25rem;
    flex-basis: 4.25rem;
  }

  .formats-card__list {
    margin-top: 0.5rem;
  }

  .formats-card h3 {
    min-height: 0;
    margin-top: 0.6rem;
  }

  .formats-card__outcome {
    height: auto;
    min-height: 0;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .formats-card__cta {
    height: auto;
    min-height: var(--cta-height);
  }

  .usage-more__toggle {
    min-height: var(--cta-height);
    border-radius: 1.35rem;
  }

  .usage-more__toggle-icon {
    width: var(--cta-icon-size);
    flex-basis: var(--cta-icon-size);
    border-radius: 1.1rem;
  }

  .usage-more__grid {
    grid-template-columns: 1fr;
  }

  .usage-more__card {
    min-height: 0;
  }

  .usage-faq-cta {
    width: 100%;
  }

  .scene--companion {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .companion-heading h2 {
    max-width: 22ch;
  }

  .companion-heading > p {
    max-width: 30ch;
    line-height: 1.5;
  }

  .companion-grid {
    width: min(100%, 32rem);
    margin-top: 4.5rem;
    padding-right: 0.35rem;
    padding-bottom: 2rem;
    padding-left: 0.35rem;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .companion-card,
  .companion-card--targeted {
    --card-shift: 0rem;
    width: 100%;
    height: clamp(30rem, 132vw, 35rem);
    grid-column: auto;
  }

  .companion-card--training {
    --card-tilt: -1.15deg;
  }

  .companion-card--barometer {
    --card-tilt: 0.9deg;
  }

  .companion-card--targeted {
    --card-tilt: -0.75deg;
  }

  .companion-card__front p {
    max-width: 24ch;
  }

  .scene--testimonials {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .testimonials-heading h2 {
    max-width: 19ch;
  }

  .testimonials-proof {
    margin-top: 2.75rem;
    grid-template-columns: 1fr;
  }

  .testimonials-proof__item,
  .testimonials-proof__item--wide {
    min-height: 0;
    grid-column: auto;
  }

  .testimonials-carousel {
    margin-top: 3.5rem;
  }

  .testimonials-nav {
    width: 4.25rem;
  }

  .testimonials-nav svg {
    width: 2.55rem;
  }

  .testimonials-viewport {
    --testimonial-card-height: clamp(23.5rem, 108vw, 26rem);
    width: min(100%, 34rem);
    height: calc(var(--testimonial-card-height) + 4.75rem);
  }

  .testimonials-track {
    padding-top: 2.375rem;
    padding-bottom: 2.375rem;
    gap: 0.85rem;
  }

  .testimonial-card {
    padding: 1.25rem;
  }

  .testimonial-card__header {
    gap: 0.8rem;
  }

  .testimonial-card blockquote {
    margin-top: 1.5rem;
    line-height: 1.5;
  }

  .scene--faq {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .faq-comparison {
    --comparison-axis-size: 3rem;
    --comparison-axis-column: 3rem;
    --comparison-cell-height: 4.25rem;
    padding: 0.65rem;
    border-radius: 1.5rem;
  }

  .faq-comparison__heading {
    padding: 0 0 0.65rem;
    grid-template-columns:
      minmax(0, 1fr) var(--comparison-axis-column) minmax(0, 1fr);
    gap: 0.45rem;
  }

  .faq-comparison__label {
    height: var(--comparison-cell-height);
    min-height: var(--comparison-cell-height);
    padding: 0.45rem;
    border-radius: 1rem;
    font-size: clamp(0.76rem, 3.5vw, 0.9rem);
  }

  .faq-comparison__label--cocobot > span {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .faq-comparison__versus {
    border: 0;
    font-size: 0.7rem;
  }

  .faq-comparison__board {
    gap: 0.45rem;
  }

  .faq-comparison__row,
  .faq-comparison__row:nth-child(even) {
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  .faq-comparison__standard,
  .faq-comparison__cocobot {
    min-height: var(--comparison-cell-height);
    padding: 0.6rem 0.65rem;
    border-radius: 0.95rem;
  }

  .faq-layout {
    gap: 3rem;
  }

  .faq-accordion {
    gap: 0.7rem;
  }

  .faq-item__toggle {
    min-height: 5.4rem;
    padding: 0.7rem;
    grid-template-columns: minmax(0, 1fr) 3rem;
    gap: 0.65rem;
  }

  .faq-item__icon {
    width: 3rem;
  }

  .faq-item__icon span {
    width: 1.2rem;
  }

  .faq-item__panel-inner > p {
    margin-right: 0.85rem;
    margin-bottom: 1.35rem;
    margin-left: 0.85rem;
    padding-left: 0.9rem;
    line-height: 1.6;
  }

  .faq-item__lines {
    line-height: 1.75 !important;
  }
}

/*
 * Les grands écrans restent la référence visuelle. Lorsque Windows, le zoom
 * ou l'interface du navigateur réduisent la hauteur utile, seules les marges
 * structurelles se resserrent : les composants conservent leurs proportions.
 */
@media (max-height: 64rem) and (min-width: 48rem) {
  :root {
    --scene-space-block: clamp(3.75rem, 7vh, 5.5rem);
  }

  .scene--about {
    padding-top: clamp(2.25rem, 4.5vh, 3.25rem);
    padding-bottom: clamp(2.25rem, 4.5vh, 3.25rem);
  }

  .scene__content--about {
    gap: clamp(1.25rem, 2.5vh, 1.75rem);
  }

  .about-heading {
    gap: clamp(0.75rem, 1.5vh, 1rem);
  }

  .about-heading__logo {
    width: clamp(5.25rem, 9vh, 6.25rem);
  }

  .about-benefits {
    gap: clamp(0.65rem, 1.5vh, 0.9rem);
  }

  .about-benefits li {
    min-height: clamp(5.75rem, 11vh, 6.5rem);
    padding: clamp(0.8rem, 1.8vh, 1.1rem) clamp(1rem, 1.6vw, 1.5rem);
  }

  .about-actions {
    gap: clamp(0.5rem, 1vh, 0.75rem);
  }

  .scene--how-it-works {
    padding-top: clamp(2.25rem, 4.5vh, 3.25rem);
    padding-bottom: clamp(2.25rem, 4.5vh, 3.25rem);
  }

  .scene--how-it-works .transformation-layout--reverse {
    row-gap: clamp(1.25rem, 2.8vh, 1.75rem);
  }

  .scene--how-it-works .usage-visual {
    max-width: clamp(24rem, 46vh, 28rem);
  }

  .scene--how-it-works .usage-intro {
    margin-top: clamp(0.75rem, 1.6vh, 1rem);
  }

  .scene--how-it-works .usage-steps {
    margin-top: clamp(0.65rem, 1.4vh, 0.9rem);
  }

  .scene--how-it-works .usage-steps li {
    min-height: clamp(5rem, 10vh, 5.75rem);
  }

  .scene--how-it-works .usage-more__toggle {
    min-height: var(--cta-height);
  }

  .scene--how-it-works .usage-faq-cta {
    margin-top: clamp(0.75rem, 1.6vh, 1rem);
  }

  .scene--personas {
    padding-top: clamp(2.5rem, 5vh, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
  }

  .personas-intro {
    margin-top: clamp(1rem, 2.2vh, 1.35rem);
  }

  .personas-grid {
    margin-top: clamp(5.5rem, 10.5vh, 6.5rem);
  }

  .persona-card {
    min-height: clamp(21.5rem, 42vh, 23rem);
    padding-top: clamp(5.25rem, 10.5vh, 5.9rem);
    padding-bottom: clamp(1.15rem, 2.2vh, 1.45rem);
  }

  .personas-footer {
    min-height: calc(var(--cta-height) + 1rem);
    margin-top: clamp(1.25rem, 2.7vh, 1.75rem);
    padding: 0.5rem 0.5rem 0.5rem clamp(1.25rem, 2vw, 2rem);
  }

  .scene--formats {
    padding-top: clamp(2.5rem, 5vh, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
  }

  .formats-grid {
    margin-top: clamp(3rem, 6vh, 4rem);
  }

  .formats-card {
    --formats-outcome-height: 5.75rem;

    row-gap: clamp(0.65rem, 1.4vh, 0.85rem);
    padding: clamp(1rem, 2vh, 1.25rem);
  }

  .formats-card__icons {
    min-height: 5.75rem;
  }

  .formats-card__icons::before {
    width: 5.7rem;
  }

  .formats-card__icon {
    width: 3.9rem;
    flex-basis: 3.9rem;
  }

  .formats-card__icon--cocobot img {
    width: 2.35rem;
  }

  .formats-card__icon--neutral svg {
    width: 2.45rem;
  }

  .formats-card__plus {
    width: 1.7rem;
    flex-basis: 1.7rem;
  }

  .formats-card h3 {
    min-height: 3.25rem;
  }

  .formats-card__list {
    gap: clamp(0.65rem, 1.3vh, 0.8rem);
    margin-top: 0;
  }

  .formats-card__outcome {
    padding: 0.5rem 0.75rem;
  }

  .scene--companion {
    padding-top: clamp(2rem, 4vh, 3rem);
    padding-bottom: clamp(2rem, 4vh, 3rem);
  }

  .companion-heading > p {
    margin-top: clamp(0.5rem, 1.1vh, 0.75rem);
  }

  .companion-grid {
    margin-top: clamp(1.75rem, 3.8vh, 2.5rem);
    padding-bottom: clamp(2.5rem, 5vh, 3.25rem);
  }

  .companion-card {
    height: clamp(24.5rem, 48vh, 27rem);
  }

  .companion-card--training {
    --card-shift: 0.4rem;
  }

  .companion-card--barometer {
    --card-shift: 1.25rem;
  }

  .companion-card__face {
    padding: clamp(1rem, 2vh, 1.35rem);
  }

  .companion-card__bubble {
    width: clamp(5.5rem, 7.5vw, 6.75rem);
  }

  .companion-card__front p {
    margin-top: clamp(1rem, 2.2vh, 1.4rem);
  }

  .companion-card__hint {
    bottom: clamp(1rem, 2.2vh, 1.4rem);
  }

  .companion-cta {
    min-height: var(--cta-height);
    margin: 0 auto;
  }
}

@supports (height: 100svh) {
  @media (max-height: 64rem) and (min-width: 48rem) {
    :root {
      --scene-space-block: clamp(3.75rem, 7svh, 5.5rem);
    }
  }
}

@media (max-height: 46rem) and (min-width: 48rem) {
  .scene--hero {
    padding-top: 0;
    padding-bottom: 0;
  }

  .scene__content--hero {
    min-height: 0;
    margin: auto;
    padding: 0;
  }

  .hero-title {
    max-width: 40ch;
    font-size: clamp(1.7rem, 4.7vh, 2.75rem);
  }

  .hero-promises {
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
  }

}

/* Desktop compact : dernier palier avant la mise en page tablette. */
@media (max-width: 87.5rem) and (max-height: 46rem) and (min-width: 68rem) {
  .scene--transformation {
    padding-top: clamp(1.5rem, 4vh, 2rem);
    padding-bottom: clamp(1.5rem, 4vh, 2rem);
  }

  .scene--transformation .transformation-layout {
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  .scene--transformation .transformation-visual {
    max-width: min(27rem, 68vh);
  }

  .scene--transformation .transformation-steps {
    gap: clamp(0.45rem, 1.1vh, 0.65rem);
    margin-top: clamp(0.75rem, 2vh, 1rem);
  }

  .scene--transformation .transformation-steps li {
    min-height: clamp(4.15rem, 10.7vh, 4.55rem);
    padding: clamp(0.5rem, 1.25vh, 0.65rem) 2.25rem
      clamp(0.5rem, 1.25vh, 0.65rem) 0.7rem;
    gap: clamp(0.7rem, 1.25vw, 1rem);
  }

  .scene--transformation .transformation-step__icon {
    width: clamp(2.35rem, 6vh, 2.6rem);
  }

  .scene--transformation .transformation-step__icon svg {
    width: clamp(1.65rem, 4.4vh, 1.85rem);
  }

  .scene--transformation .transformation-steps li::after {
    top: 0.55rem;
    right: 0.7rem;
  }
}

@media (max-height: 34rem) and (min-width: 48rem) {
  .scene__content--hero {
    min-height: 0;
    padding: 0;
  }

  .hero-title {
    font-size: clamp(1.6rem, 4.7vh, 2.3rem);
  }

  .hero-promises {
    margin-top: 1rem;
  }

}

/* Équipe, coachs et écosystème -------------------------------------------- */

.about-team,
.about-founders,
.about-coaches,
.about-ecosystem {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.about-team {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5rem, 8vh, 8rem) 0 clamp(5.5rem, 9vh, 9rem);
  align-items: center;
  background:
    radial-gradient(circle at 12% 22%, rgb(255 255 255 / 25%), transparent 24rem),
    linear-gradient(
      0deg,
      rgb(230 173 2) 0%,
      rgb(255 217 102) 50%,
      rgb(230 173 2) 100%
    );
}

.about-team::before,
.about-founders::before,
.about-coaches::before,
.about-ecosystem::before {
  position: absolute;
  z-index: -1;
  width: min(70rem, 82vw);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.about-team::before {
  top: -29rem;
  right: -20rem;
  box-shadow:
    0 0 0 5.5rem rgb(255 255 255 / 13%),
    0 0 0 11rem rgb(255 255 255 / 8%);
}

.about-founders {
  padding: clamp(5.5rem, 9vh, 9rem) 0 clamp(5.5rem, 9vh, 9rem);
  background:
    radial-gradient(circle at 89% 12%, rgb(255 217 102 / 31%), transparent 23rem),
    linear-gradient(145deg, #eefafa 0%, #c9eeee 52%, #f6f6f9 100%);
}

.about-founders::before {
  top: -29rem;
  right: -20rem;
  box-shadow:
    0 0 0 5.5rem rgb(255 255 255 / 13%),
    0 0 0 11rem rgb(255 255 255 / 8%);
}

.about-founders .about-profiles {
  margin-top: 0;
}

.about-section-heading {
  display: grid;
  width: min(100%, 82rem);
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.about-section-heading > img {
  width: clamp(5.5rem, 7vw, 7.5rem);
  height: auto;
  filter: drop-shadow(0 1rem 1.8rem rgb(41 104 109 / 15%));
}

.about-section-heading h2,
.about-section-title h2,
.about-profiles > h2,
.about-builders h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.about-section-heading h2 {
  max-width: 24ch;
}

.about-section-heading p {
  max-width: 68ch;
  margin: clamp(0.8rem, 1.5vh, 1.2rem) 0 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.5;
  text-wrap: pretty;
}

.about-expertise {
  width: min(100%, 82rem);
  margin: clamp(3rem, 5vh, 4.5rem) auto 0;
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: clamp(1.6rem, 2.5vw, 2.4rem);
  background: rgb(255 255 255 / 70%);
  box-shadow:
    0 1.8rem 4rem rgb(44 103 108 / 12%),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(0.5rem);
}

.about-expertise h3 {
  max-width: 42ch;
  margin: 0 auto clamp(1.5rem, 2.8vh, 2.25rem);
  font-size: clamp(1.35rem, 1.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.about-expertise ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.25rem);
  list-style: none;
}

.about-expertise li {
  display: grid;
  min-width: 0;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  border: 1px solid rgb(79 208 211 / 26%);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 72%);
}

.about-expertise li > span {
  display: grid;
  width: 2.15rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-accent);
  font-size: 1.2rem;
  line-height: 1;
}

.about-expertise li p {
  margin: 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.48;
  text-wrap: pretty;
}

.about-profiles {
  margin-top: clamp(5rem, 9vh, 8rem);
}

.about-profiles > h2 {
  max-width: 31ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.about-profile-carousel {
  margin-top: clamp(3rem, 5.5vh, 4.75rem);
}

.about-profile-carousel .testimonials-track {
  padding-bottom: clamp(2rem, 4vh, 3.5rem);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.about-profiles--founders .testimonials-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-profile-card {
  --testimonial-shift: 0rem;
  height: auto;
  padding: clamp(1.25rem, 1.6vw, 1.65rem);
  transform: rotate(var(--testimonial-tilt));
}

.about-profile-card--coral {
  --testimonial-accent: #ff685a;
  --testimonial-tilt: -0.8deg;
}

.about-profile-card--turquoise {
  --testimonial-accent: var(--color-accent);
  --testimonial-tilt: 0.65deg;
}

.about-profile-card--gold {
  --testimonial-accent: #e6ad02;
  --testimonial-tilt: -0.55deg;
}

.about-profile-card--violet {
  --testimonial-accent: #a14ff0;
  --testimonial-tilt: 0.8deg;
}

.about-profile-card .testimonial-card__header {
  grid-template-columns: 5.2rem minmax(0, 1fr);
}

.about-profile-card .testimonial-card__avatar {
  width: 5.2rem;
}

.about-profile-card h3 {
  color: color-mix(in srgb, var(--testimonial-accent) 84%, var(--color-text));
}

.about-profile-card__expertise {
  position: relative;
  z-index: 1;
  margin: clamp(1.25rem, 2.4vh, 1.8rem) 0 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--testimonial-accent) 25%, transparent);
  font-size: clamp(0.82rem, 0.7vw, 0.96rem);
  font-weight: 700;
  line-height: 1.4;
}

.about-profile-card blockquote {
  margin-top: clamp(1.25rem, 2.5vh, 1.8rem);
  font-size: clamp(0.8rem, 0.63vw, 0.94rem);
  line-height: 1.52;
}

.about-section-actions {
  display: flex;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.about-page-cta--outline {
  border-color: rgb(80 83 109 / 40%);
  color: var(--color-text);
  background: rgb(255 255 255 / 78%);
}

.about-coaches {
  padding: clamp(5.5rem, 9vh, 9rem) 0 clamp(5rem, 8vh, 8rem);
  background:
    radial-gradient(circle at 8% 20%, rgb(79 208 211 / 17%), transparent 26rem),
    linear-gradient(0deg, rgb(198 187 225 / 72%) 0%, rgb(228 222 242 / 72%) 48%, #f6f6f9 100%);
}

.about-coaches::before {
  top: -32rem;
  left: -17rem;
  border-color: rgb(161 79 240 / 10%);
  box-shadow:
    0 0 0 6rem rgb(255 255 255 / 13%),
    0 0 0 12rem rgb(255 255 255 / 7%);
}

.about-section-title {
  display: flex;
  justify-content: center;
  text-align: center;
}

.about-section-title h2 {
  max-width: 30ch;
}

.about-profile-carousel--coaches .testimonials-track {
  align-items: stretch;
}

.about-coach-card {
  height: auto;
}

.about-coach-card blockquote {
  font-size: clamp(0.77rem, 0.58vw, 0.9rem);
  line-height: 1.48;
}

.about-ecosystem {
  padding: clamp(5.5rem, 9vh, 9rem) 0 clamp(5rem, 9vh, 8rem);
  background:
    radial-gradient(circle at 92% 85%, rgb(79 208 211 / 13%), transparent 25rem),
    linear-gradient(180deg, #f6f6f9 0%, #fff8e6 100%);
}

.about-ecosystem::before {
  right: -28rem;
  bottom: -39rem;
  border-color: rgb(230 173 2 / 12%);
  box-shadow:
    0 0 0 6rem rgb(255 217 102 / 8%),
    0 0 0 12rem rgb(255 217 102 / 5%);
}

.about-ecosystem__grid {
  display: grid;
  width: min(100%, 76rem);
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.about-ecosystem-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 25rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  align-content: start;
  justify-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 76%);
  border-radius: clamp(1.5rem, 2.2vw, 2rem);
  text-align: center;
  background: rgb(255 255 255 / 84%);
  box-shadow:
    0 1.7rem 3.8rem rgb(67 57 101 / 11%),
    inset 0 1px 0 #fff;
}

.about-ecosystem-card::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.2rem;
  left: 1.5rem;
  height: 0.2rem;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.about-ecosystem-card__visual {
  display: grid;
  width: clamp(7rem, 9vw, 9rem);
  height: clamp(7rem, 9vw, 9rem);
  place-items: center;
  margin-bottom: clamp(1.25rem, 2.5vh, 1.8rem);
}

.about-ecosystem-card__visual img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.about-ecosystem-card__visual--people {
  border-radius: 50%;
  color: var(--color-accent);
  background: rgb(79 208 211 / 12%);
}

.about-ecosystem-card__visual--people svg {
  width: 72%;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-ecosystem-card h3 {
  margin: 0;
  color: var(--color-accent);
  font-size: clamp(1.2rem, 1.35vw, 1.6rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
}

.about-ecosystem-card p,
.about-ecosystem-card li {
  font-size: var(--font-size-ui-copy);
  line-height: 1.48;
}

.about-ecosystem-card p {
  margin: 1rem 0 0;
}

.about-ecosystem-card__role {
  font-weight: 700;
}

.about-ecosystem-card ul {
  display: grid;
  margin: 1.25rem 0 0;
  padding: 0;
  gap: 0.8rem;
  text-align: left;
  list-style: none;
}

.about-ecosystem-card li {
  position: relative;
  padding-left: 1.35rem;
}

.about-ecosystem-card li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "✭";
  color: var(--color-accent);
}

.about-builders {
  display: grid;
  width: min(100%, 76rem);
  margin: clamp(5rem, 9vh, 8rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: clamp(1.5rem, 2.5vw, 2.25rem);
  background: linear-gradient(135deg, rgb(255 217 102 / 55%), rgb(255 255 255 / 88%));
  box-shadow: 0 1.7rem 3.8rem rgb(92 69 0 / 11%);
}

.about-builders__icon {
  display: grid;
  width: clamp(4.2rem, 6vw, 6rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-accent);
  box-shadow: 0 1rem 2rem rgb(49 114 118 / 19%);
  font-size: clamp(2rem, 3vw, 3rem);
}

.about-builders h2 {
  font-size: clamp(1.3rem, 1.55vw, 1.85rem);
  letter-spacing: -0.035em;
  line-height: 1.18;
}

.about-builders p {
  max-width: 72ch;
  margin: 0.9rem 0 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .about-profile-card:hover,
  .about-ecosystem-card:hover {
    z-index: 2;
    box-shadow:
      0 2.2rem 4.8rem rgb(67 57 101 / 17%),
      inset 0 1px 0 #fff;
    transform: translateY(-0.45rem) rotate(0deg);
  }

  .about-page-cta--outline:hover {
    color: #fff;
  }
}

@media (max-width: 74.99rem) {
  .about-profiles--founders .testimonials-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-profile-card {
    height: auto;
  }

  .about-coach-card {
    height: auto;
  }
}

@media (max-width: 67.99rem) {
  .about-profile-carousel {
    margin-top: 2.75rem;
  }

  .about-profile-carousel .testimonials-viewport {
    width: min(100%, 42rem);
  }

  .about-profile-carousel .about-profile-card {
    height: var(--testimonial-card-height);
    flex-basis: var(--testimonial-card-height);
  }

  .about-profile-carousel .testimonials-track {
    padding-bottom: 3rem;
  }
}

@media (max-width: 59.99rem) {
  .about-section-heading {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .about-section-heading h2,
  .about-section-heading p {
    margin-right: auto;
    margin-left: auto;
  }

  .about-expertise ul,
  .about-ecosystem__grid {
    grid-template-columns: 1fr;
  }

  .about-ecosystem__grid {
    width: min(100%, 38rem);
  }

  .about-ecosystem-card {
    min-height: 0;
  }
}

@media (max-width: 47.99rem) {
  .about-team,
  .about-founders,
  .about-coaches,
  .about-ecosystem {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .about-expertise {
    padding: 1.15rem;
  }

  .about-expertise ul {
    gap: 0.8rem;
  }

  .about-expertise li {
    padding: 1rem;
  }

  .about-profiles {
    margin-top: 4.5rem;
  }

  .about-profile-card .testimonial-card__header {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .about-profile-card .testimonial-card__avatar {
    width: 4.5rem;
  }

  .about-profile-card blockquote,
  .about-coach-card blockquote {
    font-size: clamp(0.86rem, 3.7vw, 0.98rem);
  }

  .about-section-actions,
  .about-section-actions .about-page-cta {
    width: 100%;
  }

  .about-ecosystem-card {
    padding: 1.35rem;
  }

  .about-builders {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

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

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

/* ========================================================================== */
/* Page Offre — index2.html                                                   */
/* ========================================================================== */

.offer-page {
  overflow-x: clip;
  color: var(--color-text);
  background: #f6f7f7;
}

.offer-page a {
  color: inherit;
  text-decoration: none;
}

.offer-main {
  width: 100%;
  overflow: clip;
}

.offer-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2 * var(--page-gutter)), 88rem);
  margin-right: auto;
  margin-left: auto;
}

.offer-brand {
  font-weight: 700;
  letter-spacing: -0.065em;
  white-space: nowrap;
}

.offer-brand span {
  color: var(--color-accent);
}

.offer-hero {
  position: relative;
  display: grid;
  min-height: 60vh;
  min-height: 60svh;
  place-items: center;
  padding: clamp(2rem, 5vh, 4rem) 0;
  overflow: visible;
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.offer-hero::after {
  position: absolute;
  z-index: 2;
  top: calc(100% - 0.1rem);
  right: 0;
  left: 0;
  height: clamp(4rem, 8vh, 7rem);
  content: "";
  background: linear-gradient(
    180deg,
    rgb(230 173 2) 0%,
    rgb(226 210 108 / 82%) 34%,
    rgb(200 237 237 / 48%) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.offer-hero::before {
  position: absolute;
  top: -28%;
  left: 50%;
  width: min(76rem, 92vw);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 6rem rgb(255 255 255 / 12%),
    0 0 0 12rem rgb(255 255 255 / 7%);
  transform: translateX(-50%);
}

.offer-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}

.offer-hero__orb--one {
  top: 15%;
  left: 7%;
  width: clamp(5rem, 9vw, 9rem);
  aspect-ratio: 1;
  background: rgb(79 208 211 / 72%);
  box-shadow: 0 1.5rem 4rem rgb(49 114 118 / 16%);
}

.offer-hero__orb--two {
  right: 5%;
  bottom: 13%;
  width: clamp(3.5rem, 6vw, 6rem);
  aspect-ratio: 1;
  border: clamp(0.8rem, 1.2vw, 1.2rem) solid rgb(255 255 255 / 45%);
}

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

.offer-hero__avatar {
  width: clamp(4.75rem, 6vw, 6.5rem);
  height: auto;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  filter: drop-shadow(0 1rem 1.8rem rgb(92 69 0 / 12%));
}

.offer-hero h1 {
  max-width: 26ch;
  margin: 0;
  font-size: var(--font-size-hero-title);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}

.offer-plan-mark {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: 2.65rem;
  padding: 0.55rem 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  color: #fff;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.8rem 1.8rem rgb(50 62 75 / 12%);
}

.offer-plan-mark::after {
  position: absolute;
  top: calc(100% - 0.3rem);
  right: 0.9rem;
  width: 0.9rem;
  aspect-ratio: 1;
  content: "";
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.offer-plan-mark--mission {
  background: #a14ff0;
}

.offer-plan-mark--companion {
  background: #3dbfc2;
}

.offer-scroll-cue {
  display: grid;
  width: clamp(3.25rem, 4vw, 4.25rem);
  aspect-ratio: 1;
  margin-top: clamp(1.25rem, 2.8vh, 2rem);
  place-items: center;
  border: 1px solid rgb(80 83 109 / 48%);
  border-radius: 50%;
  background: rgb(255 255 255 / 26%);
  transition:
    background-color 220ms ease,
    transform 300ms var(--ease-out);
}

.offer-scroll-cue svg {
  width: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-comparison-section {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4.5rem, 7.2vh, 6.5rem) 0 clamp(2rem, 3.4vh, 3rem);
  align-items: start;
  background:
    radial-gradient(circle at 4% 4%, rgb(79 208 211 / 16%), transparent 25rem),
    radial-gradient(circle at 96% 92%, rgb(255 217 102 / 18%), transparent 28rem),
    linear-gradient(180deg, #c8eded 0%, #eaf6f6 22rem, #f7f8f8 40rem);
}

.offer-comparison-section > .offer-shell {
  width: min(calc(100% - 2 * var(--page-gutter)), 100rem);
}

.offer-comparison-section::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgb(80 83 109 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(80 83 109 / 3%) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 80%);
  mask-image: radial-gradient(circle at center, #000, transparent 80%);
  pointer-events: none;
}

.offer-plan-heads,
.offer-comparison__row {
  display: grid;
  grid-template-columns: minmax(10.5rem, 0.52fr) repeat(2, minmax(0, 1fr));
  gap: clamp(0.55rem, 0.8vw, 0.8rem);
}

.offer-plan-heads {
  align-items: stretch;
  margin-bottom: clamp(0.55rem, 0.8vw, 0.8rem);
}

.offer-plan-head {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(15rem, 20vw, 17.5rem);
  padding: clamp(1rem, 1.4vw, 1.4rem);
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: clamp(1.25rem, 1.6vw, 1.65rem);
  background: rgb(255 255 255 / 84%);
  box-shadow:
    0 1.7rem 4rem rgb(50 62 75 / 11%),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(0.7rem);
}

.offer-plan-head::before {
  position: absolute;
  top: -5rem;
  right: -4rem;
  width: 11rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: var(--offer-plan-tint);
}

.offer-plan-head .offer-plan-mark {
  min-height: 2.15rem;
  padding: 0.42rem 0.85rem;
  border-radius: 0.7rem;
  font-size: clamp(0.76rem, 0.58vw, 0.88rem);
}

.offer-plan-head--mission {
  --offer-plan-tint: rgb(161 79 240 / 11%);
  grid-column: 2;
}

.offer-plan-head--companion {
  --offer-plan-tint: rgb(61 191 194 / 12%);
  grid-column: 3;
}

.offer-plan-head h2 {
  position: relative;
  max-width: 22ch;
  margin: clamp(0.9rem, 1.8vh, 1.25rem) 0 0;
  font-size: clamp(1.25rem, 1.25vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.12;
  text-wrap: balance;
}

.offer-plan-head p {
  position: relative;
  max-width: 40ch;
  margin: clamp(0.55rem, 1.1vh, 0.75rem) 0 clamp(0.75rem, 1.5vh, 1rem);
  padding-left: 1rem;
  font-size: clamp(0.78rem, 0.62vw, 0.96rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.offer-plan-head p::before {
  position: absolute;
  top: 0.05em;
  left: 0;
  content: ">";
  color: var(--color-accent);
  font-weight: 700;
}

.offer-plan-head .offer-cta {
  width: 100%;
  min-height: clamp(2.75rem, 3.4vw, 3.25rem);
  margin-top: auto;
  padding: 0.3rem 0.45rem 0.3rem 1.1rem;
  font-size: clamp(0.78rem, 0.6vw, 0.9rem);
}

.offer-plan-head .offer-cta__icon {
  width: clamp(2rem, 2.6vw, 2.4rem);
  flex-basis: clamp(2rem, 2.6vw, 2.4rem);
}

.offer-plan-head .offer-cta__icon svg {
  width: clamp(1.35rem, 1.8vw, 1.65rem);
}

.offer-cta {
  position: relative;
  display: flex;
  width: fit-content;
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-pill);
  color: #fff !important;
  background: var(--color-text);
  box-shadow: 0 0.9rem 2.2rem rgb(50 62 75 / 18%);
  font-size: var(--font-size-cta);
  font-weight: 700;
  line-height: 1.2;
  transition:
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.offer-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.offer-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-comparison {
  display: grid;
  gap: clamp(0.45rem, 0.7vw, 0.65rem);
}

.offer-comparison__row {
  position: relative;
  align-items: stretch;
}

.offer-comparison__row > h2,
.offer-comparison__cell {
  min-width: 0;
  margin: 0;
  padding: clamp(0.65rem, 0.9vw, 0.9rem);
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: clamp(0.85rem, 1.1vw, 1.15rem);
  background: rgb(255 255 255 / 76%);
  box-shadow:
    0 0.8rem 2rem rgb(62 68 81 / 6%),
    inset 0 1px 0 rgb(255 255 255 / 90%);
}

.offer-comparison__row > h2 {
  display: flex;
  align-items: flex-start;
  color: var(--color-muted);
  background: rgb(80 83 109 / 6%);
  font-size: clamp(0.68rem, 0.52vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.35;
  text-transform: uppercase;
}

.offer-comparison__cell {
  position: relative;
  font-size: clamp(0.78rem, 0.62vw, 0.96rem);
  line-height: 1.38;
}

.offer-comparison__cell:nth-child(2) {
  border-top: 0.22rem solid #a14ff0;
}

.offer-comparison__cell:nth-child(3) {
  border-top: 0.22rem solid #3dbfc2;
}

.offer-comparison__cell p {
  margin: 0;
}

.offer-price-list {
  display: grid;
  align-content: center;
  gap: 0.18rem;
}

.offer-price-list strong {
  font-size: clamp(1.05rem, 0.9vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

.offer-price-list small {
  color: var(--color-muted);
  font-size: 0.82em;
}

.offer-setting {
  font-size: clamp(0.88rem, 0.72vw, 1.05rem);
}

.offer-feature-list,
.offer-feature-list ul,
.offer-chevron-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-feature-list {
  display: grid;
  gap: clamp(0.45rem, 0.8vh, 0.65rem);
}

.offer-feature-list > li {
  position: relative;
  padding-left: 1.25rem;
}

.offer-feature-list > li::before {
  position: absolute;
  top: 0.06em;
  left: 0;
  content: "✭";
  color: var(--color-accent);
  font-size: 1.05em;
}

.offer-feature-list strong,
.offer-feature-list span {
  display: block;
}

.offer-feature-list ul,
.offer-chevron-list {
  display: grid;
  gap: 0.08rem;
  margin-top: 0.2rem;
}

.offer-feature-list ul li,
.offer-chevron-list li {
  position: relative;
  padding-left: 1rem;
}

.offer-feature-list ul li::before,
.offer-chevron-list li::before {
  position: absolute;
  left: 0;
  content: ">";
  color: var(--color-accent);
  font-weight: 700;
}

.offer-value-session {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: minmax(18rem, 0.34fr) minmax(28rem, 0.66fr);
}

.offer-trial-section {
  display: grid;
  min-height: 0;
  padding: clamp(1.25rem, 2.8vh, 2.25rem) 0;
  align-items: center;
  background: linear-gradient(145deg, #bde6e6 0%, #d5f3f3 52%, #bce3e3 100%);
}

.offer-trial {
  display: grid;
  max-width: 76rem;
  padding: clamp(1.15rem, 1.6vw, 1.65rem);
  grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: clamp(2rem, 4vw, 3.5rem);
  background: rgb(255 255 255 / 58%);
  box-shadow:
    0 2rem 5rem rgb(49 86 91 / 13%),
    inset 0 1px 0 #fff;
}

.offer-trial__visual {
  position: relative;
  display: grid;
  width: min(100%, 12rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(79 208 211 / 42%);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, rgb(255 255 255 / 46%));
  box-shadow: 0 1.5rem 3.5rem rgb(49 86 91 / 12%);
}

.offer-trial__visual img {
  position: absolute;
  top: 13%;
  left: 12%;
  width: 28%;
  height: auto;
}

.offer-trial__visual span {
  margin-top: 0.1em;
  color: #2ebfc4;
  font-size: clamp(4rem, 5vw, 5.75rem);
  font-weight: 700;
  letter-spacing: -0.1em;
  line-height: 0.8;
}

.offer-trial__visual small {
  position: absolute;
  right: 16%;
  bottom: 18%;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-trial__content h2,
.offer-impact__heading h2,
.offer-contact h2 {
  margin: 0;
  font-size: clamp(1.65rem, 1.9vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.08;
  text-wrap: balance;
}

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

.offer-trial__content p {
  max-width: 52ch;
  margin: clamp(0.55rem, 1.2vh, 0.8rem) 0 clamp(0.75rem, 1.6vh, 1rem);
  font-size: var(--font-size-ui-copy);
  line-height: 1.42;
  text-wrap: pretty;
}

.offer-trial__content .offer-cta {
  min-height: clamp(2.65rem, 3vw, 3.1rem);
  padding: 0.3rem 0.45rem 0.3rem 1.05rem;
  font-size: clamp(0.78rem, 0.6vw, 0.9rem);
}

.offer-trial__content .offer-cta__icon {
  width: clamp(2rem, 2.4vw, 2.35rem);
  flex-basis: clamp(2rem, 2.4vw, 2.35rem);
}

.offer-trial__content .offer-cta__icon svg {
  width: clamp(1.35rem, 1.7vw, 1.6rem);
}

.offer-cta--light {
  color: var(--color-text) !important;
  border-color: var(--color-text);
  background: rgb(255 255 255 / 72%);
}

.offer-impact-section {
  position: relative;
  display: grid;
  min-height: 0;
  padding: clamp(1.75rem, 3.5vh, 2.75rem) 0;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.offer-impact-section::before {
  position: absolute;
  right: -15rem;
  bottom: -20rem;
  width: 48rem;
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 5rem rgb(255 255 255 / 12%),
    0 0 0 10rem rgb(255 255 255 / 7%);
}

.offer-impact__heading {
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}

.offer-impact-grid {
  display: grid;
  margin-top: clamp(1.25rem, 2.7vh, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.offer-impact-card {
  display: grid;
  min-height: clamp(8.25rem, 10vw, 10rem);
  padding: clamp(1rem, 1.3vw, 1.45rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: clamp(1.4rem, 2.2vw, 2rem);
  background: rgb(255 255 255 / 52%);
  box-shadow:
    0 1.3rem 3rem rgb(92 69 0 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
}

.offer-impact-card__icon {
  display: grid;
  width: clamp(3rem, 3.5vw, 3.75rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-text);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  box-shadow: 0 0.8rem 1.8rem rgb(50 62 75 / 16%);
}

.offer-impact-card p {
  margin: 0;
  font-size: var(--font-size-ui-copy);
  font-weight: 500;
  line-height: 1.38;
  text-wrap: pretty;
}

.offer-contact-section {
  position: relative;
  padding: clamp(5rem, 12vh, 10rem) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgb(79 208 211 / 18%), transparent 25rem),
    #f7f8f8;
}

.offer-contact {
  display: grid;
  max-width: 76rem;
  justify-items: center;
  text-align: center;
}

.offer-contact > img {
  width: clamp(5rem, 7vw, 7rem);
  height: auto;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.offer-contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.offer-cta--outline {
  color: var(--color-text) !important;
  border-color: rgb(80 83 109 / 42%);
  background: transparent;
  box-shadow: none;
}

.offer-motion-ready [data-offer-reveal] {
  opacity: 0;
  transform: translateY(2.25rem);
  transition:
    opacity 700ms ease,
    transform 850ms var(--ease-out);
}

.offer-motion-ready [data-offer-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .offer-scroll-cue:hover {
    background: rgb(255 255 255 / 55%);
    transform: translateY(0.25rem);
  }

  .offer-cta:hover {
    background: #44475f;
    box-shadow: 0 1.1rem 2.7rem rgb(50 62 75 / 24%);
    transform: translateY(-0.16rem);
  }

  .offer-cta--light:hover,
  .offer-cta--outline:hover {
    color: #fff !important;
    background: var(--color-text);
  }
}

@media (min-width: 68rem) and (max-height: 59.99rem) {
  .offer-comparison-section {
    padding-bottom: clamp(1.1rem, 2vh, 1.5rem);
  }

  .offer-plan-heads,
  .offer-comparison__row {
    gap: 0.4rem;
  }

  .offer-plan-heads {
    margin-bottom: 0.4rem;
  }

  .offer-plan-head {
    min-height: clamp(13.5rem, 27vh, 15rem);
    padding: clamp(0.75rem, 1.7vh, 0.95rem);
  }

  .offer-plan-head .offer-plan-mark {
    min-height: 1.95rem;
    padding: 0.34rem 0.75rem;
    font-size: clamp(0.74rem, 1.4vh, 0.82rem);
  }

  .offer-plan-head h2 {
    margin-top: clamp(0.55rem, 1.1vh, 0.7rem);
    font-size: clamp(1.1rem, 2.4vh, 1.35rem);
  }

  .offer-plan-head p {
    margin: clamp(0.3rem, 0.7vh, 0.45rem) 0
      clamp(0.45rem, 1vh, 0.6rem);
    padding-left: 0.9rem;
    font-size: clamp(0.75rem, 1.45vh, 0.82rem);
    line-height: 1.35;
  }

  .offer-plan-head .offer-cta {
    min-height: 2.7rem;
    padding: 0.25rem 0.4rem 0.25rem 0.95rem;
    font-size: clamp(0.75rem, 1.4vh, 0.82rem);
  }

  .offer-plan-head .offer-cta__icon {
    width: 2.1rem;
    flex-basis: 2.1rem;
  }

  .offer-plan-head .offer-cta__icon svg {
    width: 1.4rem;
  }

  .offer-comparison {
    gap: 0.38rem;
  }

  .offer-comparison__row > h2,
  .offer-comparison__cell {
    padding: clamp(0.42rem, 0.9vh, 0.55rem) clamp(0.6rem, 0.7vw, 0.75rem);
  }

  .offer-comparison__row > h2 {
    font-size: clamp(0.66rem, 1.2vh, 0.74rem);
    line-height: 1.25;
  }

  .offer-comparison__cell {
    font-size: clamp(0.75rem, 1.4vh, 0.8rem);
    line-height: 1.27;
  }

  .offer-price-list {
    gap: 0.1rem;
  }

  .offer-price-list strong {
    font-size: clamp(0.98rem, 1.85vh, 1.08rem);
  }

  .offer-setting {
    font-size: clamp(0.8rem, 1.5vh, 0.88rem);
  }

  .offer-feature-list {
    gap: clamp(0.2rem, 0.45vh, 0.3rem);
  }

  .offer-feature-list > li {
    padding-left: 1.05rem;
  }

  .offer-feature-list ul,
  .offer-chevron-list {
    gap: 0;
    margin-top: 0.12rem;
  }

  .offer-trial-section {
    padding-top: clamp(0.75rem, 1.8vh, 1rem);
    padding-bottom: clamp(0.75rem, 1.8vh, 1rem);
  }

  .offer-impact-section {
    padding-top: clamp(1rem, 2.2vh, 1.3rem);
    padding-bottom: clamp(1rem, 2.2vh, 1.3rem);
  }

  .offer-impact-grid {
    margin-top: clamp(0.85rem, 1.8vh, 1rem);
    gap: clamp(0.8rem, 1.8vh, 1rem);
  }

  .offer-impact-card {
    min-height: clamp(7.75rem, 16vh, 9rem);
  }
}

@media (max-width: 67.99rem) {
  .offer-plan-heads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-plan-head--mission {
    grid-column: 1;
  }

  .offer-plan-head--companion {
    grid-column: 2;
  }

  .offer-comparison__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-comparison__row > h2 {
    grid-column: 1 / -1;
  }

  .offer-trial {
    grid-template-columns: minmax(10rem, 0.6fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 47.99rem) {
  .offer-value-session {
    display: block;
    min-height: 0;
  }

  .offer-hero {
    min-height: 60vh;
    min-height: 60svh;
    padding: 2.5rem 0;
  }

  .offer-hero__avatar {
    width: 5.25rem;
  }

  .offer-hero h1 {
    max-width: 18ch;
    font-size: clamp(1.65rem, 6.2vw, 2.15rem);
    line-height: 1.15;
  }

  .offer-comparison-section,
  .offer-trial-section,
  .offer-impact-section,
  .offer-contact-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .offer-plan-heads {
    grid-template-columns: 1fr;
  }

  .offer-plan-head--mission,
  .offer-plan-head--companion {
    min-height: 0;
    grid-column: 1;
  }

  .offer-plan-head h2 {
    margin-top: 2rem;
  }

  .offer-comparison__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .offer-comparison__row > h2 {
    grid-column: 1;
  }

  .offer-comparison__cell::before {
    display: block;
    margin-bottom: 1rem;
    color: var(--color-muted);
    content: attr(data-plan);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .offer-trial {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .offer-trial__visual {
    width: min(65vw, 14rem);
  }

  .offer-trial__content p {
    font-size: var(--font-size-ui-copy);
  }

  .offer-trial__content .offer-cta {
    width: 100%;
  }

  .offer-impact-grid {
    grid-template-columns: 1fr;
  }

  .offer-impact-card {
    min-height: 0;
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .offer-impact-card p {
    font-size: var(--font-size-ui-copy);
  }

  .offer-contact__actions {
    width: 100%;
    flex-direction: column;
  }

  .offer-contact__actions .offer-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-motion-ready [data-offer-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================================================== */
/* Page À propos                                                              */
/* ========================================================================== */

.about-page {
  color: var(--color-text);
  background: #f6f6f9;
}

.about-page__main {
  width: 100%;
  overflow: clip;
}

.about-page__shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2 * var(--page-gutter)), 100rem);
  margin-right: auto;
  margin-left: auto;
}

.about-page__brand {
  font-weight: 700;
  letter-spacing: -0.065em;
  white-space: nowrap;
}

.about-page__brand span {
  color: var(--color-accent);
}

.about-nowrap {
  white-space: nowrap;
}

.about-mission {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(3rem, 4.8vh, 4.5rem) 0 clamp(3rem, 4.8vh, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 60%, rgb(79 208 211 / 11%), transparent 28rem),
    radial-gradient(circle at 94% 78%, rgb(161 79 240 / 8%), transparent 25rem),
    #f6f6f9;
}

.about-mission::before {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(31rem, 54vh, 44rem);
  content: "";
  background:
    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 28%), transparent 22%),
    linear-gradient(
      0deg,
      rgb(230 173 2) 0%,
      rgb(255 217 102) 50%,
      rgb(230 173 2) 100%
    );
  clip-path: ellipse(83% 72% at 50% 26%);
}

.about-mission::after {
  position: absolute;
  z-index: -1;
  top: clamp(-32rem, -35vw, -20rem);
  left: 50%;
  width: min(85rem, 92vw);
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 6rem rgb(255 255 255 / 11%),
    0 0 0 12rem rgb(255 255 255 / 6%);
  transform: translateX(-50%);
  pointer-events: none;
}

.about-mission__orb {
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.about-mission__orb--left {
  top: clamp(5rem, 11vh, 9rem);
  left: clamp(-2.5rem, 3vw, 4rem);
  width: clamp(5rem, 8vw, 8.5rem);
  aspect-ratio: 1;
  background: rgb(79 208 211 / 78%);
  box-shadow: 0 1.5rem 4rem rgb(49 114 118 / 18%);
}

.about-mission__orb--right {
  top: clamp(13rem, 25vh, 20rem);
  right: clamp(-2rem, 4vw, 5rem);
  width: clamp(4rem, 6vw, 6rem);
  aspect-ratio: 1;
  border: clamp(0.75rem, 1.1vw, 1.1rem) solid rgb(255 255 255 / 50%);
}

.about-mission__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.about-mission__heading {
  display: grid;
  justify-items: start;
}

.about-mission__heading > img {
  width: clamp(4.75rem, 6vw, 6.5rem);
  height: auto;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  filter: drop-shadow(0 1rem 1.8rem rgb(92 69 0 / 13%));
}

.about-mission h1 {
  max-width: 19ch;
  margin: 0;
  font-size: var(--font-size-hero-title);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
  text-wrap: balance;
}

.about-mission__manifesto {
  padding: clamp(1.3rem, 2vw, 2rem);
  border: 1px solid rgb(255 255 255 / 56%);
  border-radius: clamp(1.5rem, 2.5vw, 2.25rem);
  background: rgb(255 255 255 / 58%);
  box-shadow:
    0 1.8rem 4rem rgb(92 69 0 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
  backdrop-filter: blur(0.55rem);
}

.about-mission__manifesto p {
  margin: 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.45;
  text-wrap: pretty;
}

.about-mission__manifesto p + p {
  margin-top: clamp(0.6rem, 1.2vh, 0.85rem);
}

.about-mission__manifesto strong {
  font-weight: 700;
  background: linear-gradient(transparent 68%, rgb(79 208 211 / 38%) 68%);
}

.about-mission__manifesto .about-mission__purpose {
  margin-top: clamp(1rem, 2vh, 1.4rem);
  padding-top: clamp(1rem, 2vh, 1.4rem);
  border-top: 1px solid rgb(80 83 109 / 16%);
  font-weight: 600;
}

.about-pillars {
  --about-pillar-copy: clamp(
    0.9rem,
    calc(0.55rem + 0.3vw),
    1.05rem
  );

  display: grid;
  margin-top: clamp(2.25rem, 4vh, 3.6rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.85rem, 1.4vw, 1.4rem);
}

.about-pillar {
  --pillar-ink: #fff;
  --pillar-panel: rgb(255 255 255 / 90%);

  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(32rem, 45vh, 38rem);
  padding: clamp(0.95rem, 1.2vw, 1.25rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 44%);
  border-radius: clamp(1.5rem, 2vw, 2rem);
  color: var(--pillar-ink);
  background: var(--pillar-color);
  box-shadow:
    0 1.8rem 4rem rgb(50 62 75 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 32%);
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out);
}

.about-pillar::before {
  position: absolute;
  top: -4.5rem;
  right: -4.5rem;
  width: 11rem;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 2.8rem rgb(255 255 255 / 8%);
  pointer-events: none;
}

.about-pillar--conflict {
  --pillar-color: #ff5c4c;
}

.about-pillar--coaching {
  --pillar-color: #ffd966;
  --pillar-ink: var(--color-text);
}

.about-pillar--skills {
  --pillar-color: #4fd0d3;
  --pillar-ink: var(--color-text);
}

.about-pillar--health {
  --pillar-color: #a14ff0;
}

.about-pillar__top {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}

.about-pillar__top img {
  width: clamp(4.6rem, 5.5vw, 5.75rem);
  height: auto;
  aspect-ratio: 1;
  border: clamp(0.25rem, 0.35vw, 0.38rem) solid rgb(255 255 255 / 52%);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1.1rem 2.5rem rgb(50 62 75 / 16%);
}

.about-pillar h2 {
  margin: clamp(0.8rem, 1.5vh, 1.05rem) 0 clamp(0.85rem, 1.6vh, 1.1rem);
  font-size: clamp(1.18rem, 1.15vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.16;
  text-wrap: balance;
}

.about-pillar__content {
  position: relative;
  z-index: 1;
  padding: clamp(0.9rem, 1.1vw, 1.15rem);
  border: 1px solid rgb(255 255 255 / 56%);
  border-radius: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--color-text);
  background: var(--pillar-panel);
  box-shadow: inset 0 1px 0 #fff;
}

.about-pillar__stat {
  margin: 0 0 clamp(0.9rem, 1.8vh, 1.2rem);
  color: var(--color-text);
  font-size: var(--about-pillar-copy);
  font-weight: 700;
  line-height: 1.38;
}

.about-pillar ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(0.45rem, 0.8vh, 0.65rem);
  list-style: none;
}

.about-pillar li {
  position: relative;
  padding-left: 1.45rem;
  font-size: var(--about-pillar-copy);
  line-height: 1.4;
}

.about-pillar li::before {
  position: absolute;
  top: -0.03em;
  left: 0;
  content: "✓";
  color: #2ebfc4;
  font-size: 1.25em;
  font-weight: 700;
}

.about-pillar__source {
  display: inline-block;
  margin-top: clamp(1rem, 2vh, 1.35rem);
  color: var(--color-text);
  font-size: clamp(0.75rem, 0.62vw, 0.88rem);
  font-weight: 500;
  line-height: 1.35;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.about-pillar__answer {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  padding: clamp(0.9rem, 1.2vw, 1.15rem) clamp(0.25rem, 0.6vw, 0.6rem)
    clamp(0.15rem, 0.4vw, 0.35rem);
  border-top: 1px solid rgb(255 255 255 / 38%);
  font-size: var(--about-pillar-copy);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.about-mission__action {
  display: flex;
  margin-top: clamp(2rem, 3.3vh, 3rem);
  justify-content: center;
}

.about-page-cta {
  display: inline-flex;
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-end)
    var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 1.1rem 2.8rem rgb(50 62 75 / 20%);
  font-size: var(--font-size-cta);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--ease-out);
}

.about-page-cta__icon {
  display: grid;
  width: var(--cta-icon-size);
  flex: 0 0 var(--cta-icon-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
}

.about-page-cta__icon svg {
  width: var(--cta-icon-glyph-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-motion-ready [data-about-reveal] {
  opacity: 0;
  transform: translateY(2.25rem);
  transition:
    opacity 700ms ease,
    transform 850ms var(--ease-out);
}

.about-motion-ready [data-about-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .about-pillar:hover {
    z-index: 2;
    box-shadow:
      0 2.4rem 5rem rgb(50 62 75 / 20%),
      inset 0 1px 0 rgb(255 255 255 / 36%);
    transform: translateY(-0.55rem);
  }

  .about-page-cta:hover {
    background: #44475f;
    box-shadow: 0 1.35rem 3.2rem rgb(50 62 75 / 25%);
    transform: translateY(-0.18rem);
  }
}

@media (max-width: 74.99rem) {
  .about-mission__intro {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .about-pillars {
    width: min(100%, 58rem);
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-pillar {
    min-height: 0;
  }
}

@media (max-width: 59.99rem) {
  .about-mission__intro {
    grid-template-columns: 1fr;
  }

  .about-mission__heading {
    justify-items: center;
    text-align: center;
  }

  .about-mission h1 {
    max-width: 22ch;
  }
}

@media (max-width: 47.99rem) {
  .about-mission {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }

  .about-mission::before {
    height: 38rem;
    clip-path: ellipse(120% 70% at 50% 24%);
  }

  .about-mission__orb {
    opacity: 0.55;
  }

  .about-mission__manifesto {
    padding: 1.25rem;
  }

  .about-pillars {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-pillar {
    min-height: 0;
    padding: 1.15rem;
  }

  .about-pillar__top {
    grid-template-columns: 4.8rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }

  .about-pillar__top img {
    width: 4.8rem;
  }

  .about-pillar h2 {
    margin: 0;
  }

  .about-pillar__content {
    margin-top: 1.15rem;
  }

  .about-mission__action,
  .about-page-cta {
    width: 100%;
  }

  .about-page-cta {
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-motion-ready [data-about-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 75rem) and (max-height: 62.5rem) {
  .about-mission {
    display: grid;
    padding-top: clamp(1rem, 2vh, 1.4rem);
    padding-bottom: clamp(1rem, 2vh, 1.4rem);
    align-items: center;
  }

  .about-mission::before {
    height: clamp(25rem, 51vh, 29rem);
  }

  .about-mission__intro {
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .about-mission__heading > img {
    width: clamp(3rem, 3.3vw, 3.7rem);
    margin-bottom: clamp(0.35rem, 0.7vh, 0.55rem);
  }

  .about-mission h1 {
    max-width: 20ch;
    font-size: clamp(1.75rem, 2.1vw, 2.2rem);
    line-height: 1.07;
  }

  .about-mission__manifesto {
    padding: clamp(0.75rem, 1vw, 1rem);
  }

  .about-mission__manifesto p {
    font-size: clamp(0.76rem, 0.75vw, 0.88rem);
    line-height: 1.33;
  }

  .about-mission__manifesto p + p {
    margin-top: 0.45rem;
  }

  .about-mission__manifesto .about-mission__purpose {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
  }

  .about-pillars {
    --about-pillar-copy: clamp(0.76rem, 0.73vw, 0.86rem);

    margin-top: clamp(0.9rem, 1.8vh, 1.15rem);
    gap: clamp(0.7rem, 1.15vw, 1rem);
  }

  .about-pillar {
    min-height: 0;
    height: min(50vh, 27.5rem);
    padding: clamp(0.55rem, 0.7vw, 0.72rem);
  }

  .about-pillar__top img {
    width: clamp(3.1rem, 3.35vw, 3.75rem);
  }

  .about-pillar h2 {
    margin-top: 0.45rem;
    margin-bottom: 0.45rem;
    font-size: clamp(0.9rem, 0.92vw, 1.04rem);
  }

  .about-pillar__content {
    padding: clamp(0.5rem, 0.65vw, 0.65rem);
  }

  .about-pillar__stat {
    margin-bottom: 0.55rem;
  }

  .about-pillar ul {
    gap: 0.3rem;
  }

  .about-pillar__source {
    margin-top: 0.45rem;
    font-size: clamp(0.65rem, 0.56vw, 0.75rem);
  }

  .about-pillar__answer {
    padding-top: 0.45rem;
  }

  .about-mission__action {
    margin-top: clamp(0.8rem, 1.6vh, 1rem);
  }

  .about-ecosystem {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(2.25rem, 4.8vh, 3rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.25rem);
  }

  .about-ecosystem .about-section-title h2 {
    font-size: clamp(1.8rem, 2.2vw, 2.35rem);
    line-height: 1.04;
  }

  .about-ecosystem__grid {
    margin-top: clamp(1.25rem, 2.5vh, 1.75rem);
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
  }

  .about-ecosystem-card {
    min-height: 0;
    padding: clamp(0.85rem, 1.2vw, 1.15rem);
  }

  .about-ecosystem-card__visual {
    width: clamp(4.8rem, 5.5vw, 5.8rem);
    height: clamp(4.8rem, 5.5vw, 5.8rem);
    margin-bottom: clamp(0.55rem, 1.1vh, 0.8rem);
  }

  .about-ecosystem-card h3 {
    font-size: clamp(1rem, 1.05vw, 1.2rem);
  }

  .about-ecosystem-card p,
  .about-ecosystem-card li {
    font-size: clamp(0.72rem, 0.72vw, 0.86rem);
    line-height: 1.4;
  }

  .about-ecosystem-card p {
    margin-top: 0.65rem;
  }

  .about-ecosystem-card ul {
    margin-top: 0.75rem;
    gap: 0.45rem;
  }

  .about-ecosystem .about-section-actions {
    margin-top: clamp(0.8rem, 1.6vh, 1.1rem);
  }

  .about-builders {
    margin-top: clamp(1rem, 2vh, 1.4rem);
    padding: clamp(0.8rem, 1.3vw, 1.15rem);
    gap: clamp(0.8rem, 1.3vw, 1.15rem);
  }

  .about-builders__icon {
    width: clamp(3rem, 3.7vw, 3.7rem);
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  }

  .about-builders h2 {
    font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  }

  .about-builders p {
    margin-top: 0.45rem;
    font-size: clamp(0.72rem, 0.72vw, 0.86rem);
    line-height: 1.4;
  }
}

/* Compact desktop tier: keep every card line visible at 1440 x 650. */
@media (min-width: 75rem) and (max-width: 95rem) and (max-height: 45rem) {
  .about-pillar__content {
    padding: clamp(0.42rem, 0.55vw, 0.55rem);
  }

  .about-pillar__stat {
    margin-bottom: 0.45rem;
  }

  .about-pillar ul {
    gap: 0.25rem;
  }

  .about-pillar__source {
    margin-top: 0.35rem;
  }

  .about-pillar__answer {
    padding-top: 0.35rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Contact V2.                                                                */
/* -------------------------------------------------------------------------- */

.contact-v2-main {
  width: 100%;
}

.contact-v2 {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: var(--viewport-height);
  overflow: hidden;
  padding:
    calc(var(--cocobot-v2-header-height) + clamp(2rem, 5vh, 4.5rem))
    var(--page-gutter) clamp(2.5rem, 5vh, 4.5rem);
  align-items: center;
  isolation: isolate;
  color: var(--color-text);
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 50%,
    rgb(230 173 2) 100%
  );
}

.contact-v2::before {
  position: absolute;
  z-index: -2;
  right: clamp(-20rem, -14vw, -8rem);
  bottom: clamp(-24rem, -18vw, -10rem);
  width: min(54rem, 64vw);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: linear-gradient(135deg, #d5f3f3, #bce3e3);
  box-shadow:
    0 0 0 clamp(2.5rem, 5vw, 5rem) rgb(213 243 243 / 24%),
    0 0 0 clamp(6rem, 11vw, 11rem) rgb(213 243 243 / 12%);
}

.contact-v2::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 10% 9%, rgb(255 255 255 / 32%), transparent 24%),
    linear-gradient(118deg, transparent 44%, rgb(255 255 255 / 11%) 68%, transparent 82%);
  pointer-events: none;
}

.contact-v2__orb {
  position: absolute;
  z-index: -1;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.contact-v2__orb--one {
  top: clamp(7rem, 13vh, 11rem);
  left: clamp(1.5rem, 5vw, 6rem);
  width: clamp(3.5rem, 5vw, 6rem);
  border: clamp(0.55rem, 0.8vw, 0.9rem) solid rgb(255 255 255 / 48%);
}

.contact-v2__orb--two {
  right: clamp(2rem, 8vw, 9rem);
  top: clamp(7rem, 15vh, 13rem);
  width: clamp(0.75rem, 1vw, 1.1rem);
  background: #ff5c4c;
  box-shadow: 0 0 0 clamp(0.65rem, 1vw, 1.1rem) rgb(255 92 76 / 15%);
}

.contact-v2__shell {
  display: grid;
  width: min(100%, var(--content-width));
  margin: auto;
  grid-template-columns: minmax(16rem, 1fr) minmax(38rem, 2fr);
  align-items: start;
  gap: clamp(2.5rem, 4.5vw, 5.5rem);
}

.contact-v2__intro {
  max-width: 37rem;
  animation: contact-v2-rise 800ms var(--ease-out) both;
}

.contact-v2__avatar {
  position: relative;
  display: grid;
  width: clamp(5.5rem, 7vw, 7.5rem);
  aspect-ratio: 1;
  margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
  place-items: center;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: rgb(255 255 255 / 42%);
  box-shadow:
    0 1.2rem 3rem rgb(92 69 0 / 11%),
    inset 0 1px 0 rgb(255 255 255 / 76%);
}

.contact-v2__avatar::after {
  position: absolute;
  right: 0.2rem;
  bottom: 0.25rem;
  width: 1rem;
  aspect-ratio: 1;
  border: 0.2rem solid #f4be16;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
}

.contact-v2__avatar img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 0.75rem 1.25rem rgb(92 69 0 / 14%));
}

.contact-v2 h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 550;
  letter-spacing: -0.065em;
  line-height: 0.98;
  text-wrap: balance;
}

.contact-v2__lead {
  max-width: 36ch;
  margin: clamp(1.4rem, 3vh, 2.3rem) 0 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.55;
  text-wrap: pretty;
}

.contact-v2__topics {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
  gap: 0.6rem;
}

.contact-v2__topics li {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 30%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 46%);
  font-size: clamp(0.7rem, 0.72vw, 0.82rem);
  font-weight: 650;
  line-height: 1;
}

.contact-v2__form-card {
  position: relative;
  width: 100%;
  padding: clamp(1.4rem, 2.5vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: clamp(1.75rem, 2.5vw, 2.75rem);
  background: rgb(255 250 240 / 88%);
  box-shadow:
    0 2.5rem 6rem rgb(92 69 0 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 88%);
  backdrop-filter: blur(0.8rem);
  animation: contact-v2-rise 900ms 100ms var(--ease-out) both;
}

.contact-v2__form-card::before {
  position: absolute;
  top: -8rem;
  right: -7rem;
  width: 17rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(79 208 211 / 15%);
  content: "";
  pointer-events: none;
}

.contact-v2__form-heading {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(1.1rem, 2.3vh, 1.8rem);
  gap: clamp(0.85rem, 1.2vw, 1.2rem);
}

.contact-v2__form-icon {
  display: grid;
  width: clamp(2.8rem, 3.5vw, 3.6rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-accent);
  box-shadow: 0 0.8rem 2rem rgb(49 114 118 / 16%);
}

.contact-v2__form-icon svg {
  width: 57%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-v2__form-heading p,
.contact-v2__form-heading h2 {
  margin: 0;
}

.contact-v2__form-heading p {
  color: var(--color-muted);
  font-size: clamp(0.68rem, 0.7vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-v2__form-heading h2 {
  margin-top: 0.12rem;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  font-weight: 550;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.contact-v2__form,
.contact-v2__form .wpcf7,
.contact-v2__form .wpcf7-form {
  position: relative;
  width: 100%;
}

.contact-v2__form .wpcf7-form {
  display: grid;
  gap: clamp(0.65rem, 1.2vh, 0.9rem);
}

.contact-v2__form .wpcf7-form p,
.contact-v2__form .wpcf7-form fieldset,
.contact-v2__form .contact-info,
.contact-v2__form .radio-options {
  margin: 0;
}

.contact-v2__form .wpcf7-form h2,
.contact-v2__form .wpcf7-form h3,
.contact-v2__form .wpcf7-form h4,
.contact-v2__form .wpcf7-form .titrecontact {
  margin: 0.45rem 0 0.55rem;
  color: var(--color-accent-strong) !important;
  font-size: clamp(1.05rem, calc(0.82rem + 0.35vw), 1.3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.contact-v2__form .contact-info,
.contact-v2__form .radio-options,
.contact-v2__form [class*="form-group"] {
  display: grid;
  gap: clamp(0.45rem, 0.8vh, 0.65rem);
}

.contact-v2__form .contact-info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-v2__form .contact-info > br {
  display: none;
}

.contact-v2__form .contact-v2__field {
  --contact-field-icon: none;
  position: relative;
  min-width: 0;
}

.contact-v2__form .contact-v2__field--company {
  grid-column: 1 / -1;
}

.contact-v2__form .contact-v2__field::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.85rem;
  width: 1rem;
  aspect-ratio: 1;
  background: var(--color-accent-strong);
  content: "";
  mask: var(--contact-field-icon) center / contain no-repeat;
  pointer-events: none;
  transform: translateY(-50%);
}

.contact-v2__form .contact-v2__field--name,
.contact-v2__form .contact-v2__field--firstname {
  --contact-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.5-4 3-6 7-6s6.5 2 7 6'/%3E%3C/svg%3E");
}

.contact-v2__form .contact-v2__field--company {
  --contact-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V7l8-4v18M4 21h16M15 9h4v12M8 8h.01M8 12h.01M8 16h.01'/%3E%3C/svg%3E");
}

.contact-v2__form .contact-v2__field--email {
  --contact-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.contact-v2__form .contact-v2__field--phone {
  --contact-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.4 4.2-2 1.6a15 15 0 0 0 6.3 6.3l1.6-2L21 14.5v3c0 1.9-1.6 3.5-3.5 3.5C9.5 21 3 14.5 3 6.5 3 4.6 4.6 3 6.5 3Z'/%3E%3C/svg%3E");
}

.contact-v2__form .radio-options {
  margin: 0;
}

.contact-v2__form .radio-options p {
  font-size: inherit;
}

.contact-v2__form .wpcf7-form .contact-info + .titrecontact {
  margin-top: clamp(0.75rem, 1.2vh, 1rem);
  margin-bottom: 0.08rem;
}

.contact-v2__form .wpcf7-form .radio-options + .titrecontact {
  margin-top: clamp(0.55rem, 0.9vh, 0.8rem);
  margin-bottom: 0.08rem;
}

.contact-v2__form label {
  display: grid;
  color: var(--color-text);
  font-size: clamp(0.82rem, calc(0.72rem + 0.16vw), 0.92rem);
  font-weight: 650;
  line-height: 1.35;
  gap: 0.38rem;
}

.contact-v2__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.contact-v2__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-v2__form select,
.contact-v2__form textarea {
  width: 100%;
  margin: 0;
  border: 1px solid rgb(80 83 109 / 15%);
  border-radius: clamp(0.8rem, 1vw, 1rem);
  outline: none;
  color: var(--color-text);
  background: rgb(255 255 255 / 82%);
  box-shadow: inset 0 1px 0 #fff;
  font: inherit;
  font-size: clamp(0.875rem, calc(0.78rem + 0.16vw), 1rem);
  font-weight: 450;
  text-align: center;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.contact-v2__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-v2__form select {
  min-height: clamp(2.65rem, 4.5vh, 3.15rem);
  padding: 0.65rem 2.4rem;
}

.contact-v2__form textarea {
  min-height: clamp(7rem, 14vh, 10rem);
  padding: 0.8rem 0.9rem;
  line-height: 1.45;
  resize: vertical;
}

.contact-v2__form input:focus,
.contact-v2__form select:focus,
.contact-v2__form textarea:focus {
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgb(79 208 211 / 17%);
}

.contact-v2__form input[type="checkbox"],
.contact-v2__form input[type="radio"] {
  accent-color: var(--color-accent);
}

.contact-v2__form .wpcf7-list-item {
  margin: 0 0.75rem 0 0;
}

.contact-v2__form .wpcf7-list-item-label {
  font-size: clamp(0.84rem, calc(0.75rem + 0.16vw), 0.96rem);
  line-height: 1.25;
}

.contact-v2__form .radio-options .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.contact-v2__form .radio-options .wpcf7-list-item {
  margin: 0;
}

.contact-v2__form .radio-options .wpcf7-list-item label {
  display: inline-flex;
  min-height: 2rem;
  padding: 0.4rem 0.7rem;
  align-items: center;
  border: 1px solid rgb(80 83 109 / 13%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 62%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  gap: 0.38rem;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.contact-v2__form .radio-options .wpcf7-list-item label:hover {
  border-color: rgb(47 177 176 / 48%);
  background: rgb(213 243 243 / 68%);
  transform: translateY(-0.05rem);
}

.contact-v2__form .radio-options input[type="radio"] {
  width: 0.82rem;
  height: 0.82rem;
  margin: 0;
  appearance: none;
  border: 1px solid rgb(80 83 109 / 42%);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 0.2rem #fff;
  flex: 0 0 auto;
}

.contact-v2__form .radio-options input[type="radio"]:checked {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
}

.contact-v2__form .radio-options .wpcf7-list-item label:has(input[type="radio"]:checked) {
  border-color: rgb(47 177 176 / 48%);
  background: rgb(213 243 243 / 82%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    0 0.35rem 0.9rem rgb(49 114 118 / 8%);
}

.contact-v2__form .consent .wpcf7-list-item,
.contact-v2__form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.contact-v2__form .consent .wpcf7-list-item label,
.contact-v2__form .wpcf7-acceptance .wpcf7-list-item label {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: 0.82rem minmax(0, 1fr);
  align-items: start;
  text-align: left;
  gap: 0.38rem;
}

.contact-v2__form .consent input[type="checkbox"],
.contact-v2__form .wpcf7-acceptance input[type="checkbox"] {
  width: 0.82rem;
  height: 0.82rem;
  margin: 0.12em 0 0;
}

.contact-v2__form .consent .wpcf7-list-item-label,
.contact-v2__form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: clamp(0.72rem, calc(0.66rem + 0.1vw), 0.8rem) !important;
  font-weight: 500;
  line-height: 1.3;
}

.contact-v2__form .personaldata {
  max-height: 2.7rem;
  padding: 0.6rem 0.75rem;
  overflow: hidden;
  border-radius: 0.85rem;
  background: rgb(213 243 243 / 78%);
  font-size: clamp(0.64rem, 0.66vw, 0.72rem);
  line-height: 1.4;
}

.contact-v2__privacy {
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgb(47 177 176 / 18%);
  border-radius: 0.85rem;
  background: rgb(213 243 243 / 78%);
}

.contact-v2__privacy-toggle {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  border: 0;
  color: var(--color-text);
  background: transparent;
  font: inherit;
  font-size: clamp(0.72rem, calc(0.65rem + 0.12vw), 0.82rem);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  gap: 1rem;
}

.contact-v2__privacy-action {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.contact-v2__privacy-panel,
.contact-v2__form .contact-v2__privacy-panel.personaldata {
  max-height: none;
  margin: 0;
  padding: 0 0.75rem 0.7rem;
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  font-size: clamp(0.7rem, calc(0.64rem + 0.1vw), 0.78rem);
  line-height: 1.42;
  text-align: left;
}

.contact-v2__privacy-panel[hidden] {
  display: none !important;
}

.contact-v2__form input[type="submit"] {
  display: block;
  min-height: var(--cta-height);
  margin: 0.35rem auto 0.3rem;
  padding: var(--cta-padding-block) clamp(1.5rem, 2vw, 2.25rem);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 1rem 2.5rem rgb(50 62 75 / 18%);
  font-size: var(--font-size-cta);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.contact-v2__form .wpcf7-form > p:has(input[type="submit"]) {
  margin-bottom: 0 !important;
  text-align: center;
}

.contact-v2__form input[type="submit"]:hover,
.contact-v2__form input[type="submit"]:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: 0 1.15rem 2.8rem rgb(49 114 118 / 20%);
  transform: translateY(-0.12rem);
}

.contact-v2__form .wpcf7-spinner {
  margin: 0 0.5rem;
  vertical-align: middle;
}

.contact-v2__form .wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  color: #b4332b;
  font-size: 0.7rem;
  font-weight: 550;
}

.contact-v2__form .wpcf7-response-output {
  margin: 0.65rem 0 0;
  padding: 0.7rem 0.85rem;
  border-width: 1px;
  border-radius: 0.8rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

@keyframes contact-v2-rise {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 74.99rem) {
  .contact-v2__shell {
    grid-template-columns: minmax(15rem, 0.72fr) minmax(31rem, 1.28fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .contact-v2 h1 {
    font-size: clamp(2.7rem, 5.2vw, 4.5rem);
  }
}

@media (max-width: 59.99rem) {
  .contact-v2 {
    min-height: 0;
    padding-top: calc(var(--cocobot-v2-header-height) + clamp(1.75rem, 6vw, 3rem));
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }

  .contact-v2__shell {
    width: min(100%, 44rem);
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.75rem);
  }

  .contact-v2__intro {
    justify-self: center;
    max-width: 38rem;
    text-align: center;
  }

  .contact-v2__avatar {
    margin-right: auto;
    margin-left: auto;
  }

  .contact-v2 h1,
  .contact-v2__lead {
    margin-right: auto;
    margin-left: auto;
  }

  .contact-v2__topics {
    justify-content: center;
  }

}

@media (max-width: 47.99rem) {
  .contact-v2 {
    padding-right: clamp(1rem, 5vw, 1.5rem);
    padding-left: clamp(1rem, 5vw, 1.5rem);
  }

  .contact-v2::before {
    right: -16rem;
    bottom: -12rem;
    width: 30rem;
  }

  .contact-v2__form-card {
    padding: clamp(1rem, 5vw, 1.35rem);
    border-radius: 1.5rem;
  }

  .contact-v2__form-heading {
    align-items: center;
  }

  .contact-v2__form input[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 39.99rem) {
  .contact-v2 h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
  }

  .contact-v2__form .contact-info {
    grid-template-columns: 1fr;
  }

  .contact-v2__form .contact-v2__field--company {
    grid-column: auto;
  }

  .contact-v2__form .radio-options .wpcf7-form-control {
    gap: 0.45rem;
  }

  .contact-v2__form .radio-options .wpcf7-list-item label {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
  }

  .contact-v2__privacy-toggle {
    min-height: 2.65rem;
  }
}

@media (min-width: 60rem) and (max-height: 90rem) {
  .contact-v2 {
    padding-top: calc(var(--cocobot-v2-header-height) + clamp(0.55rem, 1.4vh, 1rem));
    padding-bottom: clamp(0.6rem, 1.3vh, 1rem);
  }

  .contact-v2__shell {
    grid-template-columns: minmax(16rem, 1fr) minmax(38rem, 2fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .contact-v2__avatar {
    width: clamp(3.8rem, 4.2vw, 4.8rem);
    margin-bottom: 0.65rem;
  }

  .contact-v2 h1 {
    font-size: clamp(2.5rem, 3.5vw, 3.75rem);
  }

  .contact-v2__lead {
    margin-top: 0.75rem;
    font-size: clamp(0.86rem, 0.86vw, 1rem);
    line-height: 1.42;
  }

  .contact-v2__topics {
    margin-top: 0.8rem;
    gap: 0.4rem;
  }

  .contact-v2__topics li {
    min-height: 1.8rem;
    padding: 0.35rem 0.7rem;
    font-size: clamp(0.72rem, 0.72vw, 0.8rem);
  }

  .contact-v2__form-card {
    padding: clamp(0.9rem, 1.15vw, 1.25rem) clamp(1rem, 1.4vw, 1.5rem);
    border-radius: clamp(1.35rem, 1.8vw, 2rem);
  }

  .contact-v2__form-heading {
    margin-bottom: 0.45rem;
    gap: 0.7rem;
  }

  .contact-v2__form-icon {
    width: clamp(2.45rem, 2.8vw, 3rem);
  }

  .contact-v2__form-heading h2 {
    font-size: clamp(1.45rem, 1.65vw, 1.8rem);
  }

  .contact-v2__form .wpcf7-form {
    gap: 0.32rem;
  }

  .contact-v2__form .wpcf7-form h2,
  .contact-v2__form .wpcf7-form h3,
  .contact-v2__form .wpcf7-form h4,
  .contact-v2__form .wpcf7-form .titrecontact {
    margin: 0.28rem 0 0.38rem;
    font-size: clamp(1.05rem, calc(0.84rem + 0.3vw), 1.25rem);
  }

  .contact-v2__form .contact-info,
  .contact-v2__form .radio-options,
  .contact-v2__form [class*="form-group"] {
    gap: 0.32rem;
  }

  .contact-v2__form label {
    font-size: clamp(0.82rem, calc(0.73rem + 0.14vw), 0.9rem);
    gap: 0.2rem;
  }

  .contact-v2__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .contact-v2__form select {
    height: 2.55rem;
    min-height: 2.55rem;
    padding: 0.48rem 2.3rem;
    border-radius: 0.8rem;
    font-size: clamp(0.875rem, calc(0.79rem + 0.14vw), 0.98rem);
  }

  .contact-v2__form textarea {
    height: 5.15rem;
    min-height: 5.15rem;
    max-height: 6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.8rem;
  }

  .contact-v2__form .wpcf7-list-item {
    margin-right: 0.5rem;
  }

  .contact-v2__form .wpcf7-list-item-label,
  .contact-v2__form .radio-options span.wpcf7-list-item-label {
    font-size: clamp(0.84rem, calc(0.76rem + 0.14vw), 0.94rem);
  }

  .contact-v2__form input[type="submit"] {
    min-height: 2.35rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .contact-v2__form .wpcf7-spinner {
    display: inline-block;
    margin: 0 0.35rem;
  }

  .contact-v2__form .wpcf7-response-output {
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-v2__intro,
  .contact-v2__form-card {
    animation: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Blog et archives V2.                                                       */
/* -------------------------------------------------------------------------- */

.blog-v2-page {
  background: #f6f6f9;
}

.blog-v2-main {
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  overflow: clip;
  color: var(--color-text);
  background:
    radial-gradient(circle at 0 36%, rgb(79 208 211 / 9%), transparent 29rem),
    #f6f6f9;
}

.blog-v2-hero {
  position: relative;
  display: grid;
  width: 100vw;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  min-height: 33.333vh;
  min-height: 33.333svh;
  padding:
    calc(var(--cocobot-v2-header-height) + clamp(1.25rem, 2.5vh, 2.25rem))
    var(--page-gutter) clamp(1.75rem, 3.5vh, 3rem);
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 52%,
    rgb(230 173 2) 100%
  );
}

.blog-v2-hero::before {
  position: absolute;
  z-index: -2;
  top: clamp(-32rem, -26vw, -14rem);
  left: 50%;
  width: min(70rem, 82vw);
  aspect-ratio: 1;
  border: clamp(2.5rem, 4.5vw, 5rem) solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(5.5rem, 9vw, 10rem) rgb(255 255 255 / 8%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.blog-v2-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 12% 16%, rgb(255 255 255 / 25%), transparent 21rem),
    linear-gradient(116deg, transparent 42%, rgb(255 255 255 / 10%) 66%, transparent 80%);
  pointer-events: none;
}

.blog-v2-hero__orb {
  position: absolute;
  z-index: -1;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.blog-v2-hero__orb--one {
  top: clamp(8rem, 17vh, 14rem);
  left: clamp(1.5rem, 6vw, 7rem);
  width: clamp(3.5rem, 5vw, 6rem);
  border: clamp(0.55rem, 0.8vw, 0.9rem) solid rgb(255 255 255 / 52%);
}

.blog-v2-hero__orb--two {
  right: clamp(2rem, 8vw, 9rem);
  bottom: clamp(4rem, 9vh, 7rem);
  width: clamp(0.85rem, 1.1vw, 1.2rem);
  background: #ff5c4c;
  box-shadow: 0 0 0 clamp(0.7rem, 1vw, 1.1rem) rgb(255 92 76 / 15%);
}

.blog-v2-hero__inner {
  width: min(100%, 62rem);
  margin: auto;
  text-align: center;
}

.blog-v2-hero__avatar {
  display: grid;
  width: clamp(4.5rem, 5.5vw, 6rem);
  aspect-ratio: 1;
  margin: 0 auto clamp(1rem, 2vh, 1.5rem);
  place-items: center;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: rgb(255 255 255 / 42%);
  box-shadow:
    0 1rem 2.5rem rgb(92 69 0 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

.blog-v2-hero__avatar img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

.blog-v2-hero__eyebrow {
  display: inline-flex;
  margin: 0 0 clamp(0.75rem, 1.5vh, 1.1rem);
  align-items: center;
  color: var(--color-text);
  font-size: clamp(0.75rem, calc(0.68rem + 0.12vw), 0.86rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  gap: 0.65rem;
}

.blog-v2-hero__eyebrow::before,
.blog-v2-hero__eyebrow::after {
  width: clamp(1.8rem, 3vw, 3rem);
  height: 2px;
  border-radius: 99px;
  background: var(--color-accent);
  content: "";
}

.blog-v2-hero h1 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: var(--font-size-section-title);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

.blog-v2-hero__description {
  max-width: 62ch;
  margin: clamp(1.25rem, 2.5vh, 2rem) auto 0;
  font-size: var(--font-size-ui-copy);
  line-height: 1.5;
  text-wrap: pretty;
}

.blog-v2-hero__description p {
  margin: 0;
}

.blog-v2-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(1.7rem, 3.5vh, 2.6rem);
  gap: 0.55rem;
}

.blog-v2-filters a {
  display: inline-flex;
  min-height: clamp(2.25rem, 3vw, 2.65rem);
  padding: 0.55rem 1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgb(255 255 255 / 42%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
  font-size: clamp(0.75rem, calc(0.68rem + 0.12vw), 0.86rem);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.blog-v2-filters a:hover,
.blog-v2-filters a:focus-visible,
.blog-v2-filters a.is-current {
  border-color: var(--color-text);
  color: #fff;
  background: var(--color-text);
  transform: translateY(-0.08rem);
}

.blog-v2-list {
  position: relative;
  padding: clamp(4.5rem, 8vh, 7rem) var(--page-gutter) clamp(6rem, 11vh, 9rem);
  isolation: isolate;
  background:
    linear-gradient(115deg, rgb(213 243 243 / 48%), transparent 34%),
    radial-gradient(circle at 93% 15%, rgb(255 217 102 / 20%), transparent 29rem),
    #f6f6f9;
}

.blog-v2-list::before {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -18rem;
  width: 44rem;
  aspect-ratio: 1;
  border: 1px solid rgb(80 83 109 / 7%);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgb(79 208 211 / 4%),
    0 0 0 10rem rgb(79 208 211 / 2%);
  content: "";
  pointer-events: none;
}

.blog-v2-list__inner {
  width: min(100%, var(--content-width));
  margin: auto;
}

.blog-v2-list__heading {
  max-width: 52rem;
  margin: 0 auto clamp(3rem, 6vh, 5rem);
  text-align: center;
}

.blog-v2-list__heading p {
  margin: 0 0 0.65rem;
  color: var(--color-accent-strong);
  font-size: clamp(0.75rem, calc(0.68rem + 0.12vw), 0.86rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-v2-list__heading h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: 520;
  letter-spacing: -0.05em;
  line-height: 1.04;
  text-wrap: balance;
}

.blog-v2-grid {
  display: grid;
  width: min(100%, 72rem);
  margin: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 3.5vw, 3.5rem);
}

.blog-v2-card {
  --blog-card-rotate: 0deg;
  position: relative;
  display: grid;
  min-width: 0;
  padding: clamp(0.65rem, 0.9vw, 0.85rem);
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 8%);
  border-radius: clamp(1.4rem, 2vw, 2rem);
  background: rgb(255 255 255 / 93%);
  box-shadow:
    0 2rem 4.5rem rgb(61 72 92 / 11%),
    inset 0 1px 0 #fff;
  transform: rotate(var(--blog-card-rotate));
  transform-origin: 50% 15%;
  transition:
    box-shadow 300ms var(--ease-out),
    transform 300ms var(--ease-out);
  animation: blog-v2-card-in 700ms var(--ease-out) both;
}

.blog-v2-card--1,
.blog-v2-card--5 {
  --blog-card-rotate: -0.8deg;
}

.blog-v2-card--2,
.blog-v2-card--6 {
  --blog-card-rotate: 0.55deg;
}

.blog-v2-card--3 {
  --blog-card-rotate: -0.35deg;
}

.blog-v2-card--4 {
  --blog-card-rotate: 0.8deg;
}

.blog-v2-card:nth-child(2),
.blog-v2-card:nth-child(5) {
  animation-delay: 80ms;
}

.blog-v2-card:nth-child(3n) {
  animation-delay: 160ms;
}

.blog-v2-card:hover,
.blog-v2-card:focus-within {
  z-index: 2;
  box-shadow:
    0 2.6rem 5.5rem rgb(61 72 92 / 16%),
    inset 0 1px 0 #fff;
  transform: translateY(-0.45rem) rotate(0deg);
}

.blog-v2-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: clamp(1rem, 1.5vw, 1.45rem);
  background: #d5f3f3;
}

.blog-v2-card__media::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.blog-v2-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms var(--ease-out);
}

.blog-v2-card:hover .blog-v2-card__image,
.blog-v2-card:focus-within .blog-v2-card__image {
  transform: scale(1.035);
}

.blog-v2-card__fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgb(255 255 255 / 46%), transparent 8rem),
    linear-gradient(135deg, #bce3e3, #d5f3f3 50%, #ffd966);
}

.blog-v2-card__fallback-brand {
  color: var(--color-text);
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.075em;
}

.blog-v2-card__fallback-brand span {
  color: var(--color-accent);
}

.blog-v2-card__body {
  display: flex;
  min-height: clamp(19rem, 25vw, 23rem);
  padding: clamp(1.2rem, 1.8vw, 1.7rem) clamp(0.65rem, 1vw, 1rem) clamp(0.7rem, 1vw, 1rem);
  flex-direction: column;
}

.blog-v2-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--color-muted);
  font-size: clamp(0.72rem, calc(0.65rem + 0.1vw), 0.8rem);
  font-weight: 600;
  line-height: 1.2;
  gap: 0.5rem;
}

.blog-v2-card__meta > * + *::before {
  margin-right: 0.5rem;
  color: var(--color-accent-strong);
  content: "•";
}

.blog-v2-card__meta a {
  color: var(--color-accent-strong);
  text-decoration: none;
}

.blog-v2-card__title {
  margin: clamp(0.9rem, 1.5vh, 1.2rem) 0 0;
  font-size: clamp(1.2rem, calc(0.82rem + 0.62vw), 1.65rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

.blog-v2-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.blog-v2-card__title a:hover,
.blog-v2-card__title a:focus-visible {
  color: var(--color-accent-strong);
}

.blog-v2-card__excerpt {
  margin: clamp(0.85rem, 1.6vh, 1.15rem) 0 1.3rem;
  color: var(--color-muted);
  font-size: clamp(0.88rem, calc(0.78rem + 0.14vw), 0.98rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.blog-v2-card__link {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  align-items: center;
  color: var(--color-text);
  font-size: var(--font-size-cta);
  font-weight: 700;
  text-decoration: none;
  gap: 0.65rem;
}

.blog-v2-card__link-icon {
  display: grid;
  width: clamp(2rem, 2.5vw, 2.5rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  transition: transform 220ms var(--ease-out);
}

.blog-v2-card__link-icon svg {
  width: 54%;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog-v2-card__link:hover .blog-v2-card__link-icon,
.blog-v2-card__link:focus-visible .blog-v2-card__link-icon {
  transform: translateX(0.2rem);
}

@keyframes blog-v2-card-in {
  from {
    opacity: 0;
    transform: translateY(2rem) rotate(var(--blog-card-rotate));
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--blog-card-rotate));
  }
}

.blog-v2-pagination {
  margin-top: clamp(3.5rem, 7vh, 6rem);
}

.blog-v2-pagination .navigation {
  margin: 0;
}

.blog-v2-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.blog-v2-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(80 83 109 / 14%);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: #fff;
  box-shadow: 0 0.8rem 2rem rgb(61 72 92 / 7%);
  font-size: clamp(0.78rem, calc(0.7rem + 0.12vw), 0.88rem);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.blog-v2-pagination .page-numbers:hover,
.blog-v2-pagination .page-numbers:focus-visible,
.blog-v2-pagination .page-numbers.current {
  border-color: var(--color-text);
  color: #fff;
  background: var(--color-text);
}

.blog-v2-empty {
  width: min(100%, 42rem);
  margin: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgb(79 208 211 / 23%);
  border-radius: 2rem;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 2rem 4rem rgb(61 72 92 / 9%);
  text-align: center;
}

.blog-v2-empty h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.1;
}

.blog-v2-empty p {
  margin: 1rem auto 1.5rem;
  font-size: var(--font-size-ui-copy);
  line-height: 1.5;
}

.blog-v2-empty a {
  display: inline-flex;
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-start);
  align-items: center;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  font-size: var(--font-size-cta);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 74.99rem) {
  .blog-v2-card__body {
    min-height: clamp(18rem, 31vw, 22rem);
  }
}

@media (min-width: 48rem) and (max-height: 45rem) {
  .blog-v2-hero {
    padding-top: calc(var(--cocobot-v2-header-height) + clamp(0.75rem, 2vh, 1.25rem));
    padding-bottom: clamp(0.9rem, 2.5vh, 1.4rem);
  }

  .blog-v2-hero__avatar {
    width: clamp(3.5rem, 4.2vw, 4.25rem);
    margin-bottom: 0.55rem;
  }

  .blog-v2-hero__eyebrow {
    margin-bottom: 0.5rem;
  }

  .blog-v2-hero h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
  }

  .blog-v2-hero__description {
    margin-top: 0.75rem;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
  }

  .blog-v2-filters {
    margin-top: 1rem;
  }

  .blog-v2-filters a {
    min-height: 2.1rem;
    padding: 0.45rem 0.85rem;
  }

  .blog-v2-list {
    padding-top: clamp(2.75rem, 6vh, 3.5rem);
  }

  .blog-v2-list__heading {
    margin-bottom: clamp(2rem, 4vh, 2.75rem);
  }
}

@media (max-width: 47.99rem) {
  .blog-v2-hero {
    padding:
      calc(var(--cocobot-v2-header-height) + clamp(1.25rem, 5vw, 2rem))
      clamp(1rem, 5vw, 1.5rem) clamp(1.5rem, 6vw, 2.5rem);
  }

  .blog-v2-hero__avatar {
    width: clamp(4rem, 17vw, 5.25rem);
  }

  .blog-v2-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.15rem);
  }

  .blog-v2-hero__description {
    font-size: clamp(0.95rem, 4.1vw, 1.08rem);
  }

  .blog-v2-filters {
    margin-right: calc(clamp(1rem, 5vw, 1.5rem) * -1);
    margin-left: calc(clamp(1rem, 5vw, 1.5rem) * -1);
    padding: 0 clamp(1rem, 5vw, 1.5rem) 0.4rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .blog-v2-filters::-webkit-scrollbar {
    display: none;
  }

  .blog-v2-filters a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .blog-v2-list {
    padding: clamp(3.5rem, 12vw, 5rem) clamp(1rem, 5vw, 1.5rem) clamp(5rem, 16vw, 7rem);
  }

  .blog-v2-list__heading {
    margin-bottom: clamp(2.5rem, 9vw, 3.5rem);
  }

  .blog-v2-list__heading h2 {
    font-size: clamp(1.9rem, 8vw, 2.75rem);
  }

  .blog-v2-grid {
    width: min(100%, 34rem);
    margin: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .blog-v2-card {
    --blog-card-rotate: 0deg;
    border-radius: 1.5rem;
  }

  .blog-v2-card__media {
    aspect-ratio: 16 / 9;
  }

  .blog-v2-card__body {
    min-height: 0;
    padding: 1.2rem 0.7rem 0.8rem;
  }

  .blog-v2-card__title {
    font-size: clamp(1.25rem, 5.4vw, 1.55rem);
  }

  .blog-v2-card__excerpt {
    font-size: clamp(0.95rem, 4vw, 1.05rem);
  }

  .blog-v2-card__link {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-v2-card {
    animation: none;
    transition: none;
  }

  .blog-v2-card__image,
  .blog-v2-card__link-icon {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Article individuel V2.                                                     */
/* -------------------------------------------------------------------------- */

.blog-single-v2-main {
  width: 100%;
  overflow: clip;
  color: var(--color-text);
  background:
    radial-gradient(circle at 0 42%, rgb(79 208 211 / 9%), transparent 30rem),
    #f6f6f9;
}

.blog-single-v2 {
  margin: 0;
}

.blog-single-v2__hero {
  position: relative;
  display: grid;
  width: 100vw;
  max-width: none;
  min-height: clamp(25rem, 48vh, 36rem);
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding:
    calc(var(--cocobot-v2-header-height) + clamp(3.25rem, 6vh, 5.5rem))
    var(--page-gutter) clamp(5.5rem, 9vh, 7.5rem);
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: linear-gradient(
    0deg,
    rgb(230 173 2) 0%,
    rgb(255 217 102) 52%,
    rgb(230 173 2) 100%
  );
}

.blog-single-v2__hero::before {
  position: absolute;
  z-index: -2;
  top: clamp(-33rem, -27vw, -15rem);
  left: 50%;
  width: min(72rem, 84vw);
  aspect-ratio: 1;
  border: clamp(2.5rem, 4.5vw, 5rem) solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(5.5rem, 9vw, 10rem) rgb(255 255 255 / 8%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.blog-single-v2__hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 11% 20%, rgb(255 255 255 / 24%), transparent 22rem),
    linear-gradient(116deg, transparent 44%, rgb(255 255 255 / 10%) 66%, transparent 82%);
  pointer-events: none;
}

.blog-single-v2__hero-orb {
  position: absolute;
  z-index: -1;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.blog-single-v2__hero-orb--one {
  top: clamp(8rem, 17vh, 13rem);
  left: clamp(1.5rem, 6vw, 7rem);
  width: clamp(3.5rem, 5vw, 5.75rem);
  border: clamp(0.55rem, 0.8vw, 0.9rem) solid rgb(255 255 255 / 52%);
}

.blog-single-v2__hero-orb--two {
  right: clamp(2rem, 8vw, 9rem);
  bottom: clamp(4.5rem, 9vh, 7rem);
  width: clamp(0.85rem, 1.1vw, 1.2rem);
  background: #ff5c4c;
  box-shadow: 0 0 0 clamp(0.7rem, 1vw, 1.1rem) rgb(255 92 76 / 15%);
}

.blog-single-v2__hero-inner {
  width: min(100%, 66rem);
  margin: auto;
  text-align: center;
}

.blog-single-v2__category {
  display: inline-flex;
  min-height: 2.25rem;
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
  padding: 0.55rem 1rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgb(255 255 255 / 48%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%);
  font-size: clamp(0.75rem, calc(0.68rem + 0.12vw), 0.86rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

a.blog-single-v2__category:hover,
a.blog-single-v2__category:focus-visible {
  color: #fff;
  background: var(--color-text);
  transform: translateY(-0.08rem);
}

.blog-single-v2__hero h1 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: var(--font-size-section-title);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 1.03;
  text-wrap: balance;
}

.blog-single-v2__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(1.4rem, 2.5vh, 2rem);
  align-items: center;
  justify-content: center;
  color: rgb(80 83 109 / 82%);
  font-size: clamp(0.8rem, calc(0.72rem + 0.12vw), 0.9rem);
  font-weight: 550;
  gap: 0.6rem;
}

.blog-single-v2__meta > * + *::before {
  margin-right: 0.6rem;
  color: var(--color-accent-strong);
  content: "•";
}

.blog-single-v2__meta a {
  text-underline-offset: 0.18em;
}

.blog-single-v2__reading {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: clamp(-4.5rem, -6vh, -3rem);
  padding: 0 var(--page-gutter) clamp(6rem, 10vh, 9rem);
}

.blog-single-v2__paper {
  width: min(100%, 72rem);
  margin: auto;
  padding: clamp(0.65rem, 0.9vw, 0.9rem);
  border: 1px solid rgb(80 83 109 / 7%);
  border-radius: clamp(1.5rem, 2.2vw, 2.25rem);
  background: rgb(255 255 255 / 96%);
  box-shadow:
    0 2.5rem 6rem rgb(61 72 92 / 12%),
    inset 0 1px 0 #fff;
}

.blog-single-v2__featured {
  display: grid;
  width: 100%;
  max-height: 45vh;
  max-height: 45svh;
  margin: 0;
  overflow: hidden;
  place-items: center;
  border-radius: clamp(1.1rem, 1.7vw, 1.65rem);
  background:
    radial-gradient(circle at 80% 18%, rgb(255 217 102 / 18%), transparent 16rem),
    linear-gradient(135deg, #f7ffff, #fff);
}

.blog-single-v2__featured-image {
  width: 100%;
  height: auto;
  max-height: 45vh;
  max-height: 45svh;
  object-fit: contain;
  object-position: center;
}

.blog-single-v2__content {
  width: min(100%, 56rem);
  margin: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.75rem);
  color: var(--color-text);
  font-size: var(--font-size-ui-copy);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.blog-single-v2__content > :first-child {
  margin-top: 0;
}

.blog-single-v2__content > :last-child {
  margin-bottom: 0;
}

.blog-single-v2__content p,
.blog-single-v2__content ul,
.blog-single-v2__content ol,
.blog-single-v2__content blockquote,
.blog-single-v2__content figure,
.blog-single-v2__content table,
.blog-single-v2__content .wp-block-embed {
  margin-top: 0;
  margin-bottom: 1.45em;
}

.blog-single-v2__content > p:first-child {
  color: var(--color-text);
  font-size: var(--font-size-highlight-copy);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

.blog-single-v2__content h2,
.blog-single-v2__content h3,
.blog-single-v2__content h4 {
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-wrap: balance;
}

.blog-single-v2__content h2 {
  margin: 1.9em 0 0.8em;
  font-size: clamp(1.7rem, calc(1.1rem + 1vw), 2.65rem);
}

.blog-single-v2__content h2::after {
  display: block;
  width: clamp(2.5rem, 5vw, 4.5rem);
  height: 0.18rem;
  margin-top: 0.55rem;
  border-radius: 99px;
  background: var(--color-accent);
  content: "";
}

.blog-single-v2__content h3 {
  margin: 1.6em 0 0.7em;
  color: var(--color-accent-strong);
  font-size: var(--font-size-highlight-copy);
}

.blog-single-v2__content h4 {
  margin: 1.45em 0 0.65em;
  font-size: var(--font-size-ui-copy);
}

.blog-single-v2__content a {
  color: var(--color-accent-strong);
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.blog-single-v2__content strong {
  font-weight: 650;
}

.blog-single-v2__content ul,
.blog-single-v2__content ol {
  padding-left: 1.35em;
}

.blog-single-v2__content li {
  padding-left: 0.25em;
}

.blog-single-v2__content li + li {
  margin-top: 0.5em;
}

.blog-single-v2__content li::marker {
  color: var(--color-accent-strong);
  font-weight: 700;
}

.blog-single-v2__content blockquote {
  position: relative;
  margin-right: 0;
  margin-left: 0;
  padding: clamp(1.35rem, 3vw, 2.25rem) clamp(1.35rem, 3.5vw, 2.75rem);
  border: 1px solid rgb(79 208 211 / 30%);
  border-radius: clamp(1rem, 1.5vw, 1.5rem);
  background: linear-gradient(135deg, rgb(213 243 243 / 78%), rgb(255 255 255 / 94%));
  box-shadow: 0 1.2rem 2.7rem rgb(61 72 92 / 7%);
  font-size: var(--font-size-highlight-copy);
  font-weight: 500;
  line-height: 1.5;
}

.blog-single-v2__content blockquote::before {
  position: absolute;
  top: 0.2rem;
  left: 0.8rem;
  color: rgb(47 177 176 / 25%);
  content: "“";
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
}

.blog-single-v2__content blockquote p:last-child {
  margin-bottom: 0;
}

.blog-single-v2__content img {
  height: auto;
  border-radius: clamp(0.8rem, 1.3vw, 1.25rem);
}

.blog-single-v2__content figcaption {
  margin-top: 0.65rem;
  color: var(--color-muted);
  font-size: 0.78em;
  line-height: 1.45;
  text-align: center;
}

.blog-single-v2__content hr {
  width: min(100%, 12rem);
  height: 1px;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.blog-single-v2__content table {
  width: 100%;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgb(80 83 109 / 12%);
  border-radius: 1rem;
  font-size: 0.9em;
}

.blog-single-v2__content th,
.blog-single-v2__content td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgb(80 83 109 / 10%);
  text-align: left;
  vertical-align: top;
}

.blog-single-v2__content th {
  background: rgb(213 243 243 / 72%);
  font-weight: 650;
}

.blog-single-v2__content tr:last-child > * {
  border-bottom: 0;
}

.blog-single-v2__content iframe,
.blog-single-v2__content video {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 1rem;
}

.blog-single-v2__page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.blog-single-v2__page-links > * {
  display: inline-grid;
  min-width: 2.25rem;
  min-height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: #d5f3f3;
  text-decoration: none;
}

.blog-single-v2__tags {
  display: flex;
  width: min(100%, 56rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-single-v2__tags a {
  display: inline-flex;
  min-height: 2.25rem;
  padding: 0.5rem 0.9rem;
  align-items: center;
  border: 1px solid rgb(79 208 211 / 32%);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgb(213 243 243 / 55%);
  font-size: clamp(0.75rem, calc(0.68rem + 0.12vw), 0.86rem);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.blog-single-v2__tags a:hover,
.blog-single-v2__tags a:focus-visible {
  color: #fff;
  background: var(--color-text);
  transform: translateY(-0.08rem);
}

.blog-single-v2__post-nav {
  display: grid;
  width: min(100%, 72rem);
  margin: clamp(2rem, 5vh, 4rem) auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.blog-single-v2__post-nav-item:empty {
  display: none;
}

.blog-single-v2__post-nav-item a {
  display: flex;
  min-height: 7rem;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: clamp(1.2rem, 1.8vw, 1.7rem);
  color: var(--color-text);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1.2rem 3rem rgb(61 72 92 / 8%);
  text-decoration: none;
  transition:
    border-color 200ms ease,
    transform 200ms var(--ease-out);
}

.blog-single-v2__post-nav-item a:hover,
.blog-single-v2__post-nav-item a:focus-visible {
  border-color: rgb(79 208 211 / 60%);
  transform: translateY(-0.2rem);
}

.blog-single-v2__post-nav-item span {
  margin-bottom: 0.35rem;
  color: var(--color-accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-single-v2__post-nav-item strong {
  font-size: clamp(1rem, calc(0.85rem + 0.22vw), 1.15rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.blog-single-v2__post-nav-item--next {
  text-align: right;
}

.blog-single-v2__comments {
  width: min(100%, 56rem);
  margin: clamp(2rem, 5vh, 4rem) auto 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgb(80 83 109 / 9%);
  border-radius: clamp(1.2rem, 1.8vw, 1.7rem);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1.2rem 3rem rgb(61 72 92 / 8%);
}

.blog-single-v2__comments .comments-title,
.blog-single-v2__comments .comment-reply-title {
  margin-top: 0;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.blog-single-v2__comments textarea,
.blog-single-v2__comments input:not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(80 83 109 / 16%);
  border-radius: 0.8rem;
  background: #fff;
}

.blog-single-v2__comments input[type="submit"] {
  min-height: var(--cta-height);
  padding: var(--cta-padding-block) var(--cta-padding-inline-start);
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-text);
  font-size: var(--font-size-cta);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 48rem) and (max-height: 45rem) {
  .blog-single-v2__hero {
    min-height: clamp(20rem, 60vh, 24rem);
    padding-top: calc(var(--cocobot-v2-header-height) + clamp(1.25rem, 3vh, 2rem));
    padding-bottom: clamp(4rem, 8vh, 5rem);
  }

  .blog-single-v2__hero h1 {
    font-size: clamp(2rem, 3.4vw, 2.85rem);
  }

  .blog-single-v2__category {
    margin-bottom: 0.75rem;
  }

  .blog-single-v2__meta {
    margin-top: 0.8rem;
  }
}

@media (max-width: 47.99rem) {
  .blog-single-v2__hero {
    min-height: 0;
    padding:
      calc(var(--cocobot-v2-header-height) + clamp(2.5rem, 9vw, 4rem))
      clamp(1rem, 5vw, 1.5rem) clamp(5rem, 15vw, 6.5rem);
  }

  .blog-single-v2__hero h1 {
    max-width: 18ch;
    font-size: clamp(2rem, 9.2vw, 3.1rem);
  }

  .blog-single-v2__hero-orb--one {
    top: 7rem;
    left: -1.5rem;
  }

  .blog-single-v2__hero-orb--two {
    right: 1.5rem;
    bottom: 3rem;
  }

  .blog-single-v2__meta {
    margin-top: 1.1rem;
    gap: 0.4rem;
  }

  .blog-single-v2__meta > * + *::before {
    margin-right: 0.4rem;
  }

  .blog-single-v2__reading {
    margin-top: -3rem;
    padding-right: clamp(0.75rem, 3.5vw, 1.1rem);
    padding-left: clamp(0.75rem, 3.5vw, 1.1rem);
  }

  .blog-single-v2__paper {
    padding: clamp(0.4rem, 1.8vw, 0.6rem);
    border-radius: 1.35rem;
  }

  .blog-single-v2__featured {
    border-radius: 1rem;
  }

  .blog-single-v2__content {
    padding: clamp(2rem, 8vw, 3rem) clamp(0.85rem, 4vw, 1.25rem);
    font-size: clamp(0.98rem, 4.1vw, 1.08rem);
    line-height: 1.7;
  }

  .blog-single-v2__content > p:first-child {
    font-size: clamp(1.08rem, 4.7vw, 1.25rem);
  }

  .blog-single-v2__content h2 {
    font-size: clamp(1.65rem, 7.3vw, 2.15rem);
  }

  .blog-single-v2__content h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
  }

  .blog-single-v2__content blockquote {
    padding: 1.25rem;
  }

  .blog-single-v2__tags {
    padding-right: clamp(0.85rem, 4vw, 1.25rem);
    padding-left: clamp(0.85rem, 4vw, 1.25rem);
  }

  .blog-single-v2__post-nav {
    grid-template-columns: 1fr;
  }

  .blog-single-v2__post-nav-item--next {
    text-align: left;
  }

  .blog-single-v2__post-nav-item a {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-single-v2__category,
  .blog-single-v2__tags a,
  .blog-single-v2__post-nav-item a {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* WordPress shell V2: header and footer shared by the isolated pages.        */
/* -------------------------------------------------------------------------- */

body.cocobot-v2 {
  --cocobot-v2-header-height: clamp(4rem, 4.8vw, 4.75rem);
}

body.cocobot-v2 [data-scene],
body.cocobot-v2 #comparatif,
body.cocobot-v2 .offer-trial-section,
body.cocobot-v2 :target {
  scroll-margin-top: calc(var(--cocobot-v2-header-height) + 0.75rem);
}

.cocobot-v2-header {
  position: fixed;
  z-index: 900;
  top: 0;
  right: 0;
  left: 0;
  height: var(--cocobot-v2-header-height);
  border-bottom: 1px solid transparent;
  background: rgb(255 250 240 / 0%);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.admin-bar .cocobot-v2-header {
  top: 32px;
}

.cocobot-v2-header.is-scrolled,
.cocobot-v2-header.is-menu-open {
  border-color: rgb(80 83 109 / 10%);
  background: rgb(255 250 240 / 92%);
  box-shadow: 0 0.75rem 2.5rem rgb(80 83 109 / 10%);
  backdrop-filter: blur(1rem);
}

.cocobot-v2-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: min(calc(100% - 2 * clamp(1rem, 3vw, 3rem)), 110rem);
  height: 100%;
  margin-inline: auto;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.cocobot-v2-header__brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-self: start;
  text-decoration: none;
}

.cocobot-v2-header__brand img {
  width: clamp(8.7rem, 10vw, 11.5rem);
  height: auto;
}

.cocobot-v2-header__nav {
  grid-column: 2;
  margin: 0;
}

.cocobot-v2-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(0.85rem, 1.35vw, 1.75rem);
}

.cocobot-v2-header__menu li {
  position: relative;
  margin: 0;
}

.cocobot-v2-header__menu > li {
  display: flex;
  align-items: center;
}

.cocobot-v2-header__menu a,
.cocobot-v2-footer a {
  color: var(--color-text);
  text-decoration: none;
}

.cocobot-v2-header__menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-block: 0.5rem;
  font-size: clamp(0.68rem, 0.72vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.cocobot-v2-header__menu > li > a img {
  display: block;
  width: auto;
  max-height: 1rem;
}

.cocobot-v2-header__menu a::after {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--color-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.cocobot-v2-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  display: grid;
  min-width: 14rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: 1rem;
  background: #fffaf0;
  box-shadow: 0 1.25rem 3rem rgb(40 42 58 / 16%);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.5rem);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.cocobot-v2-header__menu .sub-menu a {
  display: block;
  padding: 0.65rem 0.75rem;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.cocobot-v2-header__menu .sub-menu a::after {
  display: none;
}

.cocobot-v2-header__menu li:hover > .sub-menu,
.cocobot-v2-header__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.cocobot-v2-header__menu a:hover::after,
.cocobot-v2-header__menu a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cocobot-v2-header__mobile-actions {
  display: none;
}

.cocobot-v2-header__actions {
  --header-control-size: clamp(2.4rem, 2.6vw, 2.65rem);

  display: flex;
  flex: 0 0 auto;
  grid-column: 3;
  align-items: center;
  justify-self: end;
  gap: clamp(0.45rem, 0.8vw, 0.8rem);
}

.cocobot-v2-header__linkedin,
.cocobot-v2-header__cart {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--header-control-size);
  height: var(--header-control-size);
  place-items: center;
  border: 1px solid rgb(80 83 109 / 14%);
  border-radius: 50%;
  color: var(--color-text);
  background: rgb(255 255 255 / 82%);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.cocobot-v2-header__linkedin:hover,
.cocobot-v2-header__cart:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.cocobot-v2-header__linkedin svg,
.cocobot-v2-header__cart svg {
  width: 1.15rem;
  height: 1.15rem;
}

.cocobot-v2-header__linkedin svg {
  fill: #0077b5;
}

.cocobot-v2-header__cart svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cocobot-v2-header__cart .cocobot-header-cart__count {
  position: absolute;
  top: -0.3rem;
  right: -0.2rem;
  display: grid;
  min-width: 1.2rem;
  height: 1.2rem;
  padding-inline: 0.2rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--color-accent);
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1;
}

.cocobot-v2-header__login {
  display: inline-flex;
  align-items: center;
  height: var(--header-control-size);
  padding: 0.25rem 0.3rem 0.25rem clamp(0.95rem, 1.1vw, 1.2rem);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgb(255 255 255 / 92%);
  box-shadow:
    0 0.65rem 1.7rem rgb(50 62 75 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 85%);
  font-size: clamp(0.68rem, 0.72vw, 0.84rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  gap: clamp(0.65rem, 0.8vw, 0.85rem);
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.cocobot-v2-header__login > span:first-child {
  color: inherit;
}

.cocobot-v2-header__login:hover,
.cocobot-v2-header__login:focus-visible {
  border-color: var(--color-text);
  color: #fff;
  background: var(--color-text);
  box-shadow: 0 0.85rem 2rem rgb(50 62 75 / 18%);
}

.cocobot-v2-header__login:focus-visible {
  outline: 3px solid rgb(79 208 211 / 32%);
  outline-offset: 3px;
}

.cocobot-v2-header__action-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: calc(var(--header-control-size) - 0.55rem);
  height: calc(var(--header-control-size) - 0.55rem);
  place-items: center;
  border-radius: 50%;
  color: var(--color-text);
  background: var(--color-accent);
  transition:
    color 200ms ease,
    background-color 200ms ease,
    transform 220ms var(--ease-out);
}

.cocobot-v2-header__action-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cocobot-v2-header__login:hover .cocobot-v2-header__action-icon,
.cocobot-v2-header__login:focus-visible .cocobot-v2-header__action-icon {
  color: var(--color-text);
  background: #fff;
  transform: translateX(0.12rem);
}

.cocobot-v2-header__menu-toggle {
  display: none;
  width: 2.7rem;
  height: 2.7rem;
  margin-left: auto;
  padding: 0.7rem;
  border: 1px solid rgb(80 83 109 / 16%);
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
}

.cocobot-v2-header__menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin-block: 0.25rem;
  border-radius: 99px;
  background: var(--color-text);
  transition: transform 180ms ease, opacity 180ms ease;
}

.cocobot-v2-header.is-menu-open .cocobot-v2-header__menu-toggle span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.cocobot-v2-header.is-menu-open .cocobot-v2-header__menu-toggle span:nth-child(2) {
  opacity: 0;
}

.cocobot-v2-header.is-menu-open .cocobot-v2-header__menu-toggle span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.cocobot-v2-header__backdrop {
  position: fixed;
  z-index: 875;
  inset: 0;
  background: rgb(40 42 58 / 38%);
  backdrop-filter: blur(0.2rem);
}

html.has-cocobot-v2-menu {
  overflow: hidden;
}

.cocobot-v2-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: clamp(42rem, 76vh, 58rem);
  min-height: clamp(42rem, 76svh, 58rem);
  overflow: hidden;
  padding: clamp(3rem, 5.5vh, 5rem) var(--page-gutter) clamp(1.25rem, 2.5vh, 2rem);
  color: var(--color-text);
  background: linear-gradient(0deg, rgb(230 173 2) 0%, rgb(255 217 102) 50%, rgb(230 173 2) 100%);
}

.cocobot-v2-footer::before {
  position: absolute;
  z-index: -1;
  top: -38%;
  left: 50%;
  width: min(82rem, 94vw);
  aspect-ratio: 1;
  border: clamp(3rem, 7vw, 7rem) solid rgb(255 255 255 / 11%);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(3rem, 7vw, 7rem) rgb(255 255 255 / 5%);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.cocobot-v2-footer__inner,
.cocobot-v2-footer__lower {
  width: min(100%, clamp(75rem, 82vw, 108rem));
  margin-inline: auto;
}

.cocobot-v2-footer__inner {
  display: grid;
  grid-template-columns: minmax(20rem, 1.2fr) minmax(24rem, 1fr) minmax(16rem, 0.72fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 8rem);
}

.cocobot-v2-footer__brand {
  position: relative;
}

.cocobot-v2-footer__brand::before {
  position: absolute;
  top: 0.55em;
  left: clamp(-5rem, -4vw, -2.75rem);
  width: clamp(0.75rem, 0.9vw, 1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #151620;
  content: "";
}

.cocobot-v2-footer__promise {
  margin: 0;
  font-size: clamp(3rem, 4.4vw, 5.5rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.96;
  text-wrap: balance;
}

.cocobot-v2-footer__promise span {
  display: block;
}

.cocobot-v2-footer__linkedin {
  display: inline-grid;
  width: clamp(2.4rem, 2.7vw, 2.9rem);
  aspect-ratio: 1;
  margin-top: clamp(1.8rem, 3.5vh, 2.75rem);
  place-items: center;
  border: 1px solid rgb(80 83 109 / 10%);
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 0.8rem 2rem rgb(92 69 0 / 9%);
  transition: transform 180ms ease, background-color 180ms ease;
}

.cocobot-v2-footer__linkedin svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.cocobot-v2-footer__linkedin:hover,
.cocobot-v2-footer__linkedin:focus-visible {
  color: var(--color-text);
  background: #fff;
  transform: translateY(-0.2rem);
}

.cocobot-v2-footer__sitemap,
.cocobot-v2-footer__side {
  min-width: 0;
}

.cocobot-v2-footer__widget {
  margin: 0;
}

.cocobot-v2-footer__widget + .cocobot-v2-footer__widget {
  margin-top: 1.15rem;
}

.cocobot-v2-footer__sitemap > .cocobot-v2-footer__widget + .cocobot-v2-footer__widget {
  padding-top: 1.15rem;
  border-top: 1px solid rgb(80 83 109 / 20%);
}

.cocobot-v2-footer__sitemap > .cocobot-v2-footer__widget:not(:first-child) > .cocobot-v2-footer__widget-title {
  display: none;
}

.cocobot-v2-footer__widget ul,
.cocobot-v2-footer__widget .wp-block-navigation__container {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cocobot-v2-footer__sitemap .menu,
.cocobot-v2-footer__sitemap .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
}

.cocobot-v2-footer__sitemap .menu li,
.cocobot-v2-footer__sitemap .wp-block-navigation-item {
  margin: 0;
}

.cocobot-v2-footer__sitemap .menu a,
.cocobot-v2-footer__sitemap .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.52rem 1rem;
  border: 1px solid rgb(80 83 109 / 6%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 0.5rem 1.4rem rgb(92 69 0 / 5%);
  font-size: clamp(0.68rem, 0.7vw, 0.8rem);
  font-weight: 550;
  line-height: 1.2;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.cocobot-v2-footer__sitemap .menu a:hover,
.cocobot-v2-footer__sitemap .menu a:focus-visible,
.cocobot-v2-footer__sitemap .wp-block-navigation-item__content:hover,
.cocobot-v2-footer__sitemap .wp-block-navigation-item__content:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: #fff;
  transform: translateY(-0.12rem);
}

.cocobot-v2-footer__side .cocobot-v2-footer__widget,
.cocobot-v2-footer__side .menu,
.cocobot-v2-footer__side .wp-block-navigation__container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.65rem;
}

.cocobot-v2-footer__widget p {
  margin: 0 0 0.9rem;
  line-height: 1.45;
}

.cocobot-v2-footer__widget-title,
.cocobot-v2-footer h2 {
  position: relative;
  margin: 0 0 1.1rem;
  padding-left: 1rem;
  font-size: clamp(0.95rem, 1vw, 1.12rem);
  font-weight: 650;
  line-height: 1.2;
}

.cocobot-v2-footer__widget-title::before,
.cocobot-v2-footer h2::before {
  position: absolute;
  top: 0.47em;
  left: 0;
  width: 0.48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5c4c;
  content: "";
}

.cocobot-v2-footer__widget a,
.cocobot-v2-footer__legal {
  font-size: clamp(0.75rem, 0.78vw, 0.9rem);
}

.cocobot-v2-footer a:hover,
.cocobot-v2-footer a:focus-visible {
  color: #20b8be;
}

.cocobot-v2-footer__lower {
  align-self: end;
  margin-top: clamp(2.75rem, 5vh, 4.5rem);
}

.cocobot-v2-footer__wordmark {
  display: block;
  width: fit-content;
  margin: 0;
  font-size: clamp(8rem, 14.2vw, 18rem);
  font-weight: 750;
  letter-spacing: -0.09em;
  line-height: 0.7;
  white-space: nowrap;
}

.cocobot-v2-footer__wordmark span {
  color: var(--color-accent);
}

.cocobot-v2-footer__legal {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
  color: #171821;
  gap: 1.5rem;
}

.cocobot-v2-footer__legal > span {
  text-align: center;
}

.cocobot-v2-footer__bottom-widgets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
}

.cocobot-v2-footer__bottom-widgets .cocobot-v2-footer__widget,
.cocobot-v2-footer__bottom-widgets .menu,
.cocobot-v2-footer__bottom-widgets .wp-block-navigation__container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  gap: 0.6rem 1.25rem;
}

.cocobot-v2-footer__bottom-widgets .cocobot-v2-footer__widget-title {
  display: none;
}

.cocobot-v2-footer__bottom-widgets .menu a,
.cocobot-v2-footer__bottom-widgets .wp-block-navigation-item__content {
  white-space: nowrap;
}

@media (max-width: 74.99rem) {
  .cocobot-v2-header__inner {
    display: flex;
  }

  .cocobot-v2-header__menu-toggle {
    display: block;
  }

  .cocobot-v2-header__nav {
    position: fixed;
    z-index: 910;
    top: calc(var(--cocobot-v2-header-height) + 0.75rem);
    right: auto;
    left: 50%;
    width: min(80vw, 34rem);
    max-height: calc(100vh - var(--cocobot-v2-header-height) - 1.5rem);
    max-height: calc(100dvh - var(--cocobot-v2-header-height) - 1.5rem);
    overflow-y: auto;
    padding: clamp(1.15rem, 4vw, 1.75rem);
    border: 1px solid rgb(80 83 109 / 12%);
    border-radius: clamp(1.35rem, 4vw, 2rem);
    background: #fffaf0;
    box-shadow: 0 1.5rem 4rem rgb(40 42 58 / 20%);
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.75rem) scale(0.98);
    transform-origin: top center;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .cocobot-v2-header__menu {
    display: grid;
    width: 100%;
    justify-items: center;
    gap: 0;
  }

  .cocobot-v2-header__menu > li {
    display: block;
    width: min(100%, 20rem);
  }

  .admin-bar .cocobot-v2-header__nav {
    top: calc(var(--cocobot-v2-header-height) + 32px + 0.75rem);
  }

  .cocobot-v2-header.is-menu-open .cocobot-v2-header__nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
  }

  .cocobot-v2-header__menu > li > a {
    display: block;
    width: 100%;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid rgb(80 83 109 / 9%);
    font-size: 0.85rem;
    text-align: center;
  }

  .cocobot-v2-header__menu > li:last-child > a {
    border-bottom: 0;
  }

  .cocobot-v2-header__menu .sub-menu {
    position: static;
    display: grid;
    min-width: 0;
    margin: 0 0 0.35rem 0.75rem;
    padding: 0 0 0 0.75rem;
    border: 0;
    border-left: 2px solid rgb(79 208 211 / 45%);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .cocobot-v2-header__menu .sub-menu a {
    padding-block: 0.55rem;
    font-size: 0.75rem;
  }

  .cocobot-v2-header__mobile-actions {
    display: grid;
    width: min(100%, 20rem);
    margin: 1.15rem auto 0;
    padding-top: 1.15rem;
    border-top: 1px solid rgb(80 83 109 / 12%);
    gap: 0.9rem;
  }

  .cocobot-v2-header__mobile-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.3rem 0.35rem 0.3rem 1.15rem;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-pill);
    color: #fff;
    background: var(--color-text);
    box-shadow: 0 0.8rem 1.8rem rgb(50 62 75 / 15%);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .cocobot-v2-header__mobile-login-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-accent);
    transition: transform 200ms var(--ease-out), background-color 200ms ease;
  }

  .cocobot-v2-header__mobile-login-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cocobot-v2-header__mobile-login:hover .cocobot-v2-header__mobile-login-icon,
  .cocobot-v2-header__mobile-login:focus-visible .cocobot-v2-header__mobile-login-icon {
    background: #fff;
    transform: translateX(0.12rem);
  }

  .cocobot-v2-header__language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.35rem 0.4rem 0.35rem 1.15rem;
    border: 1px solid rgb(80 83 109 / 14%);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 76%);
    gap: 0.75rem;
  }

  .cocobot-v2-header__language > span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .cocobot-v2-header__language ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.25rem;
  }

  .cocobot-v2-header__language li {
    margin: 0;
  }

  .cocobot-v2-header__language a {
    display: grid;
    min-width: 2.1rem;
    height: 2.1rem;
    padding-inline: 0.45rem;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .cocobot-v2-header__language a.is-current {
    color: var(--color-text);
    background: var(--color-accent);
  }

  .cocobot-v2-header__language a:hover,
  .cocobot-v2-header__language a:focus-visible {
    background: rgb(79 208 211 / 30%);
  }

  .cocobot-v2-footer {
    min-height: 0;
    padding-top: clamp(3.5rem, 7vw, 5rem);
  }

  .cocobot-v2-footer__inner {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(22rem, 1.1fr);
    gap: clamp(3rem, 7vw, 5rem);
  }

  .cocobot-v2-footer__side {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 42rem);
    text-align: center;
  }

  .cocobot-v2-footer__side .cocobot-v2-footer__widget,
  .cocobot-v2-footer__side .menu,
  .cocobot-v2-footer__side .wp-block-navigation__container {
    align-items: center;
  }

  .cocobot-v2-footer__side .cocobot-v2-footer__widget-title,
  .cocobot-v2-footer__side h2 {
    width: fit-content;
    margin-inline: auto;
  }

  .cocobot-v2-footer__wordmark {
    font-size: clamp(7rem, 15vw, 11.5rem);
  }
}

@media (max-width: 48rem) {
  body.cocobot-v2 {
    --cocobot-v2-header-height: 4rem;
  }

  .admin-bar .cocobot-v2-header {
    top: 46px;
  }

  .admin-bar .cocobot-v2-header__nav {
    top: calc(var(--cocobot-v2-header-height) + 46px + 0.75rem);
  }

  .cocobot-v2-header__brand img {
    width: 8rem;
  }

  .cocobot-v2-header__linkedin,
  .cocobot-v2-header__login {
    display: none;
  }

  .cocobot-v2-footer {
    display: block;
    padding: clamp(3.25rem, 12vw, 4.5rem) clamp(1rem, 5vw, 1.5rem) 1.5rem;
    text-align: center;
  }

  .cocobot-v2-footer::before {
    top: -7rem;
    width: 42rem;
    border-width: 3.5rem;
    box-shadow: 0 0 0 3.5rem rgb(255 255 255 / 5%);
  }

  .cocobot-v2-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.75rem, 10vw, 4rem);
  }

  .cocobot-v2-footer__brand,
  .cocobot-v2-footer__sitemap,
  .cocobot-v2-footer__side {
    justify-self: center;
    width: min(100%, 34rem);
  }

  .cocobot-v2-footer__brand::before {
    top: -1.2rem;
    left: 50%;
    width: 0.7rem;
    transform: translateX(-50%);
  }

  .cocobot-v2-footer__promise {
    font-size: clamp(2.65rem, 12vw, 4.2rem);
    line-height: 0.98;
  }

  .cocobot-v2-footer__linkedin {
    margin-top: 1.5rem;
  }

  .cocobot-v2-footer__sitemap .cocobot-v2-footer__widget-title,
  .cocobot-v2-footer__sitemap h2,
  .cocobot-v2-footer__side .cocobot-v2-footer__widget-title,
  .cocobot-v2-footer__side h2 {
    width: fit-content;
    margin-inline: auto;
  }

  .cocobot-v2-footer__sitemap .menu,
  .cocobot-v2-footer__sitemap .wp-block-navigation__container,
  .cocobot-v2-footer__side .menu,
  .cocobot-v2-footer__side .wp-block-navigation__container {
    justify-content: center;
  }

  .cocobot-v2-footer__side {
    grid-column: auto;
  }

  .cocobot-v2-footer__side .cocobot-v2-footer__widget,
  .cocobot-v2-footer__side .menu,
  .cocobot-v2-footer__side .wp-block-navigation__container {
    align-items: center;
  }

  .cocobot-v2-footer__lower {
    margin-top: clamp(4.5rem, 17vw, 7rem);
  }

  .cocobot-v2-footer__wordmark {
    width: 100%;
    font-size: clamp(4.45rem, 22vw, 8rem);
    line-height: 0.78;
    text-align: center;
  }

  .cocobot-v2-footer__legal {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 1.75rem;
    gap: 1.25rem;
  }

  .cocobot-v2-footer__bottom-widgets,
  .cocobot-v2-footer__bottom-widgets .cocobot-v2-footer__widget,
  .cocobot-v2-footer__bottom-widgets .menu,
  .cocobot-v2-footer__bottom-widgets .wp-block-navigation__container {
    justify-content: center;
    gap: 0.75rem 1.1rem;
  }
}

@media (max-width: 32rem) {
  .cocobot-v2-footer__sitemap .menu a,
  .cocobot-v2-footer__sitemap .wp-block-navigation-item__content {
    min-height: 2.1rem;
    padding: 0.48rem 0.78rem;
    font-size: 0.65rem;
  }

  .cocobot-v2-footer__wordmark {
    font-size: clamp(3.8rem, 21vw, 6.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cocobot-v2-header,
  .cocobot-v2-header__nav,
  .cocobot-v2-header__menu-toggle span {
    transition: none;
  }
}