/* ==========================================================================
   Press page (/fr/presse, /en/press)
   Sits inside .home for the shared header, sections and footer.
   ========================================================================== */

.press {
  --press-border: var(--color-border-neutral);
  --press-soft: hsl(94deg 100% 10% / 0.07);
  --press-muted: #6a6c6a;
  --press-cream: #fcfaf7;
  --press-cream-border: #f0ede6;
  --press-anchor-offset: 5rem;
}

/* Every section the menu jumps to lands just below the sticky menu */
.press [id] {
  scroll-margin-top: var(--press-anchor-offset);
}

.press :where(h1, h2, h3, p, figure, dl, dd, ol) {
  margin: 0;
}

.press-muted {
  color: var(--press-muted);
}

.press-note {
  font-size: 15px;
  color: var(--text-secondary);
}

.press-label {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--press-muted);
}

.press-narrow {
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--spacing-xl);
}

.press-narrow,
.press-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Download button pinned to an illustration's corner */
.press-card__corner {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* --- Media kit header ---------------------------------------------------- */
.press-kit {
  max-width: var(--home-max);
  margin-inline: auto;
  padding: var(--spacing-4xl) var(--spacing-xl) var(--unit-72);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.press-kit--intro {
  padding-bottom: var(--spacing-3xl);
}

.press-toc + .press-kit {
  padding-top: var(--spacing-3xl);
}

.press-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.press-hero__text {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.press-chip {
  padding: var(--spacing-3xs) var(--spacing-sm);
  border-radius: var(--unit-24);
  background: var(--chip-amber-bg);
  color: var(--chip-amber-fg);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.press-hero__title {
  font-family: var(--font-family-bricolage);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: var(--font-weight-bold);
}

.press-hero__subtitle {
  font-size: var(--font-lg);
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.press-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* --- On this page: stays at the top while reading ----------------------- */
/* Opaque, no backdrop-filter: iOS Safari mis-composites sticky elements
   with a backdrop filter (WebKit bug 298709), the bar shook while scrolling. */
.press-toc {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  border-block-end: 1px solid var(--color-border-soft);
}

.press-toc__inner {
  max-width: var(--home-max);
  margin-inline: auto;
  padding-inline: var(--spacing-xl);
}

.press-toc__tabs {
  border-block-end: 0;
  scrollbar-width: none;
}

.press-toc__tabs::-webkit-scrollbar {
  display: none;
}

/* The bar has no line under the text to make room for: even padding */
.press-toc .tab__link {
  padding-block: var(--spacing-md);
}

/* --- Blocks ----------------------------------------------------------------- */
.press-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.press-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.press-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.press-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--spacing-xl);
}

/* Logos */
.press-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--spacing-md);
}

.press-logo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--press-border);
  border-radius: var(--unit-24);
}

.press-logo__stage {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
}

.press-logo__stage--dark {
  background: var(--interactive-primary);
}

.press-logo__stage--cream {
  background: var(--press-cream);
}

.press-logo__wordmark {
  width: 90%;
  height: auto;
}

.press-logo__icon {
  width: 96px;
  height: 96px;
}

.press-logo__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid #f0f0ee;
  font-weight: var(--font-weight-semibold);
}

.press-logo__pills {
  display: flex;
  gap: var(--spacing-3xs);
}

/* Colours and fonts */
.press-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
  gap: var(--spacing-2xs);
}

.press-swatch {
  overflow: hidden;
  border: 1px solid var(--press-border);
  border-radius: var(--unit-16);
}

.press-swatch__chip {
  height: 72px;
}

.press-swatch__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: var(--font-sm);
}

.press-swatch__text span {
  font-size: var(--unit-12);
  color: var(--text-secondary);
}

.press-fonts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2xs);
}

.press-font {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding: var(--spacing-md);
  border: 1px solid var(--press-border);
  border-radius: var(--unit-16);
  font-size: 13px;
  color: var(--press-muted);
}

.press-font strong {
  font-size: 15px;
  color: var(--text-primary);
}

.press-font__sample {
  font-size: 44px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}

.press-font__sample--display {
  font-family: var(--font-family-bricolage);
  font-weight: var(--font-weight-bold);
}

/* Company facts */
.press-facts {
  max-width: 46rem;
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  column-gap: var(--spacing-md);
  padding: var(--spacing-4xs) var(--spacing-lg);
  border: 1px solid var(--press-border);
  border-radius: var(--unit-24);
  font-size: 15px;
  line-height: 1.45;
}

.press-facts dt,
.press-facts dd {
  padding-block: var(--spacing-xs);
  border-top: 1px solid #f0f0ee;
}

.press-facts dt:first-of-type,
.press-facts dd:first-of-type {
  border-top: 0;
}

.press-facts dt {
  color: var(--press-muted);
}

/* --- Galleries ------------------------------------------------------------- */
/* A strip that scrolls sideways and fades out on the right, so the next card
   shows there is more; "see all" lays the whole set out as a grid. */
.press-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 64px 12px 2px;
  mask-image: linear-gradient(to right, #000 85%, transparent);
}

.press-strip--open {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding-right: 2px;
  mask-image: none;
}

.press-strip--small.press-strip--open {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.press-card {
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--press-border);
  border-radius: var(--unit-20);
}

.press-card--wide {
  flex-basis: 440px;
  max-width: 85vw;
}

.press-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: white;
}

.press-card--wide .press-card__image {
  aspect-ratio: auto;
  height: 240px;
  background: #f8f7f4;
}

.press-card--share .press-card__image {
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.press-card__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 15px;
}

.press-card__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.press-card__titles .press-muted {
  font-size: 13px;
}

.press-card--illustration {
  flex-basis: 128px;
  border-radius: var(--unit-16);
}

.press-card--illustration .press-card__image {
  padding: 10px;
}

.press-card--illustration .press-card__image--avatar {
  padding: 22px;
}

.press-card--illustration .press-card__caption {
  padding: var(--spacing-2xs) var(--spacing-xs);
  font-size: 13px;
  line-height: 1.25;
}

/* --- Presentation texts --------------------------------------------------- */
.press-texts {
  padding-block: var(--unit-80);
  background: var(--press-cream);
}

.press-texts .section__title--left {
  margin-bottom: 0;
}

.press-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-xl);
  border: 1px solid var(--press-cream-border);
  border-radius: var(--unit-24);
  background: white;
}

.press-text--dark {
  border-color: transparent;
  background: var(--interactive-primary);
  color: white;
}

.press-text__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.press-text__label {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--press-muted);
}

.press-text--dark .press-text__label {
  color: var(--interactive-accent);
}

.press-text__body {
  font-size: var(--unit-18);
  line-height: 1.6;
}

.press-text--dark .press-text__body {
  font-family: var(--font-family-bricolage);
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

/* --- Mission ----------------------------------------------------------------- */
.press-mission {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  padding-block: var(--unit-96) var(--unit-72);
}

.press-mission__head {
  max-width: 50rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.press-eyebrow {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: #1f7138;
}

.press-mission__title {
  max-width: 15ch;
  font-family: var(--font-family-bricolage);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: var(--font-weight-bold);
  color: var(--interactive-primary);
}

.press-mission__body {
  font-size: var(--font-lg);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.press-baskets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xl);
  padding: var(--spacing-4xl) var(--spacing-3xl);
  border-radius: var(--unit-32);
  background: var(--panel-sky);
}

.press-baskets__arrow {
  display: inline-flex;
  color: var(--interactive-primary);
}

.press-baskets__arrow svg {
  width: 40px;
  height: 40px;
}

.press-basket {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.press-basket--prefilled {
  width: 330px;
  opacity: 0.72;
}

.press-basket__caption {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--press-muted);
  text-align: center;
}

.press-basket__caption--ours {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-18);
  font-weight: var(--font-weight-bold);
  color: var(--interactive-primary);
}

.press-basket__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xl);
  border: 1px dashed #c9c8bf;
  border-radius: var(--unit-20);
  background: white;
  font-size: 15px;
}

.press-basket__card--ours {
  border: 0;
  box-shadow: 0 14px 50px rgb(14 61 213 / 0.12);
}

.press-basket__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.press-basket__row strong {
  white-space: nowrap;
}

.press-basket__added {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  border-radius: 10px;
  background: #fbe3e3;
  font-size: var(--font-sm);
  color: #9b1c1b;
}

.press-basket__edit {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.press-basket__total {
  padding-top: var(--spacing-2xs);
  border-top: 1px solid #f0f0ee;
  font-size: 17px;
}

.press-basket__pay,
.press-basket__choice,
.press-basket__other {
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--rounded-full);
  text-align: center;
  font-weight: var(--font-weight-semibold);
}

.press-basket__pay--grey {
  background: var(--press-muted);
  color: white;
}

.press-basket__hint {
  font-size: var(--font-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.press-basket__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-2xs);
}

.press-basket__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4xs);
  background: var(--interactive-primary);
  color: white;
  line-height: 1.25;
}

.press-basket__choice small {
  font-size: 13px;
  line-height: 1.2;
  color: var(--interactive-accent);
}

.press-basket__other {
  background: var(--press-soft);
  color: var(--interactive-primary);
  font-size: var(--font-sm);
}

.press-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--spacing-3xl);
}

.press-promise {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.press-promise__title {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--interactive-primary);
}

/* --- Coverage ------------------------------------------------------------------ */
.press-coverage {
  max-width: none;
  padding-inline: 0;
}

.press-coverage .section__title {
  text-align: center;
}

.press-coverage__intro,
.press-coverage__write {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-align: center;
}

.press-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.press-group .press-label {
  color: var(--text-secondary);
}

.press-list {
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: var(--unit-24);
  background: white;
}

.press-list li + li {
  border-top: 1px solid #f0f0ee;
}

.press-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.press-row:hover {
  background: var(--background-neutral);
}

.press-row:hover .press-row__title {
  text-decoration: underline;
}

.press-row__source {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.press-row__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.press-row__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.press-row__meta strong {
  font-family: var(--font-family-bricolage);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.press-row__meta span {
  font-size: 13px;
  color: var(--press-muted);
}

.press-row__title {
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.press-row__arrow {
  width: 18px;
  height: 18px;
  color: var(--interactive-primary);
}

.press-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.press-site {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-2xs) var(--spacing-md);
  border-radius: var(--rounded-full);
  background: white;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-image 0.15s ease;
}

/* The chips sit on the tinted band: lay the grey over their white */
.press-site:hover {
  background-image: linear-gradient(var(--background-neutral), var(--background-neutral));
}

.press-site__icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.press-site svg {
  width: 14px;
  height: 14px;
  color: var(--interactive-primary);
}

/* Internal review card */
.press-reviews {
  overflow: hidden;
  border-radius: var(--unit-24);
  background: white;
}

.press-reviews__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
  gap: 36px;
  padding: 36px 40px;
  background: var(--sky-gradient);
}

.press-reviews__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.press-reviews__logo {
  align-self: flex-start;
  width: auto;
  height: 32px;
  margin-bottom: var(--spacing-2xs);
}

.press-reviews__stars {
  display: flex;
  gap: var(--spacing-4xs);
  color: var(--interactive-primary);
}

.press-reviews__stars svg {
  width: 26px;
  height: 26px;
}

.press-reviews__average {
  font-size: 72px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.press-reviews__average span {
  font-size: 36px;
  color: var(--press-muted);
}

.press-reviews__count {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
}

.press-reviews__note {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.press-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--unit-20);
  background: white;
  font-size: 15px;
  color: var(--text-secondary);
}

.press-reviews__bar {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--spacing-xs);
}

.press-reviews__bar strong {
  color: var(--text-primary);
  text-align: right;
}

.press-reviews__track {
  height: 10px;
  overflow: hidden;
  border-radius: var(--rounded-full);
  background: var(--press-soft);
}

.press-reviews__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--interactive-primary);
}

.press-reviews__as-of {
  margin-top: var(--spacing-4xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid #f0f0ee;
  font-size: 13px;
  color: var(--press-muted);
}

.press-reviews__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
}

.press-reviews__caption > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}

.press-reviews__caption .press-muted {
  font-size: 13px;
}

/* --- Contact ------------------------------------------------------------------ */
.press-contact {
  padding-block: var(--spacing-4xl) var(--unit-72);
}

.press-contact__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-3xl) 36px;
  border-radius: var(--unit-24);
  background: var(--interactive-primary);
  color: white;
}

.press-contact__title {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-28);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
}

.press-contact__body {
  margin-top: var(--spacing-3xs);
  color: #dfe8d6;
}

/* --- Phones ----------------------------------------------------------------------- */
@media (max-width: 720px) {
  .press-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--spacing-2xs);
    padding: var(--spacing-md);
  }

  .press-row__title {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 15px;
  }

  .press-baskets {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .press-baskets__arrow {
    rotate: 90deg;
  }

  .press-reviews__card {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}