/* ==========================================================================
   Sillage — Components (V1 Atelier Web : blocs du site public, voir la fin du fichier)
   Every component reads semantic tokens only, so it adapts to .theme-ink /
   .theme-cobalt contexts. Breakpoints are co-located (mobile-first).
   Index:
     01 Buttons & links      08 Cards (service, project, team…)
     02 Badges & labels      09 Pricing
     03 Section heading      10 Accordion, tabs, carousel
     04 Brand & header       11 Forms
     05 Navigation & mega    12 Lists, tables, prose
     06 Mobile dock          13 Misc (breadcrumb, pagination, marquee,
     07 Footer                   lightbox, toast)
   ========================================================================== */

@layer components {
  /* ------------------------------------------------------------------------
     01 · Buttons & links
     ------------------------------------------------------------------------ */
  .btn {
    --btn-bg: var(--color-heading);
    --btn-fg: var(--color-bg);
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding: 0.75rem 1.375rem;
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .btn .icon {
    transition: transform var(--transition-base);
  }

  .btn:hover .icon:last-child:not(.btn__spinner) {
    transform: translateX(3px);
  }

  .btn--primary {
    --btn-bg: var(--color-primary);
    --btn-fg: var(--color-on-primary);
  }

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

  .btn--dark {
    --btn-bg: var(--ink-950);
    --btn-fg: var(--white);
  }

  .btn--dark:hover {
    --btn-bg: var(--ink-700);
  }

  .btn--signal {
    --btn-bg: var(--signal-400);
    --btn-fg: var(--ink-950);
  }

  .btn--signal:hover {
    --btn-bg: var(--signal-300);
  }

  .btn--light {
    --btn-bg: var(--white);
    --btn-fg: var(--cobalt-700);
  }

  .btn--light:hover {
    --btn-bg: var(--cobalt-50);
  }

  /* Outline: ink fill sweeps in from the left on hover */
  .btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--color-heading);
    --btn-border: var(--color-border-strong);
  }

  .btn--outline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-heading);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
  }

  .btn--outline:hover {
    --btn-fg: var(--color-bg);
    --btn-border: var(--color-heading);
  }

  .btn--outline:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-heading);
  }

  .btn--ghost:hover {
    --btn-bg: var(--color-surface-alt);
  }

  .btn--sm {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .btn--lg {
    min-height: 3.5rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
  }

  .btn--block {
    width: 100%;
  }

  .btn--icon {
    width: 3rem;
    padding: 0;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
  }

  /* Loading state: <button aria-busy="true"> */
  .btn__spinner {
    display: none;
  }

  .btn[aria-busy="true"] {
    pointer-events: none;
  }

  .btn[aria-busy="true"] .btn__label {
    opacity: 0.6;
  }

  .btn[aria-busy="true"] .btn__spinner {
    display: block;
    animation: spin 0.8s linear infinite;
  }

  .btn[aria-busy="true"] .icon:not(.btn__spinner) {
    display: none;
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

  /* Text link with arrow + drawn underline */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    padding-bottom: 2px;
    transition: background-size var(--transition-base);
  }

  .link-arrow .icon {
    transition: transform var(--transition-base);
  }

  .link-arrow:hover {
    background-size: 100% 1px;
  }

  .link-arrow:hover .icon {
    transform: translateX(3px);
  }

  .link-underline {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size var(--transition-base);
  }

  .link-underline:hover {
    background-size: 100% 1px;
  }

  /* Whole card clickable through its main link, keeps one tab stop */
  .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* ------------------------------------------------------------------------
     02 · Badges, labels, marker
     ------------------------------------------------------------------------ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .eyebrow__index {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-link);
  }

  .eyebrow__index::after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: currentColor;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-heading);
    white-space: nowrap;
  }

  .badge--primary {
    border-color: transparent;
    background: var(--color-primary-soft);
    color: var(--color-link);
  }

  .badge--signal {
    border-color: transparent;
    background: var(--signal-400);
    color: var(--ink-950);
  }

  .badge--dark {
    border-color: transparent;
    background: var(--ink-950);
    color: var(--white);
  }

  .badge--success {
    border-color: transparent;
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  /* Live status chip (hero, contact) */
  .tag-live {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.75rem 0.375rem 0.625rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-small);
    font-weight: 550;
    color: var(--color-heading);
  }

  .status-dot {
    position: relative;
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: var(--radius-full);
    background: #19b56f;
  }

  .status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: pulse 2.4s var(--ease-out) infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }

    70%,
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  /* Signature highlighter — drawn on reveal (see utilities.css) */
  .mark {
    background-image: linear-gradient(var(--color-mark), var(--color-mark));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.36em;
    padding-inline: 0.04em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .theme-ink .mark,
  .theme-cobalt .mark {
    background-size: 100% 100%;
    background-position: 0 0;
    color: var(--ink-950);
    padding-inline: 0.12em;
  }

  .rating {
    display: inline-flex;
    gap: 2px;
    color: var(--signal-400);
  }

  .rating .icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: #d9a800;
    stroke-width: 1;
  }

  .avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .avatar-group {
    display: flex;
  }

  .avatar-group img {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--color-bg);
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .avatar-group img + img {
    margin-left: -0.75rem;
  }

  .icon-box {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-link);
    transition:
      background-color var(--transition-base),
      color var(--transition-base),
      border-color var(--transition-base);
  }

  .icon-box--filled {
    border-color: transparent;
    background: var(--color-primary);
    color: var(--white);
  }

  /* ------------------------------------------------------------------------
     03 · Section heading
     ------------------------------------------------------------------------ */
  .section-head {
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  }

  .section-head__title {
    max-width: 22ch;
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }

  .section-head--center .section-head__title {
    max-width: 20ch;
  }

  @media (min-width: 1024px) {
    .section-head--split {
      max-width: none;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      column-gap: var(--space-9);
      align-items: end;
    }

    .section-head--split > .eyebrow {
      grid-column: 1 / -1;
    }

    .section-head--split .section-head__aside {
      display: grid;
      gap: var(--space-4);
      justify-items: start;
    }
  }

  .section-head__aside {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  /* ------------------------------------------------------------------------
     04 · Brand & header
     ------------------------------------------------------------------------ */
  .brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-heading);
    text-decoration: none;
  }

  /* Logo réel d'Atelier Web : le « A » et le point, dans la couleur des liens */
  .brand__mark {
    width: 1.875rem;
    height: 1.875rem;
    fill: var(--color-link);
  }

  .brand__dot {
    color: var(--color-link);
  }

  .brand__name {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    color: var(--color-heading);
  }

  /* Background lives on a pseudo-element: a backdrop-filter on the header
     itself would trap the fixed mobile panel inside it. */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.88);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: var(--border-width) solid transparent;
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base);
  }

  .site-header.is-scrolled::before {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--header-height);
    transition: height var(--transition-base);
  }

  @media (min-width: 1024px) {
    .site-header.is-scrolled .site-header__inner {
      height: 4rem;
    }
  }

  .site-header__actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
  }

  .site-header__phone {
    display: none;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-heading);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__phone:hover {
    color: var(--color-link);
  }

  @media (min-width: 1280px) {
    .site-header__phone {
      display: inline-flex;
    }
  }

  @media (max-width: 559.98px) {
    .site-header__cta {
      display: none;
    }
  }

  .burger {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
  }

  .burger__lines,
  .burger__lines::before,
  .burger__lines::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
    transition:
      transform var(--transition-base),
      opacity var(--transition-fast);
  }

  .burger__lines {
    position: relative;
  }

  .burger__lines::before,
  .burger__lines::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .burger__lines::before {
    transform: translateY(-6px);
  }

  .burger__lines::after {
    transform: translateY(6px);
  }

  .burger[aria-expanded="true"] .burger__lines {
    background: transparent;
  }

  .burger[aria-expanded="true"] .burger__lines::before {
    transform: rotate(45deg);
  }

  .burger[aria-expanded="true"] .burger__lines::after {
    transform: rotate(-45deg);
  }

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

  /* ------------------------------------------------------------------------
     05 · Navigation & mega menu
     ------------------------------------------------------------------------ */
  .main-nav__link {
    position: relative;
    color: var(--color-heading);
    text-decoration: none;
    font-weight: 550;
  }

  .mega-link {
    display: flex;
    gap: 0.875rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    color: var(--color-heading);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }

  .mega-link__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-link);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .mega-link__body {
    display: grid;
    gap: 0.125rem;
  }

  .mega-link__title {
    font-weight: 600;
    line-height: 1.3;
  }

  .mega-link__text {
    font-size: var(--text-small);
    color: var(--color-muted);
    line-height: 1.4;
  }

  .mega-link:hover {
    background: var(--color-surface-alt);
  }

  .mega-link:hover .mega-link__icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
  }

  .mega-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    font-weight: 550;
    text-decoration: none;
  }

  .mega-item .icon {
    color: var(--color-link);
  }

  .mega-item:hover {
    background: var(--color-surface-alt);
  }

  .mega__feature {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
  }

  .mega__feature-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-heading);
  }

  .mega__feature-text {
    font-size: var(--text-small);
  }

  .mega__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
  }

  .mega__label {
    padding: 0 0.75rem var(--space-2);
  }

  .mega__list {
    display: grid;
    gap: 2px;
  }

  /* Desktop navigation */
  @media (min-width: 1024px) {
    .main-nav {
      margin-inline: auto;
    }

    .main-nav__list {
      display: flex;
      align-items: center;
      gap: 0.125rem;
    }

    .main-nav__item {
      position: relative;
      display: flex;
      align-items: center;
    }

    .main-nav__link {
      padding: 0.5rem 0.75rem;
      font-size: 0.9375rem;
    }

    .main-nav__link::after {
      content: "";
      position: absolute;
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0.25rem;
      height: 2px;
      background: var(--color-primary);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform var(--transition-base);
    }

    .main-nav__link:hover::after,
    .main-nav__link[aria-current="page"]::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    [data-dropdown] > .main-nav__link {
      padding-right: 0.25rem;
    }

    [data-dropdown] > .main-nav__link::after {
      right: 0.25rem;
    }

    .main-nav__toggle {
      display: grid;
      place-items: center;
      width: 1.5rem;
      height: 2rem;
      margin-right: 0.25rem;
      color: var(--color-muted);
    }

    .main-nav__toggle .icon {
      transition: transform var(--transition-base);
    }

    .main-nav__item.is-open .main-nav__toggle .icon {
      transform: rotate(180deg);
    }

    .mega {
      position: absolute;
      top: calc(100% + 0.875rem);
      left: -1rem;
      z-index: var(--z-dropdown);
      width: min(52rem, calc(100vw - 4rem));
      padding: var(--space-4);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-surface);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility 0s linear 250ms;
    }

    /* Hover bridge so the pointer can travel from link to panel */
    .mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 1rem;
    }

    .mega--compact {
      width: 20rem;
    }

    .main-nav__item.is-open > .mega {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    @media (hover: hover) {
      [data-dropdown]:hover > .mega {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
      }
    }

    .mega__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 15rem;
      gap: var(--space-4);
    }

    .mega__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px;
    }

    .main-nav__footer,
    .nav-backdrop {
      display: none;
    }
  }

  /* Mobile / tablet off-canvas panel */
  @media (max-width: 1023.98px) {
    .main-nav {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(26rem, 100%);
      height: 100vh;
      height: 100dvh;
      padding: calc(var(--header-height) + var(--space-3)) var(--gutter) var(--space-6);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--color-bg);
      border-left: var(--border-width) solid var(--color-border);
      visibility: hidden;
      transform: translateX(100%);
      transition:
        transform 450ms var(--ease-out),
        visibility 0s linear 450ms;
    }

    .main-nav.is-open {
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .nav-backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      background: rgb(11 22 56 / 0.45);
      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--transition-base),
        visibility 0s linear 250ms;
    }

    .nav-open .nav-backdrop {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }

    .main-nav__item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: var(--border-width) solid var(--color-border);
    }

    .main-nav__link {
      flex: 1;
      padding: 1rem 0;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .main-nav__link[aria-current="page"] {
      color: var(--color-link);
    }

    .main-nav__toggle {
      display: grid;
      place-items: center;
      width: 2.75rem;
      height: 2.75rem;
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-sm);
    }

    .main-nav__toggle .icon {
      transition: transform var(--transition-base);
    }

    .main-nav__item.is-open .main-nav__toggle .icon {
      transform: rotate(180deg);
    }

    .mega {
      display: none;
      flex-basis: 100%;
      padding-bottom: var(--space-4);
    }

    .main-nav__item.is-open > .mega {
      display: block;
    }

    .mega__feature,
    .mega-link__text,
    .mega__label {
      display: none;
    }

    .mega__grid {
      display: grid;
      gap: 2px;
    }

    .mega-link {
      align-items: center;
      padding: 0.5rem;
    }

    .mega-link__icon {
      width: 2.25rem;
      height: 2.25rem;
    }

    .mega__footer {
      margin-top: var(--space-2);
      padding-top: var(--space-3);
    }

    .main-nav.is-open .main-nav__item {
      animation: nav-item-in 500ms var(--ease-out) both;
    }

    .main-nav.is-open .main-nav__item:nth-child(2) {
      animation-delay: 40ms;
    }

    .main-nav.is-open .main-nav__item:nth-child(3) {
      animation-delay: 80ms;
    }

    .main-nav.is-open .main-nav__item:nth-child(4) {
      animation-delay: 120ms;
    }

    .main-nav.is-open .main-nav__item:nth-child(5) {
      animation-delay: 160ms;
    }

    .main-nav.is-open .main-nav__item:nth-child(6) {
      animation-delay: 200ms;
    }

    .main-nav__footer {
      display: grid;
      gap: var(--space-5);
      margin-top: auto;
      padding-top: var(--space-6);
    }

    .main-nav__contact {
      display: grid;
      gap: var(--space-3);
      font-size: var(--text-small);
    }

    .main-nav__contact li,
    .main-nav__contact a {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: var(--color-text);
      text-decoration: none;
    }

    .main-nav__contact .icon {
      color: var(--color-link);
    }
  }

  @keyframes nav-item-in {
    from {
      opacity: 0;
      transform: translateX(24px);
    }
  }

  /* ------------------------------------------------------------------------
     06 · Mobile action dock (inspired by thumb-zone conversion bars)
     ------------------------------------------------------------------------ */
  .mobile-dock {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: max(var(--space-3), env(safe-area-inset-bottom));
    z-index: var(--z-dock);
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--ink-950);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% + 2rem));
    transition: transform 450ms var(--ease-out);
  }

  .mobile-dock.is-visible {
    transform: none;
  }

  .nav-open .mobile-dock {
    transform: translateY(calc(100% + 2rem));
  }

  .mobile-dock__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--ink-800);
    color: var(--white);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-dock__item--primary {
    background: var(--cobalt-600);
  }

  .mobile-dock__item:focus-visible {
    outline-color: var(--signal-400);
  }

  @media (min-width: 768px) {
    .mobile-dock {
      display: none;
    }
  }

  /* ------------------------------------------------------------------------
     07 · Footer
     ------------------------------------------------------------------------ */
  .site-footer {
    padding-top: var(--section-space-sm);
    padding-bottom: var(--space-6);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.9375rem;
  }

  @media (max-width: 767.98px) {
    .site-footer {
      padding-bottom: 6rem;
    }
  }

  .site-footer a {
    color: inherit;
    text-decoration: none;
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-7);
    padding-bottom: var(--space-7);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  @media (min-width: 1024px) {
    .site-footer__top {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-9);
    }
  }

  .site-footer__brand {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    align-content: start;
  }

  .site-footer__pitch {
    max-width: 30rem;
    font-size: var(--text-lead);
    line-height: 1.5;
  }

  .site-footer__newsletter {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .site-footer__heading-lg {
    font-size: var(--text-h3);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
    padding-block: var(--space-7);
  }

  @media (min-width: 768px) {
    .site-footer__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .site-footer__heading {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .site-footer__col ul {
    display: grid;
    gap: var(--space-3);
  }

  .site-footer__col a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition:
      color var(--transition-fast),
      background-size var(--transition-base);
  }

  .site-footer__col a:hover {
    color: var(--color-heading);
    background-size: 100% 1px;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
  }

  @media (min-width: 768px) {
    .site-footer__contact {
      grid-column: auto;
    }
  }

  .site-footer address {
    display: grid;
    gap: var(--space-2);
    font-style: normal;
  }

  .site-footer__phone {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-heading) !important;
  }

  .site-footer__hours {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-small);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .site-footer__legal a:hover,
  .back-to-top:hover {
    color: var(--color-heading);
  }

  .back-to-top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
  }

  /* ------------------------------------------------------------------------
     08 · Cards
     ------------------------------------------------------------------------ */

  /* Service cells: an editorial table, not floating cards */
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--border-width) solid var(--color-border);
    border-left: var(--border-width) solid var(--color-border);
  }

  @media (min-width: 640px) {
    .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .service-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    border-right: var(--border-width) solid var(--color-border);
    border-bottom: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    transition: background-color var(--transition-base);
  }

  .service-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
  }

  .service-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .service-card__index {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    color: var(--color-muted);
  }

  .service-card__title {
    font-size: var(--text-h3);
  }

  .service-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .service-card__text {
    flex: 1;
  }

  .service-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-weight: 600;
    font-size: 0.9375rem;
  }

  .service-card__more .icon {
    transition: transform var(--transition-base);
  }

  .service-card:hover {
    background: var(--color-surface-alt);
  }

  .service-card:hover::before {
    transform: scaleX(1);
  }

  .service-card:hover .icon-box {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
  }

  .service-card:hover .service-card__more .icon {
    transform: translateX(4px);
  }

  .service-card:focus-within {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
  }

  .service-card a:focus-visible {
    outline: none;
  }

  /* Feature (icon + title + text), used in grids */
  .feature {
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .feature__title {
    font-size: var(--text-h4);
  }

  .feature--bordered {
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
  }

  /* Project / case study */
  .project-card {
    position: relative;
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }

  .project-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    aspect-ratio: 4 / 3;
  }

  .project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
  }

  .project-card__cue {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-950);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base);
  }

  .project-card:hover .project-card__media img,
  .project-card:focus-within .project-card__media img {
    transform: scale(1.04);
  }

  .project-card:hover .project-card__cue,
  .project-card:focus-within .project-card__cue {
    opacity: 1;
    transform: none;
  }

  .project-card__body {
    display: grid;
    gap: var(--space-3);
  }

  .project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .project-card__title {
    font-size: var(--text-h3);
  }

  .project-card__title a,
  .project-card__title button {
    color: inherit;
    text-align: left;
    text-decoration: none;
    font: inherit;
    letter-spacing: inherit;
  }

  .project-card:hover .project-card__title a,
  .project-card:hover .project-card__title button {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .project-card__result {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
  }

  .project-card__result strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-link);
  }

  .project-card--large .project-card__title {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }

  .project-card--large .project-card__media {
    aspect-ratio: 16 / 11;
  }

  /* Team member */
  .team-card {
    display: grid;
    gap: var(--space-4);
  }

  .team-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 5;
    background: var(--color-surface-alt);
  }

  .team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition:
      filter var(--transition-slow),
      transform 900ms var(--ease-out);
  }

  .team-card:hover .team-card__media img,
  .team-card:focus-within .team-card__media img {
    filter: grayscale(0) saturate(0.9);
    transform: scale(1.03);
  }

  .team-card__social {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-950);
  }

  .team-card__social:hover {
    background: var(--color-primary);
    color: var(--white);
  }

  .team-card__name {
    font-size: var(--text-h4);
  }

  .team-card__role {
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  /* Testimonial */
  .testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    height: 100%;
    padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .testimonial__quote {
    flex: 1;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--color-heading);
  }

  .testimonial__quote p::before {
    content: "“";
  }

  .testimonial__quote p::after {
    content: "”";
  }

  .testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
  }

  .testimonial__name {
    display: block;
    font-weight: 650;
    color: var(--color-heading);
    line-height: 1.3;
  }

  .testimonial__role {
    display: block;
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .testimonial__logo {
    height: 1.5rem;
    width: auto;
    margin-left: auto;
    opacity: 0.55;
  }

  .theme-ink .testimonial__logo {
    filter: invert(1);
  }

  @media (max-width: 479.98px) {
    .testimonial__logo {
      display: none;
    }
  }

  /* Statistics */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: var(--border-width) solid var(--color-border);
  }

  @media (min-width: 1024px) {
    .stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5) var(--space-6) 0;
    border-bottom: var(--border-width) solid var(--color-border);
  }

  @media (min-width: 1024px) {
    .stat {
      padding-left: var(--space-5);
      border-bottom: 0;
      border-left: var(--border-width) solid var(--color-border);
    }

    .stat:first-child {
      padding-left: 0;
      border-left: 0;
    }
  }

  .stat__value {
    order: -1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--color-heading);
  }

  .stat__value sup,
  .stat__unit {
    font-size: 0.45em;
    letter-spacing: -0.02em;
    vertical-align: top;
    color: var(--color-link);
  }

  .stat__unit--word {
    margin-left: 0.15em;
    font-size: 0.4em;
    vertical-align: baseline;
  }

  .stat__label {
    font-weight: 650;
    color: var(--color-heading);
  }

  .stat__text {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  /* Search result proof card (SERP snippet) */
  .result-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .result-card__query {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.75rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    color: var(--color-heading);
  }

  .result-card__query .icon {
    color: var(--color-muted);
  }

  .result-card__site {
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .result-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-link);
  }

  .result-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
  }

  .result-card__rank {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-heading);
    line-height: 1;
  }

  .result-card__rank sup {
    margin-left: 1px;
    font-size: 0.45em;
    letter-spacing: 0;
    vertical-align: top;
  }

  /* Value / info card */
  .info-card {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .info-card__title {
    font-size: var(--text-h4);
  }

  /* ------------------------------------------------------------------------
     09 · Pricing
     ------------------------------------------------------------------------ */
  .billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 4px;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
  }

  .billing-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .billing-toggle label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .billing-toggle input:checked + label {
    background: var(--color-surface);
    color: var(--color-heading);
    box-shadow: var(--shadow-sm);
  }

  .billing-toggle input:focus-visible + label {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .pricing-grid {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
  }

  @media (min-width: 1024px) {
    .pricing-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
    }
  }

  .price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  @media (min-width: 1024px) {
    .pricing-grid > .price-card:not(.price-card--featured):first-child {
      border-right: 0;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    }

    .pricing-grid > .price-card:not(.price-card--featured):last-child {
      border-left: 0;
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .price-card--featured {
      margin-block: calc(var(--space-5) * -1);
      padding-block: calc(clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) + var(--space-5));
      box-shadow: var(--shadow-lg);
    }
  }

  .price-card--featured {
    border-color: transparent;
    background: var(--color-bg);
  }

  .price-card__flag {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
  }

  .price-card__head {
    display: grid;
    gap: var(--space-2);
  }

  .price-card__name {
    font-size: var(--text-h3);
  }

  .price-card__desc {
    font-size: 0.9375rem;
    max-width: 28ch;
  }

  .price-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-heading);
  }

  .price-card__from {
    flex-basis: 100%;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .price-card__amount {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }

  @keyframes price-swap {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  .price-card__unit {
    font-weight: 600;
  }

  .price-card__period {
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .price-card__setup {
    margin-top: calc(var(--space-3) * -1);
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .price-card .check-list {
    margin-top: var(--space-2);
  }

  /* ------------------------------------------------------------------------
     10 · Accordion, tabs, carousel
     ------------------------------------------------------------------------ */
  .accordion {
    border-top: var(--border-width) solid var(--color-border);
  }

  .accordion__item {
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .accordion__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 350ms var(--ease-out),
      content-visibility 350ms allow-discrete;
  }

  .accordion__item[open]::details-content {
    block-size: auto;
  }

  .accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    list-style: none;
    cursor: pointer;
    transition: color var(--transition-fast);
  }

  .accordion__trigger::-webkit-details-marker {
    display: none;
  }

  .accordion__trigger:hover {
    color: var(--color-link);
  }

  .accordion__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition:
      background-color var(--transition-base),
      border-color var(--transition-base),
      color var(--transition-base);
  }

  .accordion__icon::before,
  .accordion__icon::after {
    content: "";
    position: absolute;
    width: 0.75rem;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition-base);
  }

  .accordion__icon::after {
    transform: rotate(90deg);
  }

  .accordion__item[open] .accordion__icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
  }

  .accordion__item[open] .accordion__icon::after {
    transform: rotate(0deg);
  }

  .accordion__panel {
    padding: 0 var(--space-8) var(--space-5) 0;
    max-width: 62ch;
  }

  .accordion__panel > * + * {
    margin-top: var(--space-3);
  }

  /* Tabs (vertical list on desktop) */
  .tabs {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 1024px) {
    .tabs {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

  .tabs__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  @media (min-width: 560px) {
    .tabs__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .tabs__list {
      grid-template-columns: 1fr;
      gap: 0;
      border-top: var(--border-width) solid var(--color-border);
    }
  }

  .tabs__tab {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: left;
    color: var(--color-muted);
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
  }

  @media (min-width: 1024px) {
    .tabs__tab {
      padding: var(--space-5) 0 var(--space-5) var(--space-5);
      border: 0;
      border-bottom: var(--border-width) solid var(--color-border);
      border-radius: 0;
    }

    .tabs__tab::before {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      bottom: -1px;
      width: 2px;
      background: var(--color-primary);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform var(--transition-base);
    }

    .tabs__tab[aria-selected="true"]::before {
      transform: scaleY(1);
    }
  }

  .tabs__tab-index {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.9;
  }

  .tabs__tab-title {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .tabs__tab-text {
    grid-column: 2;
    display: none;
    font-size: var(--text-small);
  }

  @media (min-width: 1024px) {
    .tabs__tab-text {
      display: block;
    }
  }

  .tabs__tab:hover {
    color: var(--color-heading);
  }

  .tabs__tab[aria-selected="true"] {
    color: var(--color-heading);
    border-color: var(--color-primary);
  }

  .tabs__tab[aria-selected="true"] .tabs__tab-index {
    color: var(--color-link);
  }

  .tabs__panel:focus-visible {
    outline-offset: 8px;
  }

  .tab-feature {
    display: grid;
    gap: var(--space-6);
  }

  .tab-feature__media {
    aspect-ratio: 16 / 9;
  }

  .tab-feature__body {
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  @media (min-width: 768px) {
    .tab-feature__body {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: var(--space-7);
    }
  }

  .tabs__panel.is-entering {
    animation: panel-in 450ms var(--ease-out);
  }

  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  .no-js .tabs__panel[hidden] {
    display: block !important;
  }

  /* Carousel (scroll-snap; JS only adds the buttons' behaviour) */
  .carousel {
    position: relative;
  }

  .carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(34rem, 86%);
    gap: var(--space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

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

  .carousel__slide {
    scroll-snap-align: start;
  }

  .carousel__controls {
    display: flex;
    gap: var(--space-2);
  }

  .carousel__btn {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      opacity var(--transition-fast);
  }

  .carousel__btn:hover:not(:disabled) {
    background: var(--color-heading);
    color: var(--color-bg);
  }

  .carousel__btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .carousel__status {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caps);
    color: var(--color-muted);
  }

  /* ------------------------------------------------------------------------
     11 · Forms
     ------------------------------------------------------------------------ */
  .form-grid {
    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 640px) {
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid .field--full {
      grid-column: 1 / -1;
    }
  }

  .field {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .field__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-heading);
  }

  .field__label .req {
    color: var(--color-error);
  }

  .field__optional {
    font-weight: 400;
    color: var(--color-muted);
  }

  .input,
  .select,
  .textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: 1rem;
    line-height: 1.4;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .input::placeholder,
  .textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }

  .input:hover,
  .select:hover,
  .textarea:hover {
    border-color: var(--color-muted);
  }

  .input:focus,
  .select:focus,
  .textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(30 61 224 / 0.18);
  }

  .textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .select-wrap {
    position: relative;
  }

  .select {
    appearance: none;
    padding-right: 2.75rem;
    cursor: pointer;
  }

  .select option {
    background: var(--white);
    color: var(--ink-950);
  }

  .select-wrap .icon {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    color: var(--color-muted);
  }

  .field__hint {
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .field__error {
    display: none;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 550;
    color: var(--color-error);
  }

  .field.is-invalid .field__error {
    display: flex;
  }

  .field.is-invalid .input,
  .field.is-invalid .select,
  .field.is-invalid .textarea {
    border-color: var(--color-error);
  }

  .field.is-invalid .input:focus,
  .field.is-invalid .select:focus,
  .field.is-invalid .textarea:focus {
    box-shadow: 0 0 0 3px rgb(211 38 28 / 0.16);
  }

  /* Choice chips (radio) */
  .choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .choice {
    position: relative;
  }

  .choice input {
    position: absolute;
    opacity: 0;
  }

  .choice label {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: 550;
    color: var(--color-heading);
    cursor: pointer;
    transition:
      border-color var(--transition-fast),
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .choice label:hover {
    border-color: var(--color-heading);
  }

  .choice input:checked + label {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
  }

  .choice input:focus-visible + label {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Checkbox */
  .checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    font-size: var(--text-small);
  }

  .checkbox input {
    appearance: none;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    border: 1.5px solid var(--color-muted);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .checkbox input::after {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    background: var(--white);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform var(--transition-fast);
  }

  .checkbox input:checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
  }

  .checkbox input:checked::after {
    transform: scale(1);
  }

  .checkbox input:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .field.is-invalid .checkbox input {
    border-color: var(--color-error);
  }

  /* Honeypot (anti-spam) */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
  }

  .form-alert--success {
    background: var(--color-success-soft);
    color: #0a5a3e;
  }

  .form-alert--error {
    background: var(--color-error-soft);
    color: #9b1c14;
  }

  .form-alert .icon {
    margin-top: 0.15rem;
  }

  /* ------------------------------------------------------------------------
     12 · Lists, tables, prose
     ------------------------------------------------------------------------ */
  .check-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .check-list li {
    position: relative;
    padding-left: 1.875rem;
  }

  .check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-xs);
    background: var(--color-primary-soft);
  }

  .check-list li::after {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: calc(0.2em + 0.3rem);
    width: 0.65rem;
    height: 0.65rem;
    background: var(--color-link);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  .check-list--muted li.is-off {
    color: var(--color-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-strong);
  }

  .check-list--muted li.is-off::after {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
    background: var(--color-muted);
  }

  .table-scroll {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .compare-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }

  .compare-table th,
  .compare-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: center;
  }

  .compare-table th:first-child,
  .compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--color-surface);
  }

  .compare-table thead th {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    color: var(--color-heading);
    background: var(--color-surface-alt);
  }

  .compare-table thead th:first-child {
    background: var(--color-surface-alt);
  }

  .compare-table .is-featured {
    background: var(--cobalt-50);
  }

  .compare-table tbody th {
    font-weight: 550;
    color: var(--color-heading);
  }

  .compare-table .group-row th {
    padding-top: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .compare-table .icon {
    margin-inline: auto;
  }

  .compare-table .yes {
    color: var(--color-link);
  }

  .compare-table .no {
    color: var(--slate-300);
  }

  /* Long-form article content */
  .prose {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--color-text);
  }

  .prose > * + * {
    margin-top: 1.25em;
  }

  .prose h2 {
    margin-top: 2.2em;
    font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
  }

  .prose h3 {
    margin-top: 1.8em;
    font-size: var(--text-h3);
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
  }

  .prose h2 + *,
  .prose h3 + * {
    margin-top: 0.75em;
  }

  .prose ul,
  .prose ol {
    padding-left: 1.25em;
  }

  .prose li + li {
    margin-top: 0.5em;
  }

  .prose li::marker {
    color: var(--color-link);
    font-weight: 600;
  }

  .prose blockquote {
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 3px solid var(--signal-400);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--color-heading);
  }

  .prose blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-style: normal;
    color: var(--color-muted);
  }

  .prose figure img {
    width: 100%;
    border-radius: var(--radius-md);
  }

  .prose figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .prose code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--color-heading);
  }

  .prose a {
    font-weight: 550;
  }

  .data-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .data-table th,
  .data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    text-align: left;
  }

  .data-table thead th {
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .data-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--cobalt-200);
    border-radius: var(--radius-md);
    background: var(--cobalt-50);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-800);
  }

  .callout .icon {
    color: var(--cobalt-600);
  }

  .callout strong {
    display: block;
    margin-bottom: var(--space-1);
  }

  /* ------------------------------------------------------------------------
     13 · Misc
     ------------------------------------------------------------------------ */
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .breadcrumb li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border-strong);
  }

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

  .breadcrumb a:hover {
    color: var(--color-link);
  }

  .breadcrumb [aria-current="page"] {
    color: var(--color-heading);
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .pagination a,
  .pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--color-heading);
    text-decoration: none;
    transition:
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .pagination a:hover {
    border-color: var(--color-heading);
  }

  .pagination [aria-current="page"] {
    border-color: var(--color-heading);
    background: var(--color-heading);
    color: var(--color-bg);
  }

  .pagination .is-disabled {
    opacity: 0.4;
  }

  .pagination__gap {
    border: 0 !important;
  }

  /* Logo marquee */
  .marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
  }

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

  .marquee__list {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
    padding-right: clamp(2.5rem, 2rem + 3vw, 5rem);
    margin: 0;
    list-style: none;
  }

  .marquee__list img {
    height: 1.875rem;
    width: auto;
    max-width: none;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
  }

  .marquee__list img:hover {
    opacity: 1;
  }

  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  /* Lightbox (native <dialog>) */
  .lightbox {
    width: min(72rem, calc(100% - 2 * var(--gutter)));
    max-height: calc(100dvh - 4rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--slate-600);
    box-shadow: var(--shadow-lg);
    overflow: auto;
  }

  .lightbox::backdrop {
    background: rgb(11 22 56 / 0.78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .lightbox[open] {
    animation: dialog-in 400ms var(--ease-out);
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
  }

  .lightbox__figure {
    display: grid;
  }

  @media (min-width: 1024px) {
    .lightbox__figure {
      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }
  }

  .lightbox__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--slate-100);
  }

  .lightbox__caption {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .lightbox__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--ink-950);
    letter-spacing: -0.02em;
  }

  .lightbox__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink-950);
    box-shadow: var(--shadow-md);
  }

  .lightbox__close:hover {
    background: var(--ink-950);
    color: var(--white);
  }

  /* Toast */
  .toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    z-index: var(--z-dialog);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--ink-950);
    color: var(--white);
    font-size: var(--text-small);
    font-weight: 550;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 150%);
    transition: transform 400ms var(--ease-out);
  }

  .toast.is-visible {
    transform: translate(-50%, 0);
  }

  /* Table of contents */
  .toc {
    display: grid;
    gap: var(--space-4);
  }

  .toc ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: var(--border-width) solid var(--color-border);
  }

  .toc a {
    position: relative;
    display: block;
    padding: 0.4rem 0 0.4rem var(--space-4);
    font-size: var(--text-small);
    line-height: 1.4;
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .toc a::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform var(--transition-base);
  }

  .toc a:hover {
    color: var(--color-heading);
  }

  .toc a.is-active {
    color: var(--color-heading);
    font-weight: 600;
  }

  .toc a.is-active::before {
    transform: scaleY(1);
  }

  /* Media frame */
  .media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
  }

  .media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-frame--4x3 {
    aspect-ratio: 4 / 3;
  }

  .media-frame--16x9 {
    aspect-ratio: 16 / 9;
  }

  .media-frame--square {
    aspect-ratio: 1;
  }

  .media-frame--portrait {
    aspect-ratio: 4 / 5;
  }

  /* Contact card (FAQ aside, sidebars) */
  .contact-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text);
  }

  .contact-card__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .contact-card__title {
    font-size: var(--text-h3);
  }
}

/* ==========================================================================
   V1 · Atelier Web — compléments de composants
   Mêmes principes que la V0 : tokens sémantiques uniquement, filets plutôt
   qu'ombres, mobile-first.
   ========================================================================== */
@layer components {
  /* Bandeau de garanties : la V0 y faisait défiler des logos clients */
  .marquee__list--text li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    white-space: nowrap;
  }

  .marquee__list--text .icon {
    color: var(--color-primary);
  }

  /* Sélecteur Création de site / Référencement (onglets au style de la bascule V0) */
  .offer-switch__tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 1.125rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .offer-switch__tab[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-heading);
    box-shadow: var(--shadow-sm);
  }

  .offer-switch__tab:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .offer-switch__panel.is-entering {
    animation: price-swap 400ms var(--ease-out);
  }

  /* Méga-menu « Nos offres » : centré sous son lien, qui n'est plus le
     premier de la navigation comme dans la V0 */
  @media (min-width: 1024px) {
    .mega--center {
      left: 50%;
      transform: translate(-50%, 8px);
    }

    .main-nav__item.is-open > .mega--center {
      transform: translate(-50%, 0);
    }

    @media (hover: hover) {
      [data-dropdown]:hover > .mega--center {
        transform: translate(-50%, 0);
      }
    }
  }

  /* Cartes tarifaires : contenu réel du catalogue */
  .price-card .btn {
    white-space: normal;
    text-align: center;
  }

  .price-card__kind {
    color: var(--color-link);
  }

  .price-card__flag {
    top: 0;
    right: auto;
    left: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    transform: translateY(-50%);
  }

  .price-card__caption {
    margin-top: calc(var(--space-3) * -1);
    font-size: var(--text-caption);
    line-height: var(--leading-tight);
    color: var(--color-muted);
  }

  .price-card__details {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
    font-size: var(--text-small);
  }

  .price-card__details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-weight: 600;
    color: var(--color-heading);
    list-style: none;
    cursor: pointer;
  }

  .price-card__details summary::-webkit-details-marker {
    display: none;
  }

  .price-card__details .accordion__icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .price-card__details[open] .accordion__icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white);
  }

  .price-card__details[open] .accordion__icon::after {
    transform: rotate(0deg);
  }

  .price-card__details p {
    margin-top: var(--space-3);
    color: var(--color-muted);
  }

  .service-card__price {
    font-size: var(--text-small);
    color: var(--color-muted);
  }

  .service-card__price strong {
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--color-heading);
  }

  /* Carte « Être conseillé » : le logo remplace la photo de la V0 */
  .contact-card__mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
  }

  /* Ligne de conseil sous les tarifs */
  .advice-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-6);
    text-align: center;
  }

  /* Diapositives « Vos contenus » : composant témoignage sans guillemets */
  .content-slide .testimonial__quote {
    flex: none;
    font-size: var(--text-h3);
    font-weight: 700;
  }

  .content-slide .testimonial__quote p::before,
  .content-slide .testimonial__quote p::after {
    content: none;
  }

  .content-slide > p {
    flex: 1;
  }

  .content-slide .icon-box {
    align-self: start;
  }

  /* Garanties du pied de page */
  .site-footer__trust {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small);
  }

  .site-footer__trust li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .site-footer__trust .icon {
    color: var(--color-mark);
  }

  .site-footer__newsletter .cluster {
    margin-top: var(--space-5);
  }

  /* Le bouton garde ses couleurs malgré la couleur des liens du pied de page */
  .site-footer .btn {
    color: var(--btn-fg);
  }

  .site-footer__contact ul {
    margin-bottom: var(--space-5);
  }

  .rating-summary__text strong {
    color: var(--color-heading);
  }
}