:root {
      --ink: #0b0c0b;
      --ink-soft: #141614;
      --paper: #f4f1ea;
      --paper-dim: #b9b6ad;
      --mint: #5cf2a9;
      --citrus: #d8ff3e;
      --sky: #74d0ff;
      --rose: #ff8fb1;
      --accent: var(--mint);
      --accent-ink: var(--accent);
      --bg: var(--ink);
      --fg: var(--paper);
      --edge: clamp(1.25rem, 4vw, 4rem);
      --maxw: 1600px;
      --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
      --font-body: "Inter", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --dur: .8s
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    *::focus {
      border: green;
    }

    html {
      -webkit-text-size-adjust: 100%
    }

    body {
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
      line-height: 1.55;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      transition: background .9s var(--ease), color .9s var(--ease)
    }

    body.is-loading {
      overflow: hidden;
      height: 100vh
    }

    body.theme-ink {
      --bg: var(--ink);
      --fg: var(--paper)
    }

    body.theme-paper {
      --bg: var(--paper);
      --fg: var(--ink);
      --paper-dim: #6f6d64;
      /* variantes plus sombres des couleurs d'accent : sur le papier clair, les teintes
         néon d'origine (pensées pour le fond noir) sont presque invisibles */
      --accent-ink: #0a7d47
    }

    body.theme-paper .chapter[data-theme=mint] {
      --chap-ink: #0a7d47
    }

    body.theme-paper .chapter[data-theme=citrus] {
      --chap-ink: #6d7a00
    }

    body.theme-paper .chapter[data-theme=sky] {
      --chap-ink: #0c6f9c
    }

    body.theme-paper .chapter[data-theme=rose] {
      --chap-ink: #b03362
    }

    body.theme-paper .nav {
      color: var(--ink)
    }

    body.theme-paper .nav.is-scrolled {
      background: #f4f1eacc;
      border-bottom-color: rgba(11, 12, 11, .1)
    }

    body.theme-paper .lang {
      background: #ffffff8f;
      border-color: rgba(11, 12, 11, .14)
    }

    body.theme-paper .lang__opt {
      color: #0b0c0b8c
    }

    body.theme-paper .lang__opt:hover {
      color: #000
    }

    body.theme-paper .campaign {
      background: #eceadf;
      border-color: rgba(11, 12, 11, .1)
    }

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

    img {
      display: block;
      max-width: 100%
    }

    ul {
      list-style: none
    }

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

    ::selection {
      background: var(--accent);
      color: var(--ink)
    }

    .nav__brand,
    .nav__links,
    .dock,
    .lang,
    .btn,
    .section-eyebrow,
    .manifesto__eyebrow,
    .numbers__eyebrow,
    .hero__sys,
    .hero__hint,
    .hero__title,
    .chapter__num,
    .chapter__cue,
    .chapter__list li,
    .manifesto__meta,
    .stat__label,
    .cstat__lab,
    .tier__badge,
    .tier__price,
    .os-btn,
    .platforms__note,
    .ui,
    .field span,
    .form__note,
    .form__done,
    .foot__bottom,
    .loader__pct {
      font-family: var(--font-mono)
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important
      }
    }

    .grain {
      position: fixed;
      inset: -50%;
      z-index: 9999;
      pointer-events: none;
      opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation: grain .6s steps(1) infinite
    }

    /* Fond animé permanent (voir /bg-flow.js) : fixe à l'écran (ne défile
       pas avec le scroll), derrière tout le contenu normal — visible dans
       les zones qui n'ont pas leur propre fond opaque (hero, espaces entre
       sections…), masqué ailleurs par le fond plein des cartes/blocs.
       Opacité globale volontairement basse : discret, jamais envahissant. */
    #bgFlow {
      position: fixed;
      inset: 0;
      z-index: -1;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      opacity: .65
    }

    @media (prefers-reduced-motion: reduce) {
      #bgFlow {
        display: none
      }
    }

    @keyframes grain {

      0%,
      to {
        transform: translate(0)
      }

      20% {
        transform: translate(-3%, 2%)
      }

      40% {
        transform: translate(2%, -4%)
      }

      60% {
        transform: translate(-2%, 3%)
      }

      80% {
        transform: translate(3%, -1%)
      }
    }

    .cursor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9998;
      pointer-events: none;
      mix-blend-mode: difference
    }

    .cursor__dot,
    .cursor__ring {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%)
    }

    .cursor__dot {
      width: 7px;
      height: 7px;
      background: var(--paper)
    }

    .cursor__ring {
      width: 40px;
      height: 40px;
      border: 1px solid var(--paper);
      transition: width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease)
    }

    .cursor.is-hover .cursor__ring {
      width: 68px;
      height: 68px
    }

    .cursor.is-down .cursor__ring {
      width: 26px;
      height: 26px
    }

    .cursor__label {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, calc(-50% + 52px));
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--paper);
      white-space: nowrap;
      opacity: 0;
      transition: opacity .25s var(--ease)
    }

    .cursor.is-hover .cursor__label {
      opacity: 1
    }

    @media (hover: none),
    (pointer: coarse) {
      .cursor {
        display: none
      }

      /* "Bougez le curseur…", "Survolez…" : instructions pensées pour une
         souris, affichées telles quelles sur tactile où il n'y a ni
         curseur ni survol possible. */
      .chapter__cue {
        display: none
      }
    }

    .loader {
      position: fixed;
      inset: 0;
      z-index: 9990;
      background: var(--ink);
      display: grid;
      place-items: center
    }

    .loader__inner {
      width: min(78vw, 520px);
      text-align: left
    }

    .loader__mark {
      display: flex;
      align-items: baseline;
      gap: .4rem;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.4rem, 9vw, 5rem);
      line-height: 1;
      color: var(--paper)
    }

    .loader__cross {
      color: var(--accent-ink)
    }

    .loader__bar {
      margin-top: 1.4rem;
      height: 2px;
      width: 100%;
      background: #f4f1ea2e;
      overflow: hidden
    }

    .loader__fill {
      display: block;
      height: 100%;
      width: 0%;
      background: var(--accent)
    }

    .loader__pct {
      margin-top: .7rem;
      font-size: .8rem;
      letter-spacing: .14em;
      color: var(--paper-dim);
      font-variant-numeric: tabular-nums
    }

    body:not(.is-loading) .loader {
      display: none
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 200;
      background: transparent
    }

    .progress__fill {
      display: block;
      height: 100%;
      width: 0%;
      background: var(--accent);
      transform-origin: 0 50%
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 150;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.1rem var(--edge);
      color: var(--paper);
      transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
      border-bottom: 1px solid transparent
    }

    .nav.is-scrolled {
      padding-top: .7rem;
      padding-bottom: .7rem;
      background: #0b0c0bb8;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom-color: #f4f1ea1a
    }

    .nav:not(.is-scrolled) .nav__brand,
    .nav:not(.is-scrolled) .nav__links,
    .nav:not(.is-scrolled) .btn--pill {
      mix-blend-mode: difference
    }

    .nav__brand {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: .02em;

      display: inline-flex;
      align-items: center;
      gap: .4rem
    }

    .nav__cross {
      color: var(--accent-ink)
    }

    .nav__links {
      display: flex;
      gap: 1.6rem;
      font-size: .76rem;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .nav__links a {
      position: relative;
      padding-bottom: 3px
    }

    .nav__links a:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: 100% 50%;
      transition: transform .4s var(--ease)
    }

    .nav__links a:hover:after {
      transform: scaleX(1);
      transform-origin: 0 50%
    }

    /* Mesuré : la largeur intrinsèque du contenu de la nav (liens + thème +
       langue + CTA) ne descend plus sous ~936px — en dessous de ~950px, ça
       commence déjà à déborder avant même ce point de rupture. On bascule
       donc sur le burger avec de la marge, à 1024px. */
    @media (max-width: 1024px) {
      .nav__links {
        display: none
      }

      /* Dès que le burger prend le relais, le CTA "Accès à Charly" migre
         dans son panneau (voir .nav__menu-cta, déjà présent dedans) au lieu
         de rester affiché en double dans la barre du haut. */
      .nav__right>.btn--pill {
        display: none
      }
    }

    .nav__right {
      display: flex;
      align-items: center;
      gap: .9rem
    }

    .themebtn {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(244, 241, 234, .16);
      background: #0a0b0a8c;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #f4f1eab0;
      transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease)
    }

    .themebtn:hover {
      color: #fff;
      border-color: rgba(244, 241, 234, .42)
    }

    .themebtn__i {
      grid-area: 1 / 1;
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .themebtn__moon {
      fill: currentColor;
      stroke: none
    }

    .themebtn__sun {
      display: none
    }

    body.theme-paper .themebtn {
      border-color: rgba(11, 12, 11, .18);
      background: #ffffff8c;
      color: #0b0c0bb0
    }

    body.theme-paper .themebtn:hover {
      color: #000;
      border-color: rgba(11, 12, 11, .42)
    }

    body.theme-paper .themebtn__moon {
      display: none
    }

    body.theme-paper .themebtn__sun {
      display: block
    }

    /* Voix off : lecture / pause (voir /bg-flow.js). Même gabarit que le
       bouton de thème ; l'icône affichée dit ce qui se passe au clic
       suivant (▶ quand c'est en pause, ❚❚ quand ça joue). */
    .audiobtn {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(244, 241, 234, .16);
      background: #0a0b0a8c;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #f4f1eab0;
      transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease)
    }

    .audiobtn:hover {
      color: #fff;
      border-color: rgba(244, 241, 234, .42)
    }

    .audiobtn.needs-tap {
      border-color: var(--accent);
      animation: audiobtnTap 1.1s ease-in-out infinite
    }

    @keyframes audiobtnTap {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(92, 242, 169, .4)
      }

      50% {
        box-shadow: 0 0 0 6px rgba(92, 242, 169, 0)
      }
    }

    .audiobtn__i {
      grid-area: 1 / 1;
      width: 14px;
      height: 14px;
      fill: currentColor
    }

    .audiobtn__pause {
      display: none
    }

    .audiobtn.is-playing .audiobtn__play {
      display: none
    }

    .audiobtn.is-playing .audiobtn__pause {
      display: block
    }

    body.theme-paper .audiobtn {
      border-color: rgba(11, 12, 11, .18);
      background: #ffffff8c;
      color: #0b0c0bb0
    }

    body.theme-paper .audiobtn:hover {
      color: #000;
      border-color: rgba(11, 12, 11, .42)
    }

    /* Burger : masqué par défaut, affiché uniquement quand .nav__links
       n'a plus la place (voir media query 1024px plus bas), pour ne pas
       perdre l'accès aux liens de section sur tablette / petit desktop. */
    .nav__burger {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(244, 241, 234, .16);
      background: #0a0b0a8c;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #f4f1eab0;
      transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease)
    }

    .nav__burger:hover {
      color: #fff;
      border-color: rgba(244, 241, 234, .42)
    }

    .nav__burger-bar {
      display: block;
      width: 14px;
      height: 1.5px;
      background: currentColor;
      border-radius: 2px;
      transition: transform .35s var(--ease), opacity .35s var(--ease)
    }

    .nav__burger.is-active .nav__burger-bar:nth-child(1) {
      transform: translateY(5.5px) rotate(45deg)
    }

    .nav__burger.is-active .nav__burger-bar:nth-child(2) {
      opacity: 0
    }

    .nav__burger.is-active .nav__burger-bar:nth-child(3) {
      transform: translateY(-5.5px) rotate(-45deg)
    }

    body.theme-paper .nav__burger {
      border-color: rgba(11, 12, 11, .18);
      background: #ffffff8c;
      color: #0b0c0bb0
    }

    body.theme-paper .nav__burger:hover {
      color: #000;
      border-color: rgba(11, 12, 11, .42)
    }

    /* Doit rester APRÈS la règle de base .nav__burger{display:none} pour
       gagner sur la cascade (même sélecteur, même spécificité). Même seuil
       que .nav__links ci-dessus (1024px). */
    @media (max-width: 1024px) {
      .nav__burger {
        display: inline-flex
      }
    }

    /* Panneau du menu burger (liens de section + CTA), affiché uniquement
       ≤1024px en même temps que le burger. */
    .nav__menu {
      position: fixed;
      inset: 0;
      z-index: 140;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.2rem;
      padding: 6rem var(--edge) 3rem;
      background: color-mix(in srgb, var(--bg) 96%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: var(--fg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-12px);
      transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s
    }

    .nav__menu.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .4s var(--ease), transform .4s var(--ease)
    }

    .nav__menu-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 6vw, 2.4rem);
      font-weight: 600;
      text-align: center
    }

    .nav__menu-links a {
      position: relative;
      opacity: .82;
      transition: opacity .3s var(--ease)
    }

    .nav__menu-links a:hover,
    .nav__menu-links a:focus-visible {
      opacity: 1
    }

    .nav__menu-cta {
      margin-top: .4rem
    }

    body.nav-menu-open {
      overflow: hidden
    }

    @media (min-width: 1025px) {
      .nav__menu {
        display: none
      }
    }

    .lang {
      position: relative;
      display: inline-flex;
      align-items: stretch;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid rgba(244, 241, 234, .16);
      background: #0a0b0a8c;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }

    .lang__ind {
      position: absolute;
      z-index: 1;
      top: 3px;
      bottom: 3px;
      left: 0;
      width: 0;
      border-radius: 999px;
      background: var(--accent);
      transition: transform .45s var(--ease), width .45s var(--ease)
    }

    .lang__opt {
      position: relative;
      z-index: 2;
      padding: .42rem .6rem;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .16em;
      color: #f4f1ea8c;
      border-radius: 999px;
      transition: color .35s var(--ease)
    }

    .lang__opt:hover {
      color: #fff
    }

    .lang__opt.is-active {
      color: var(--ink)
    }

    @media (max-width: 520px) {
      .lang__opt {
        padding: .4rem .5rem;
        letter-spacing: .1em
      }
    }

    /* En dessous de ~480px, "+ Charly" + thème + langue + "Demander une
       démo" ne tiennent plus sur une ligne : le bouton dépassait du
       viewport (texte coupé net à droite). On resserre tout. */
    @media (max-width: 480px) {
      .nav {
        gap: .6rem
      }

      .nav__right {
        gap: .5rem
      }

      .themebtn {
        width: 30px;
        height: 30px
      }

      .btn--pill {
        --pad-x: .8rem;
        --pad-y: .65rem;
        font-size: .68rem;
        letter-spacing: .06em
      }
    }

    /* Sous 400px, le sélecteur de langue reste visible (demande explicite) :
       on le compacte au lieu de le cacher, et on retire le CTA texte de la
       barre (il reste joignable dans le panneau burger juste à côté). */
    @media (max-width: 400px) {
      .nav__brand {
        font-size: .95rem
      }

      .lang__opt {
        padding: .32rem .4rem;
        font-size: .62rem;
        letter-spacing: .04em
      }

      .nav__right .btn--pill {
        display: none
      }
    }

    .btn {
      --pad-y: .85rem;
      --pad-x: 1.5rem;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--pad-y) var(--pad-x);
      font-size: .82rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      border-radius: 999px;
      overflow: hidden;
      will-change: transform;
      transition: color .4s var(--ease), border-color .4s var(--ease)
    }

    .btn span {
      position: relative;
      z-index: 2
    }

    .btn:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: var(--accent);
      transform: translateY(101%);
      transition: transform .5s var(--ease)
    }

    .btn:hover:before {
      transform: translateY(0)
    }

    .btn--solid {
      background: var(--accent);
      color: var(--ink)
    }

    .btn--solid:before {
      background: var(--fg)
    }

    .btn--solid:hover {
      color: var(--bg)
    }

    .btn--ghost {
      border: 1px solid currentColor
    }

    .btn--ghost:hover {
      color: var(--ink)
    }

    .btn--pill {
      border: 1px solid currentColor
    }

    .btn--pill:hover {
      color: var(--ink)
    }

    .btn--block {
      width: 100%;
      margin-top: .5rem;
      --pad-y: 1.15rem
    }

    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 var(--edge) clamp(2rem, 5vh, 4rem);
      overflow: hidden
    }

    .hero__inner {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto
    }

    @media (min-width: 1101px) {
      .hero__inner {
        padding-left: 2.4rem
      }
    }

    .hero__sys {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--font-mono);
      font-size: .8rem;
      letter-spacing: .06em;
      color: var(--accent-ink);
      margin-bottom: clamp(1.5rem, 5vh, 2.8rem)
    }

    .hero__sys-dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      animation: blink 1.1s steps(1) infinite
    }

    .hero__titlewrap {
      position: relative;
      width: 100%
    }

    .hero__title {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: clamp(1.6rem, 4.2vw, 3.6rem);
      line-height: 1.15;
      letter-spacing: -.01em;
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1px var(--fg);
      max-width: 22ch
    }

    .hero__title .ln {
      display: block
    }

    .hero__title .ln:not(:last-child):after {
      content: " —";
      -webkit-text-stroke: 0;
      color: var(--accent-ink)
    }

    .hero__title--fill {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      color: var(--fg);
      -webkit-text-stroke: 0;
      --fill-d: 340;
      -webkit-mask: radial-gradient(circle, #000 36%, transparent 72%) -1200px -1200px / 340px 340px no-repeat;
      mask: radial-gradient(circle, #000 36%, transparent 72%) -1200px -1200px / 340px 340px no-repeat
    }

    .hero__title--fill .ln:not(:last-child):after {
      color: var(--fg)
    }

    @media (max-width: 900px) {
      .hero__title--fill {
        --fill-d: 260px
      }
    }

    @media (hover: none),
    (pointer: coarse) {
      .hero__title {
        color: var(--fg)
      }

      .hero__title--fill {
        display: none
      }
    }

    .hero__caret {
      display: block;
      margin-top: .9rem;
      width: .8rem;
      height: .8rem;
      background: var(--accent);
      animation: blink 1.1s steps(1) infinite
    }

    @keyframes blink {

      0%,
      49% {
        opacity: 1
      }

      50%,
      to {
        opacity: 0
      }
    }

    .line--outline {
      -webkit-text-stroke: 1.5px var(--fg);
      color: transparent
    }

    .hero__title,
    .chapter__title,
    .platforms__title,
    .campaign__title,
    .voices__title,
    .cta__title {
      overflow-wrap: normal;
      word-break: keep-all;
      hyphens: none
    }

    .char {
      display: inline-block
    }

    .word {
      display: inline-block;
      white-space: nowrap
    }

    .hero__foot {
      margin-top: clamp(2rem, 6vh, 3.5rem);
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem
    }

    .hero__lede {
      max-width: 34ch;
      color: var(--paper-dim);
      font-size: clamp(1rem, 1.4vw, 1.25rem)
    }

    .hero__cta {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap
    }

    .hero__hint {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 1.2rem;
      transform: translate(-50%);
      display: flex;
      align-items: center;
      gap: .7rem;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--paper-dim)
    }

    .hero__hint-arrow {
      animation: bob 1.6s var(--ease) infinite
    }

    @keyframes bob {

      0%,
      to {
        transform: translateY(0)
      }

      50% {
        transform: translateY(6px)
      }
    }

    @media (max-width: 620px) {
      .hero__hint span:first-child {
        display: none
      }
    }

    /* ============ FLORILÈGE DES FONCTIONNALITÉS ============
       Section fixe (pas de scroll snap particulier), qui affiche en boucle
       un titre de groupe puis chaque module, un par un (voir
       /features-ticker.js). Fondu croisé simple entre deux diapositives. */
    .feats {
      position: relative;
      min-height: 40vh;
      padding: clamp(4rem, 9vh, 6rem) var(--edge);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
      overflow: hidden
    }

    .feats__inner {
      max-width: 46rem;
      opacity: 1;
      transition: opacity .26s var(--ease)
    }

    .feats__inner.is-fading {
      opacity: 0
    }

    .feats__title {
      display: none;
      font-family: var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      line-height: 1.15;
      font-size: clamp(1.6rem, 4.2vw, 2.6rem)
    }

    .feats__inner.is-title .feats__title {
      display: block
    }

    .feats__item {
      display: block
    }

    .feats__inner.is-title .feats__item {
      display: none
    }

    .feats__name {
      font-family: var(--font-mono);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: clamp(1.05rem, 2.2vw, 1.4rem);
      color: var(--accent-ink);
      margin-bottom: .6rem
    }

    .feats__desc {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--paper-dim)
    }

    @media (prefers-reduced-motion: reduce) {
      .feats__inner {
        transition: none
      }
    }

    .manifesto {
      padding: clamp(7rem, 20vh, 16rem) var(--edge);
      max-width: var(--maxw);
      margin: 0 auto
    }

    .manifesto__eyebrow,
    .numbers__eyebrow,
    .section-eyebrow {
      font-size: .78rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-ink);
      margin-bottom: 2rem
    }

    .manifesto__text {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(1.6rem, 4.6vw, 4rem);
      line-height: 1.12;
      letter-spacing: -.02em;
      max-width: 20ch
    }

    .manifesto__text .word {
      display: inline-block;
      opacity: .2;
      transition: opacity .4s var(--ease)
    }

    .manifesto__meta {
      margin-top: clamp(3rem, 8vh, 5rem);
      display: flex;
      flex-wrap: wrap;
      gap: 2rem 4rem;
      font-size: .85rem;
      letter-spacing: .05em;
      color: var(--paper-dim)
    }

    /* Chapitres : slider dynamique (flèches, points, glisser au doigt/
       souris) piloté par /chapters-slider.js, qui neutralise après coup le
       scroll-jacking GSAP posé par site.js (voir le commentaire en tête de
       ce script). Un seul mécanisme, identique sur mobile et desktop —
       l'ancienne bascule "colonne + scroll natif" en tactile n'a donc plus
       lieu d'être. */
    .chapters {
      position: relative;
      overflow: hidden
    }

    .chapters__track {
      display: flex;
      flex-direction: row !important;
      touch-action: pan-y;
      cursor: grab;
      transition: transform .6s var(--ease)
    }

    .chapters__track.is-dragging {
      cursor: grabbing;
      transition: none
    }

    .chapter {
      position: relative;
      flex: 0 0 100% !important;
      min-height: 100svh;
      padding: clamp(6rem, 16vh, 10rem) var(--edge) 6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      --chap: var(--mint);
      --chap-ink: var(--chap)
    }

    .chapter[data-theme=mint] {
      --chap: var(--mint)
    }

    .chapter[data-theme=citrus] {
      --chap: var(--citrus)
    }

    .chapter[data-theme=sky] {
      --chap: var(--sky)
    }

    .chapter[data-theme=rose] {
      --chap: var(--rose)
    }

    .chapter__spot {
      position: absolute;
      width: 46vmax;
      height: 46vmax;
      left: var(--mx, 50%);
      top: var(--my, 50%);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, var(--chap) 0%, transparent 62%);
      opacity: .16;
      filter: blur(20px);
      pointer-events: none;
      transition: opacity .5s var(--ease)
    }

    .chapter__body {
      position: relative;
      z-index: 3;
      max-width: 58rem;
      margin: 0 auto;
      text-align: center;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s
    }

    .chapter.is-active .chapter__body {
      opacity: 1;
      transform: none
    }

    .chapter__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 6.5vw, 5.5rem);
      line-height: .98;
      letter-spacing: -.02em;
      margin-bottom: 1.4rem
    }

    .chapter__title .char {
      display: inline-block
    }

    .chapter__desc {
      max-width: 58ch;
      margin: 0 auto 1.8rem;
      color: var(--paper-dim);
      font-size: clamp(1rem, 1.3vw, 1.2rem)
    }

    .chapter__list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .55rem;
      margin-bottom: 2.2rem
    }

    .chapter__list li {
      position: relative;
      padding-left: 1.5rem;
      font-size: .95rem;
      color: var(--fg)
    }

    .chapter__list li:before {
      content: "+";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--chap-ink);
      font-family: var(--font-display);
      font-weight: 700
    }

    .chapter__cue {
      font-size: .75rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--chap-ink)
    }

    .chapters__nav {
      position: absolute;
      z-index: 4;
      left: 0;
      right: 0;
      bottom: clamp(1.5rem, 5vh, 3rem);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.4rem
    }

    .chapters__arrow {
      display: inline-grid;
      place-items: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
      color: var(--fg);
      transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease)
    }

    .chapters__arrow:hover {
      border-color: var(--accent-ink);
      color: var(--ink);
      background: var(--accent-ink);
      transform: scale(1.06)
    }

    .chapters__arrow svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .chapters__dots {
      display: flex;
      align-items: center;
      gap: .55rem
    }

    .chapters__dot {
      width: .5rem;
      height: .5rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--fg) 30%, transparent);
      transition: width .35s var(--ease), background .35s var(--ease)
    }

    .chapters__dot:hover {
      background: color-mix(in srgb, var(--fg) 55%, transparent)
    }

    .chapters__dot.is-active {
      width: 1.6rem;
      background: var(--accent-ink)
    }

    @media (max-width: 640px) {
      .chapters__nav {
        gap: 1rem
      }

      .chapters__arrow {
        width: 2.4rem;
        height: 2.4rem
      }
    }

    .marquee {
      padding: clamp(2.5rem, 7vh, 5rem) 0;
      border-top: 1px solid rgba(244, 241, 234, .14);
      border-bottom: 1px solid rgba(244, 241, 234, .14);
      overflow: hidden
    }

    .marquee__row {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      white-space: nowrap;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2rem, 7vw, 6rem);
      letter-spacing: -.02em;
      will-change: transform
    }

    .marquee__sep {
      color: var(--accent-ink)
    }

    .numbers {
      padding: clamp(6rem, 16vh, 12rem) var(--edge);
      max-width: var(--maxw);
      margin: 0 auto
    }

    .numbers__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem
    }

    @media (max-width: 900px) {
      .numbers__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem
      }
    }

    @media (max-width: 520px) {
      .numbers__grid {
        grid-template-columns: 1fr
      }
    }

    .stat {
      border-top: 1px solid rgba(244, 241, 234, .2);
      padding-top: 1.2rem
    }

    .stat__value {
      display: block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3rem, 8vw, 6rem);
      line-height: 1;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums
    }

    .stat__label {
      display: block;
      margin-top: .7rem;
      color: var(--paper-dim);
      font-size: .9rem;
      max-width: 24ch
    }

    .voices {
      padding: clamp(6rem, 14vh, 11rem) var(--edge);
      max-width: var(--maxw);
      margin: 0 auto
    }

    .voices__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.4rem, 8vw, 6.5rem);
      line-height: .98;
      letter-spacing: -.02em;
      margin-bottom: clamp(3rem, 8vh, 5rem)
    }

    .voices__title .char {
      display: inline-block
    }

    .voices__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem
    }

    @media (max-width: 900px) {
      .voices__grid {
        grid-template-columns: 1fr
      }
    }

    .voice {
      border: 1px solid rgba(244, 241, 234, .16);
      border-radius: 14px;
      padding: 2rem 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 2.5rem;
      min-height: 320px;
      transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease)
    }

    .voice:hover {
      transform: translateY(-8px);
      background: #f4f1ea08;
      border-color: var(--accent-ink)
    }

    .voice blockquote {
      font-size: clamp(1.05rem, 1.5vw, 1.3rem);
      line-height: 1.35
    }

    .voice figcaption {
      display: flex;
      flex-direction: column;
      gap: .2rem
    }

    .voice figcaption strong {
      font-weight: 600
    }

    .voice figcaption span {
      color: var(--paper-dim);
      font-size: .85rem
    }

    .cta {
      position: relative;
      padding: clamp(7rem, 18vh, 14rem) var(--edge);
      background: var(--bg);
      color: var(--fg);
      overflow: hidden
    }

    .cta:before {
      content: "";
      position: absolute;
      width: 60vmax;
      height: 60vmax;
      right: -20vmax;
      top: -25vmax;
      background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
      opacity: .14;
      filter: blur(20px);
      pointer-events: none
    }

    .cta__inner {
      position: relative;
      max-width: 60rem;
      margin: 0 auto
    }

    .cta__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3.2rem, 14vw, 11rem);
      line-height: .9;
      letter-spacing: -.03em
    }

    .cta__title .line {
      display: block;
      overflow: hidden
    }

    .cta__title .line>span {
      display: block
    }

    .cta .line--outline {
      -webkit-text-stroke: 1.5px var(--accent-ink);
      color: transparent
    }

    .cta__lede {
      margin-top: 1.6rem;
      max-width: 44ch;
      font-size: clamp(1rem, 1.4vw, 1.2rem);
      color: var(--paper-dim)
    }

    .form {
      position: relative;
      margin-top: clamp(2.5rem, 6vh, 4rem);
      width: 100%;
      padding: clamp(1.8rem, 4vw, 2.6rem);
      border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
      border-radius: 4px;
      background: color-mix(in srgb, var(--fg) 3%, transparent);
      backdrop-filter: blur(6px);
      transition: border-color .4s var(--ease)
    }

    .form:has(input:focus) {
      border-color: color-mix(in srgb, var(--accent) 45%, transparent)
    }

    .form__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
      margin-bottom: 1.4rem
    }

    @media (max-width: 640px) {
      .form__row {
        grid-template-columns: 1fr
      }
    }

    .field {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: .5rem
    }

    .field span {
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--paper-dim);
      transition: color .3s var(--ease)
    }

    .field:has(input:focus) span {
      color: var(--accent-ink)
    }

    .field input {
      background: transparent;
      border: 0;
      padding: .5rem 0 .6rem;
      font: inherit;
      color: var(--fg);
      outline: none
    }

    .field input::placeholder {
      color: color-mix(in srgb, var(--fg) 32%, transparent)
    }

    .field:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5px;
      background: color-mix(in srgb, var(--fg) 22%, transparent);
      transform-origin: 50%;
      transition: background .3s var(--ease)
    }

    .field:before {
      content: "";
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: 0;
      height: 1.5px;
      background: var(--accent);
      transition: left .4s var(--ease), right .4s var(--ease);
      z-index: 1
    }

    .field:has(input:focus):before {
      left: 0;
      right: 0
    }

    .field:has(input:required:invalid:not(:placeholder-shown)):not(:has(input:focus)):after {
      background: color-mix(in srgb, #ff6b6b 55%, transparent)
    }

    .form__note {
      margin-top: 1.4rem;
      font-size: .78rem;
      color: var(--paper-dim)
    }

    .form__done:not([hidden]) {
      margin-top: 1.4rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: .6rem
    }

    .form__done:before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4em;
      height: 1.4em;
      border-radius: 50%;
      background: var(--accent);
      color: var(--ink);
      font-size: .8rem;
      flex-shrink: 0
    }

    .btn--block {
      position: relative
    }

    .btn--block span:after {
      content: "→";
      display: inline-block;
      margin-left: .5em;
      transform: translateX(-4px);
      opacity: 0;
      transition: transform .3s var(--ease), opacity .3s var(--ease)
    }

    .btn--block:hover span:after {
      transform: translateX(0);
      opacity: 1
    }

    .foot {
      padding: clamp(4rem, 10vh, 7rem) var(--edge) 2.5rem
    }

    .foot__top {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.5rem;
      padding-bottom: clamp(3rem, 8vh, 5rem);
      border-bottom: 1px solid rgba(244, 241, 234, .16)
    }

    .foot__brand {
      font-family: var(--font-mono);
      text-transform: uppercase;
      font-weight: 700;
      font-size: clamp(2.5rem, 10vw, 7rem);
      letter-spacing: -.02em
    }

    .foot__claim {
      color: var(--paper-dim);
      max-width: 24ch;
      text-align: right
    }

    /* L'alignement à droite n'a de sens que quand la phrase tient face à
       "+ Charly" sur une même ligne (justify-content: space-between). Une
       fois que .foot__top passe à la ligne (mobile), elle se retrouve
       seule sur toute la largeur, alignée à droite avec un retour à la
       ligne au milieu — ça donne l'impression d'un texte cassé/décalé. */
    @media (max-width: 640px) {
      .foot__claim {
        text-align: left
      }
    }

    .foot__bottom {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 3rem;
      font-size: .8rem;
      color: var(--paper-dim);
      letter-spacing: .03em
    }

    .solutions {
      position: relative;
      padding: clamp(6rem, 16vh, 10rem) var(--edge);
      max-width: var(--maxw);
      margin: 0 auto
    }

    /* Fond légèrement dynamique (écho du champ de particules du hero, en
       beaucoup plus discret : une simple grille de points statique en CSS,
       sans canvas ni animation, qui s'estompe vers les bords). */
    .solutions:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent) 1px, transparent 1.4px);
      background-size: 26px 26px;
      opacity: .3;
      -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000 0%, transparent 72%);
      mask-image: radial-gradient(ellipse 60% 50% at 50% 20%, #000 0%, transparent 72%)
    }

    .solutions__head {
      position: relative;
      z-index: 1;
      max-width: 60ch;
      margin-bottom: clamp(3rem, 7vh, 5rem)
    }

    .solutions__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      line-height: 1;
      letter-spacing: -.02em
    }

    .solutions__sub {
      margin-top: 1.2rem;
      color: var(--paper-dim);
      font-size: 1.05rem;
      max-width: 46ch
    }

    .solutions__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: clamp(.7rem, 2vw, 1.7rem) clamp(1rem, 3vw, 3.5rem);
      position: relative;
      z-index: 1;
      padding: 1.25rem 0
    }

    .solutions__grid::before {
      content: "";
      position: absolute;
      inset: 0 50% 0 auto;
      width: 1px;
      background: color-mix(in srgb, var(--fg) 15%, transparent);
      transform: rotate(7deg);
      transform-origin: center
    }

    .solutions__card {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 1rem;
      row-gap: .35rem;
      min-height: 11.5rem;
      padding: 1.5rem clamp(1.3rem, 3vw, 2.5rem) 1.55rem;
      border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
      border-radius: 10px;
      background: var(--bg);
      color: inherit;
      text-decoration: none;
      isolation: isolate;
      overflow: hidden;
      transition: transform .55s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .55s var(--ease)
    }

    .solutions__card:nth-child(2n) {
      margin-top: clamp(2.5rem, 8vw, 7.5rem);
      border-radius: 10px
    }

    .solutions__card::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 8.5rem;
      aspect-ratio: 1;
      right: -2.5rem;
      bottom: -5rem;
      border-radius: 50%;
      background: var(--accent);
      opacity: .14;
      transform: scale(.55);
      transition: transform .65s var(--ease), opacity .5s var(--ease)
    }

    .solutions__card:hover,
    .solutions__card:focus-visible {
      color: var(--fg);
      border-color: var(--accent-ink);
      box-shadow: 0 1.1rem 2.5rem color-mix(in srgb, var(--fg) 12%, transparent);
      transform: translateY(-.45rem) rotate(-.65deg);
      outline: none
    }

    .solutions__card:nth-child(2n):hover,
    .solutions__card:nth-child(2n):focus-visible {
      transform: translateY(-.45rem) rotate(.65deg)
    }

    .solutions__card:hover::before,
    .solutions__card:focus-visible::before {
      opacity: .3;
      transform: scale(1.35)
    }

    .solutions__num {
      font-family: var(--font-mono);
      font-size: .75rem;
      letter-spacing: .1em;
      color: var(--accent-ink);
      width: 100%
    }

    .solutions__name {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2.1vw, 1.65rem);
      font-weight: 600;
      line-height: 1.05;
      max-width: 17ch
    }

    .solutions__desc {
      font-size: .88rem;
      line-height: 1.5;
      color: var(--paper-dim);
      max-width: 29ch;
      margin-top: .25rem
    }

    .solutions__count {
      margin-top: .7rem;
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--paper-dim);
      transition: color .35s var(--ease)
    }

    .solutions__arrow {
      display: grid;
      place-items: center;
      width: 2.75rem;
      aspect-ratio: 1;
      margin: .55rem 0 0 auto;
      border: 1px solid currentColor;
      border-radius: 50%;
      color: var(--accent-ink);
      font-size: 1.1rem;
      transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease)
    }

    .solutions__card:hover .solutions__arrow,
    .solutions__card:focus-visible .solutions__arrow {
      background: var(--accent-ink);
      color: var(--bg);
      transform: translateX(.3rem) rotate(-28deg)
    }

    .solutions__card:hover .solutions__count,
    .solutions__card:focus-visible .solutions__count {
      color: var(--fg)
    }

    @media (max-width: 720px) {
      .solutions__grid {
        grid-template-columns: 1fr;
        gap: .85rem
      }

      .solutions__grid::before { display: none }

      .solutions__card,
      .solutions__card:nth-child(2n) {
        min-height: 0;
        margin-top: 0;
        border-radius: 10px
      }

      .solutions__name { max-width: 14ch }
    }

    .platforms {
      padding: clamp(6rem, 16vh, 12rem) 0;
      overflow: hidden
    }

    .platforms__head {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--edge)
    }

    .platforms__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      line-height: 1;
      letter-spacing: -.02em;
      max-width: 16ch
    }

    .platforms__title .char,
    .campaign__title .char {
      display: inline-block
    }

    .platforms__note {
      text-align: center;
      margin-top: 1.1rem;
      font-size: .76rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--paper-dim)
    }

    .platforms__stage {
      display: grid;
      place-items: center;
      padding: clamp(2.5rem, 7vh, 5rem) var(--edge) 1rem;
      perspective: 1200px
    }

    .device {
      transform-style: preserve-3d;
      will-change: transform
    }

    .device__frame {
      position: relative;
      background: linear-gradient(155deg, #121412 0%, #07080700 40%, #060706 100%), #0a0b0a;
      border: 1px solid rgba(244, 241, 234, .16);
      box-shadow: 0 50px 130px -30px #000000bf, inset 0 0 0 1px #f4f1ea0a, inset 0 1px 0 #ffffff14;
      overflow: hidden;
      transition: width .75s var(--ease), height .75s var(--ease), border-radius .75s var(--ease)
    }

    [data-os=ios] .device__frame {
      width: min(300px, 80vw);
      height: min(620px, 166vw);
      border-radius: 46px
    }

    [data-os=android] .device__frame {
      width: min(288px, 78vw);
      height: min(624px, 170vw);
      border-radius: 30px
    }

    [data-os=macos] .device__frame {
      width: min(720px, 92vw);
      height: min(452px, 58vw);
      border-radius: 20px
    }

    [data-os=windows] .device__frame {
      width: min(860px, 94vw);
      height: min(524px, 62vw);
      border-radius: 10px
    }

    .device__screen {
      position: absolute;
      inset: 9px;
      border-radius: inherit;
      overflow: hidden;
      background: var(--ink-soft)
    }

    [data-os=windows] .device__screen {
      inset: 6px
    }

    /* reflet de verre — un léger glacis diagonal pour casser le côté "aplat" */
    .device__glare {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      background: linear-gradient(115deg, #ffffff10 0%, transparent 22%, transparent 78%, #ffffff08 100%)
    }

    .device__notch {
      position: absolute;
      z-index: 6;
      top: 10px;
      left: 50%;
      transform: translate(-50%);
      width: 86px;
      height: 24px;
      background: #000;
      border-radius: 20px;
      box-shadow: inset 0 0 0 1px #ffffff0f;
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    [data-os=ios] .device__notch {
      opacity: 1
    }

    /* caméra perforée (Android) / webcam (macOS) */
    .device__cam {
      position: absolute;
      z-index: 6;
      top: 13px;
      left: 50%;
      transform: translateX(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #333c36, #050605 72%);
      box-shadow: 0 0 0 1px #ffffff12;
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    [data-os=android] .device__cam {
      opacity: 1
    }

    [data-os=macos] .device__cam {
      opacity: .85;
      top: 5px;
      width: 6px;
      height: 6px
    }

    /* boutons latéraux (volume / alimentation) des mobiles */
    .device__side {
      position: absolute;
      z-index: 2;
      background: linear-gradient(180deg, #2c2e2c, #121412);
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    .device__side--power {
      right: -2px;
      top: 130px;
      width: 3px;
      height: 56px;
      border-radius: 0 3px 3px 0
    }

    .device__side--vol {
      left: -2px;
      top: 100px;
      width: 3px;
      height: 68px;
      border-radius: 3px 0 0 3px
    }

    [data-os=ios] .device__side--power,
    [data-os=ios] .device__side--vol,
    [data-os=android] .device__side--power,
    [data-os=android] .device__side--vol {
      opacity: 1
    }

    [data-os=android] .device__side--power {
      top: 152px;
      height: 44px
    }

    [data-os=android] .device__side--vol {
      top: 96px;
      height: 50px
    }

    /* barre de geste en bas d'écran (iOS / Android) */
    .device__home {
      position: absolute;
      z-index: 6;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      border-radius: 3px;
      background: #f4f1ea;
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    [data-os=ios] .device__home,
    [data-os=android] .device__home {
      opacity: .5
    }

    [data-os=android] .device__home {
      width: 84px
    }

    .device__dots {
      position: absolute;
      z-index: 6;
      top: 16px;
      display: flex;
      gap: 7px;
      opacity: 0;
      transition: opacity .4s var(--ease)
    }

    .device__dots i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #f4f1ea73
    }

    [data-os=macos] .device__dots {
      opacity: 1;
      left: 18px
    }

    [data-os=macos] .device__dots i:nth-child(1) {
      background: #ff5f57
    }

    [data-os=macos] .device__dots i:nth-child(2) {
      background: #febc2e
    }

    [data-os=macos] .device__dots i:nth-child(3) {
      background: #28c840
    }

    [data-os=windows] .device__dots {
      opacity: 1;
      right: 16px
    }

    [data-os=windows] .device__dots i {
      border-radius: 2px
    }

    .ui {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      color: var(--paper);
      font-family: var(--font-mono);
      font-size: 10.5px;
      line-height: 1.4
    }

    .ui__bar {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .7rem .9rem;
      border-bottom: 1px solid rgba(244, 241, 234, .1)
    }

    [data-os=ios] .ui__bar {
      padding-top: 1.7rem
    }

    [data-os=android] .ui__bar {
      padding-top: 1.15rem
    }

    [data-os=macos] .ui__bar {
      padding-left: 4.5rem
    }

    [data-os=windows] .ui__bar {
      padding-right: 4.5rem
    }

    .ui__logo {
      font-weight: 700;
      white-space: nowrap
    }

    .ui__search {
      flex: 1;
      min-width: 0;
      padding: .4rem .65rem;
      border-radius: 6px;
      background: #f4f1ea12;
      color: var(--paper-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    [data-os=windows] .ui__search {
      border-radius: 3px
    }

    .ui__cols {
      flex: 1;
      display: flex;
      min-height: 0
    }

    .ui__side {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      padding: .7rem;
      border-right: 1px solid rgba(244, 241, 234, .1)
    }

    .ui__tab {
      padding: .4rem .65rem;
      border-radius: 6px;
      color: var(--paper-dim);
      white-space: nowrap
    }

    .ui__tab.is-active {
      background: var(--accent);
      color: var(--ink);
      font-weight: 600
    }

    .ui__panel {
      flex: 1;
      padding: .9rem;
      display: flex;
      flex-direction: column;
      gap: .5rem
    }

    .ui__line {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .5rem .6rem;
      border-radius: 6px;
      background: #f4f1ea0a
    }

    .ui__line b {
      color: var(--accent-ink)
    }

    .ui__total {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      padding: .6rem;
      border-top: 1px solid rgba(244, 241, 234, .14);
      font-weight: 600
    }

    .ui__total b {
      color: var(--accent-ink)
    }

    .ui__actions {
      display: flex;
      gap: .5rem
    }

    .ui__btn {
      flex: 1;
      text-align: center;
      padding: .55rem;
      border-radius: 6px;
      border: 1px solid rgba(244, 241, 234, .2)
    }

    [data-os=windows] .ui__btn {
      border-radius: 3px
    }

    .ui__btn--solid {
      background: var(--accent);
      color: var(--ink);
      border-color: var(--accent);
      font-weight: 600
    }

    [data-os=ios] .ui,
    [data-os=android] .ui {
      font-size: 12px
    }

    [data-os=ios] .ui__cols,
    [data-os=android] .ui__cols {
      flex-direction: column
    }

    [data-os=ios] .ui__side,
    [data-os=android] .ui__side {
      flex-direction: row;
      border-right: 0;
      border-bottom: 1px solid rgba(244, 241, 234, .1);
      overflow-x: auto
    }

    /* Android : coins plus arrondis, esprit Material */
    [data-os=android] .ui__search,
    [data-os=android] .ui__tab.is-active,
    [data-os=android] .ui__btn {
      border-radius: 14px
    }

    [data-os=android] .ui__line,
    [data-os=android] .ui__tab {
      border-radius: 10px
    }

    .platforms__switch {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: 1.6rem
    }

    .os-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .7rem 1.2rem;
      border-radius: 999px;
      border: 1px solid rgba(244, 241, 234, .22);
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--paper-dim);
      transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease)
    }

    .os-btn:hover {
      color: var(--fg);
      border-color: var(--fg)
    }

    .os-btn.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--ink)
    }

    .os-btn__ico {
      display: inline-flex;
      width: 15px;
      height: 15px;
      flex: none
    }

    .os-btn__ico svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .campaign {
      padding: clamp(6rem, 16vh, 12rem) var(--edge);
      background: var(--ink-soft);
      border-top: 1px solid rgba(244, 241, 234, .08);
      border-bottom: 1px solid rgba(244, 241, 234, .08)
    }

    .campaign__inner {
      max-width: 68rem;
      margin: 0 auto
    }

    .campaign__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 6.5vw, 5rem);
      line-height: 1;
      letter-spacing: -.02em;
      max-width: 18ch;
      margin-bottom: 1.3rem
    }

    .campaign__lede {
      max-width: 54ch;
      color: var(--paper-dim);
      font-size: clamp(1rem, 1.3vw, 1.15rem);
      margin-bottom: 20px;
    }

    .campaign__stats {
      margin-top: 1.6rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem
    }

    @media (max-width: 720px) {
      .campaign__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem 1.2rem
      }
    }

    .cstat {
      display: flex;
      flex-direction: column;
      gap: .25rem
    }

    .cstat__val {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.5rem, 3.6vw, 2.5rem);
      line-height: 1;
      letter-spacing: -.02em;
      font-variant-numeric: tabular-nums
    }

    .cstat:first-child .cstat__val {
      color: var(--accent-ink)
    }

    .cstat__lab {
      font-size: .74rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--paper-dim)
    }

    .tiers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-bottom: 2.4rem
    }

    @media (max-width: 820px) {
      .tiers {
        grid-template-columns: 1fr
      }
    }

    .tier {
      position: relative;
      border: 1px solid rgba(244, 241, 234, .16);
      border-radius: 14px;
      padding: 1.7rem 1.4rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease)
    }

    .tier:hover {
      transform: translateY(-6px);
      border-color: var(--accent-ink);
      background: #f4f1ea08
    }

    .tier--feature {
      border-color: var(--accent-ink)
    }

    .tier__badge {
      position: absolute;
      top: -11px;
      left: 1.4rem;
      background: var(--accent);
      color: var(--ink);
      font-size: .64rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      padding: .3rem .6rem;
      border-radius: 999px
    }

    .tier__price {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.3rem, 2.4vw, 1.7rem);
      letter-spacing: -.02em
    }

    .tier__oldprice {
      font-size: .78rem;
      color: var(--paper-dim);
      text-decoration: line-through;
      text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent)
    }

    .tier__name {
      font-weight: 600;
      letter-spacing: .02em;
      margin-top: .2rem
    }

    .tier__desc {
      color: var(--paper-dim);
      font-size: .9rem
    }

    .tier__req {
      font-size: .82rem;
      font-weight: 600;
      margin-top: .3rem
    }

    .tier__list {
      display: flex;
      flex-direction: column;
      gap: .4rem;
      margin-top: .2rem
    }

    .tier__list li {
      position: relative;
      padding-left: 1.3rem;
      font-size: .84rem;
      color: var(--paper-dim)
    }

    .tier__list li:before {
      content: "+";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent-ink);
      font-family: var(--font-display);
      font-weight: 700
    }

    .tier__note {
      font-size: .78rem;
      color: var(--paper-dim);
      margin-top: .3rem;
      padding-top: .7rem;
      border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent)
    }

    .campaign__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: clamp(4rem, 9vh, 6rem)
    }

    .pricing-extra {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.4rem;
      padding-top: clamp(3rem, 7vh, 4.5rem);
      margin-top: clamp(3rem, 7vh, 4.5rem);
      border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent)
    }

    @media (max-width: 900px) {
      .pricing-extra {
        grid-template-columns: 1fr;
        gap: 2.6rem
      }
    }

    .pricing-block__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: -.01em;
      margin-bottom: .8rem
    }

    .pricing-block__text {
      color: var(--paper-dim);
      font-size: .9rem;
      line-height: 1.6
    }

    .pricing-block__list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-top: .7rem
    }

    .pricing-block__list li {
      position: relative;
      padding-left: 1.3rem;
      font-size: .87rem;
      color: var(--paper-dim)
    }

    .pricing-block__list li:before {
      content: "+";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent-ink);
      font-family: var(--font-display);
      font-weight: 700
    }

    .pricing-disclaimer {
      margin-top: clamp(3rem, 7vh, 4.5rem);
      padding-top: 1.6rem;
      border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
      max-width: 60rem
    }

    .pricing-disclaimer h4 {
      font-size: .78rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--paper-dim);
      margin-bottom: .6rem
    }

    .pricing-disclaimer p {
      font-size: .78rem;
      line-height: 1.6;
      color: color-mix(in srgb, var(--paper-dim) 85%, transparent);
      margin-bottom: .4rem
    }

    /* ============ MODALE : CALCULATEUR DE TARIF ============
       Ouverture : le panneau grossit depuis 85% (keyframes), puis son
       contenu arrive en cascade depuis les côtés (alterné gauche/droite,
       un délai croissant par enfant direct de l'étape visible). Comme ce
       sont des animations (pas des transitions), elles se rejouent seules
       à chaque fois qu'un bloc redevient visible (display:none → visible),
       sans code JS de relance nécessaire. */
    @keyframes calcOverlayIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes calcPanelIn {
      from {
        opacity: 0;
        transform: scale(.85)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    @keyframes calcSlideL {
      from {
        opacity: 0;
        transform: translateX(-22px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    @keyframes calcSlideR {
      from {
        opacity: 0;
        transform: translateX(22px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    .calc {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.5rem
    }

    .calc.is-open {
      display: flex
    }

    body.calc-open {
      overflow: hidden
    }

    body.access-open {
      overflow: hidden
    }

    .calc__overlay {
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--ink) 70%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: calcOverlayIn .4s var(--ease) both
    }

    body.theme-paper .calc__overlay {
      background: color-mix(in srgb, var(--ink) 45%, transparent)
    }

    .calc__panel {
      position: relative;
      z-index: 1;
      width: min(34rem, 100%);
      max-height: min(88vh, 46rem);
      overflow-y: auto;
      padding: clamp(1.8rem, 4vw, 2.6rem);
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
      background: var(--bg);
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
      animation: calcPanelIn .45s var(--ease) both
    }

    .calc__close {
      position: absolute;
      top: 1.1rem;
      right: 1.1rem;
      z-index: 2;
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
      color: var(--fg);
      transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease)
    }

    .calc__close:hover {
      border-color: var(--accent-ink);
      color: var(--accent-ink);
      transform: rotate(90deg)
    }

    .calc__close svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round
    }

    .calc__step>* {
      animation-duration: .55s;
      animation-timing-function: var(--ease);
      animation-fill-mode: both
    }

    .calc__step>*:nth-child(odd) {
      animation-name: calcSlideL
    }

    .calc__step>*:nth-child(even) {
      animation-name: calcSlideR
    }

    .calc__step>*:nth-child(1) {
      animation-delay: .08s
    }

    .calc__step>*:nth-child(2) {
      animation-delay: .14s
    }

    .calc__step>*:nth-child(3) {
      animation-delay: .2s
    }

    .calc__step>*:nth-child(4) {
      animation-delay: .26s
    }

    .calc__step>*:nth-child(5) {
      animation-delay: .32s
    }

    .calc__step>*:nth-child(6) {
      animation-delay: .38s
    }

    .calc__step>*:nth-child(7) {
      animation-delay: .44s
    }

    .calc__eyebrow {
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent-ink);
      margin-bottom: .6rem;
      padding-right: 2.5rem
    }

    .calc__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.3rem, 3vw, 1.7rem);
      letter-spacing: -.01em;
      margin-bottom: .6rem
    }

    .calc__lede {
      color: var(--paper-dim);
      font-size: .9rem;
      margin-bottom: 1.6rem
    }

    .calc__form {
      display: flex;
      flex-direction: column;
      gap: 1.4rem
    }

    .calc__field input {
      font-size: 1.1rem;
      font-family: var(--font-display);
      font-weight: 700
    }

    .calc__hint {
      font-size: .72rem;
      color: color-mix(in srgb, var(--paper-dim) 80%, transparent)
    }

    .calc__error {
      font-size: .8rem;
      color: #ff8080;
      margin-top: -.6rem
    }

    .calc__total {
      display: flex;
      align-items: baseline;
      gap: .5rem;
      margin-bottom: .5rem
    }

    .calc__total-value {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 6vw, 3rem);
      letter-spacing: -.02em;
      color: var(--accent-ink)
    }

    .calc__total-unit {
      font-size: .82rem;
      color: var(--paper-dim)
    }

    .calc__explain {
      font-size: .88rem;
      line-height: 1.55;
      color: var(--paper-dim);
      margin-bottom: 1.4rem
    }

    .calc__savings {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      margin: -.6rem 0 1.4rem;
      padding: .35rem .75rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      color: var(--accent-ink);
      font-size: .78rem;
      font-weight: 600
    }

    .calc__figures {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.4rem
    }

    .calc__figure {
      display: flex;
      flex-direction: column;
      gap: .2rem;
      padding: .9rem 1rem;
      border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
      border-radius: 10px
    }

    .calc__figure-value {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.2rem
    }

    .calc__figure-label {
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--paper-dim)
    }

    .calc__breakdown {
      padding: 1rem 1.1rem;
      border-radius: 10px;
      background: color-mix(in srgb, var(--fg) 4%, transparent);
      margin-bottom: 1.6rem
    }

    .calc__breakdown-title {
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--paper-dim);
      margin-bottom: .6rem
    }

    .calc__breakdown-list li {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      font-size: .84rem;
      padding: .35rem 0;
      border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent)
    }

    .calc__breakdown-list li:first-child {
      border-top: 0
    }

    .calc__breakdown-list b {
      font-variant-numeric: tabular-nums;
      white-space: nowrap
    }

    .calc__actions {
      display: flex;
      flex-wrap: wrap;
      gap: .9rem
    }

    .calc__actions .btn {
      flex: 1 1 auto;
      white-space: nowrap
    }

    /* Libellé plus long que les autres CTA ("Recevoir une réduction de
       100 €") : hors de .calc__actions pour ne pas écraser les 3 boutons
       voisins, et un rayon de bordure plus discret pour rester correct
       si le texte passe sur 2-3 lignes en mobile étroit (le pilule 999px
       standard donnerait un ovale disproportionné). Volontairement plus
       discret (texte plus petit, atténué) que les CTA principaux : c'est
       une offre secondaire, pas l'action principale de l'étape. */
    #calcReferralOpen {
      --pad-y: .55rem;
      --pad-x: 1.1rem;
      white-space: normal;
      border-radius: 16px;
      line-height: 1.35;
      font-size: .68rem;
      color: var(--paper-dim)
    }

    /* .btn--ghost:hover met le texte en --ink pour rester lisible sur le
       fond vert qui se déploie au survol (voir .btn:before) — mais un
       sélecteur #id l'emporte toujours sur un .class:hover, donc la couleur
       atténuée ci-dessus restait affichée par-dessus le vert (gris clair
       sur vert clair, illisible). Il faut donc son propre :hover ici. */
    #calcReferralOpen:hover {
      color: var(--ink)
    }

    /* Modale "Accès à Charly" : panneau plus large que les autres (deux
       colonnes côte à côte sur l'étape de connexion — le formulaire de
       connexion et l'offre "Demandez une démo"). */
    /* Mention RGPD sous chaque formulaire (voir /privacy.html) */
    .privacy-note {
      margin-top: .9rem;
      font-size: .72rem;
      line-height: 1.5;
      color: var(--paper-dim)
    }

    .privacy-note a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .privacy-note a:hover {
      color: var(--accent-ink)
    }

    .calc__form .privacy-note {
      margin-top: -.6rem
    }

    .access__panel {
      width: min(46rem, 100%);
      max-width: 46rem
    }

    .access__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.2rem
    }

    .access__col--demo {
      padding-left: 2.2rem;
      border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    @media (max-width: 640px) {
      .access__grid {
        grid-template-columns: 1fr;
        gap: 2rem
      }

      .access__col--demo {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
        padding-top: 2rem
      }
    }

    .calc__done-text {
      font-size: .95rem;
      line-height: 1.6;
      color: var(--paper-dim);
      margin-bottom: 1.6rem
    }

    .calc__step--done {
      text-align: center;
      padding: 1.5rem 0
    }

    .calc__step--done .calc__eyebrow {
      padding-right: 0
    }

    .calc__step--done:before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.6rem;
      height: 2.6rem;
      margin-bottom: 1.2rem;
      border-radius: 50%;
      background: var(--accent);
      color: var(--ink);
      font-size: 1.2rem
    }

    @media (prefers-reduced-motion: reduce) {

      .calc__overlay,
      .calc__panel,
      .calc__step>* {
        animation: none !important
      }
    }

    /* ============ MODALE DÉTAIL D'UNE SOLUTION ============
       Même squelette que la modale tarifs (même animation d'ouverture),
       mais un grand panneau qui héberge la page /solutions/*.html dans un
       cadre, pour l'ouvrir sans quitter la page. */
    .solmodal {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.2rem
    }

    .solmodal.is-open {
      display: flex
    }

    body.solmodal-open {
      overflow: hidden
    }

    .solmodal__overlay {
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--ink) 70%, transparent);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: calcOverlayIn .4s var(--ease) both
    }

    body.theme-paper .solmodal__overlay {
      background: color-mix(in srgb, var(--ink) 45%, transparent)
    }

    .solmodal__panel {
      position: relative;
      z-index: 1;
      width: min(1100px, 96vw);
      height: min(88vh, 920px);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
      background: var(--bg);
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
      animation: calcPanelIn .45s var(--ease) both
    }

    .solmodal__frame {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: var(--bg)
    }

    @media (max-width: 640px) {
      .solmodal {
        padding: 0
      }

      .solmodal__panel {
        width: 100vw;
        height: 100vh;
        border-radius: 0
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .solmodal__overlay,
      .solmodal__panel {
        animation: none !important
      }
    }

    .btn--big {
      --pad-y: 1.15rem;
      --pad-x: 2.4rem;
      font-size: .85rem
    }

    .dock {
      position: fixed;
      z-index: 140;
      left: clamp(.7rem, 1.5vw, 1.4rem);
      top: 50%;
      transform: translateY(-50%);
      font-size: .68rem;
      letter-spacing: .05em
    }

    .dock ul {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      align-items: flex-start
    }

    .dock__link {
      position: relative;
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .48rem .65rem;
      margin-left: -.65rem;
      border-radius: 999px;
      opacity: .45;
      transition: opacity .3s var(--ease)
    }

    .dock__link:hover {
      opacity: 1
    }

    /* fond qui apparaît au survol (ou sur la section active) : lisible quel que soit
       le contenu en dessous, au lieu de compter uniquement sur l'inversion difference */
    .dock__link:after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: var(--bg);
      box-shadow: 0 2px 18px rgba(0, 0, 0, .22), 0 0 0 1px rgba(244, 241, 234, .08);
      opacity: 0;
      transform: scale(.88);
      transition: opacity .3s var(--ease), transform .3s var(--ease)
    }

    .dock__link.is-active:after,
    .dock__link:hover:after {
      opacity: .96;
      transform: scale(1)
    }

    .dock__link:before {
      content: "";
      width: 14px;
      height: 1px;
      background: var(--fg);
      transform: scaleX(.35);
      transform-origin: 0 50%;
      transition: transform .3s var(--ease), background .3s var(--ease)
    }

    .dock__link.is-active:before,
    .dock__link:hover:before {
      transform: scaleX(1)
    }

    .dock__i {
      font-variant-numeric: tabular-nums;
      color: var(--fg)
    }

    .dock__t {
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-transform: uppercase;
      opacity: 0;
      color: var(--fg);
      transition: max-width .4s var(--ease), opacity .3s var(--ease)
    }

    .dock__link:hover .dock__t,
    .dock:hover .dock__link.is-active .dock__t {
      max-width: 16ch;
      opacity: 1
    }

    .dock__link.is-active {
      opacity: 1
    }

    @media (max-width: 1100px) {
      .dock {
        display: none
      }
    }

    .js .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .9s var(--ease), transform .9s var(--ease)
    }

    .js .reveal.is-in {
      opacity: 1;
      transform: none
    }
  
.loader__word{
  font-family: var(--font-mono);
}