/**
 * Homepage matched to docs/mockups/01-homepage.png.
 * Full-width section fields, fluid inner grid, compact commerce-led rhythm.
 */

body.home {
  --af-home-gutter: clamp(1.5rem, 3.2vw, 4.5rem);
  background: #fff;
}

body.home #main-content {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.home .af-home .af-container,
body.home .af-site-header .af-container {
  width: 100%;
  max-width: none;
  padding-inline: var(--af-home-gutter);
}

.af-home {
  /* Route aliases, not a private palette. Each of these was a raw hex within
   * ΔE 2.2 of the token it now points at — near enough that nobody could see
   * the difference, far enough that the contrast audit only ever covered one
   * of the two values. Renaming would have churned three hundred call sites
   * for nothing, so the names stay and only the source of truth moves. */
  --af-home-ink: var(--af-color-charcoal);
  --af-home-muted: var(--af-color-ink-muted);
  --af-home-olive: var(--af-color-olive-700);
  --af-home-olive-dark: var(--af-color-olive-900);
  --af-home-sand: var(--af-color-cream);
  --af-home-cream: var(--af-color-ivory);
  --af-home-line: var(--af-color-border);
  --af-image-veil: rgb(42 42 32 / 10%);
  width: 100%;
  max-width: none;
  overflow: clip;
  color: var(--af-home-ink);
  background: #fff;
  font-optical-sizing: auto;
}

.af-home :where(ul, figure, blockquote) {
  margin: 0;
}

.af-home :where(ul) {
  padding: 0;
  list-style: none;
}

.af-home :where(li) {
  margin: 0;
}

.af-home .af-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--af-home-olive);
  font-family: var(--af-font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

.af-home-section {
  padding-block: clamp(3.25rem, 4.8vw, 5.75rem);
}

.af-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.75rem);
}

.af-section-head h2 {
  max-width: 23ch;
  margin: 0;
  color: var(--af-home-ink);
  font-size: clamp(2rem, 2.7vw, 3.35rem);
  font-weight: 450;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.af-section-head--center {
  justify-content: center;
  text-align: center;
}

.af-section-head--center h2 {
  margin-inline: auto;
}

.af-link,
.af-journal-card__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  color: var(--af-home-ink);
  font-family: var(--af-font-ui);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-decoration: none;
  text-transform: uppercase;
}

.af-link svg,
.af-journal-card__link svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform var(--af-duration-fast) var(--af-ease);
}

.af-link:hover svg,
.af-link:focus-visible svg,
.af-journal-card__link:hover svg,
.af-journal-card__link:focus-visible svg {
  transform: translateX(0.25rem);
}

.af-btn {
  display: inline-flex;
  min-height: var(--af-control-height);
  align-items: center;
  justify-content: center;
  padding: var(--af-control-padding);
  color: var(--af-home-ink);
  background: transparent;
  border: 1px solid var(--af-home-ink);
  border-radius: var(--af-control-radius);
  font-family: var(--af-font-ui);
  font-size: var(--af-control-size);
  font-weight: var(--af-control-weight);
  letter-spacing: var(--af-control-tracking);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--af-duration-fast) var(--af-ease),
    background-color var(--af-duration-fast) var(--af-ease);
}

.af-btn--solid {
  color: #fff;
  background: var(--af-home-olive-dark);
  border-color: var(--af-home-olive-dark);
}

.af-btn:hover,
.af-btn:focus-visible {
  color: #fff;
  background: var(--af-home-ink);
  border-color: var(--af-home-ink);
}

.af-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 8rem;
  background: var(--af-home-sand);
}

/* Shared image veil — sits above pixels only, never on copy. */
.af-collection__media::after,
.af-home .af-product-card__media::after,
.af-lookbook__grid li::after,
.af-community__grid :is(a, span)::after,
.af-journal-card__media::after,
.af-seo__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: var(--af-image-veil);
  pointer-events: none;
}

/* Hero image : no generic veil — blend handled by the ::before gradient below. */
.af-hero__media::after {
  content: none;
}

/* =================================================================
   Hero — compact, image fondée, typographie éditoriale.
   ================================================================= */

.af-hero {
  position: relative;
  /* Compact : évite le vide inutile. 65vh = généreux sans gaspiller */
  min-height: clamp(26rem, 65vh, 48rem);
  isolation: isolate;
  overflow: hidden;
  background: #e8d2c0;
}

/* Image positionnée en absolu, occupe tout le hero */
.af-hero__media,
.af-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.af-hero__media img {
  display: block;
  object-fit: cover;
  object-position: 72% 18%;
}

/*
 * Fondu de l'image vers le copie :
 * – À gauche : fond plein opaque (copie lisible)
 * – Au centre : transition douce sur ~55% de la largeur
 * – À droite : photo visible à 100%
 * Remplace l'ancien overlay rectangulaire qui coupait l'image brutalement.
 */
.af-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(
    to right,
    #e8d2c0 0%,
    #e8d2c0 18%,
    rgb(232 210 192 / 92%) 28%,
    rgb(232 210 192 / 72%) 38%,
    rgb(232 210 192 / 40%) 50%,
    rgb(232 210 192 / 10%) 62%,
    transparent 72%
  );
  pointer-events: none;
}

/* Copie positionnée en absolu pour être superposée à l'image */
.af-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: center;
}

.af-hero__content {
  width: min(46%, 38rem);
  padding-block: clamp(2.5rem, 4vw, 4rem);
  margin-inline-start: clamp(2rem, 3.2vw, 3.5rem);
}

/*
 * H1 : Bodoni Moda en grand, poids léger pour l'élégance éditoriale.
 * font-optical-sizing: auto est hérité du scope root — on le précise ici
 * pour s'assurer qu'aux grandes tailles les hairlines restent visibles.
 */
.af-hero__content h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--af-home-ink);
  font-family: var(--af-font-display);
  font-size: clamp(2.6rem, 3.8vw, 4.75rem);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-wrap: balance;
}

/* Eyebrow au-dessus du titre */
.af-hero__content .af-hero__eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--af-home-olive);
  font-family: var(--af-font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* Description SEO — plus riche et lisible */
.af-hero__content > p {
  max-width: 38ch;
  margin: 1.1rem 0 0;
  color: #4a4540;
  font-family: var(--af-font-ui);
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.65;
}

.af-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.35rem, 2vw, 2rem);
}

/* ============================================================
   Service promises — trust bar compact & mobile-first.
   ============================================================ */

/* ── Desktop / Tablet : barre horizontale ── */

.af-services {
  padding-block: 0;
  background: var(--af-color-ivory);
  border-top: 1px solid var(--af-color-border);
  border-bottom: 1px solid var(--af-color-border);
}

.af-services__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 5rem;
}

.af-services__list li + li {
  border-inline-start: 1px solid var(--af-color-border);
}

.af-services__list li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  min-width: 0;
}

.af-services__list svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: var(--af-home-olive);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.af-services__list span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.af-services__list strong {
  display: block;
  color: var(--af-home-ink);
  font-family: var(--af-font-ui);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.af-services__list em {
  display: block;
  margin-top: 0.18rem;
  color: var(--af-home-muted);
  font-family: var(--af-font-ui);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collection entrances — five equal 3:4 visual tiles, each colour-matched to
 * its garment family. The muted pigments behave like textile swatches rather
 * than a repeated black photographic overlay. */

.af-collections {
  padding-block: clamp(1.35rem, 2vw, 2.25rem);
  background: #fff;
}

.af-collections__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.3vw, 1.45rem);
}

.af-collections__grid > li {
  --af-collection-panel: var(--af-home-olive-dark);
  --af-collection-panel-hover: var(--af-home-ink);
  --af-collection-border: oklch(0.58 0.025 105);
  --af-collection-veil: oklch(0.42 0.03 105 / 14%);
  --af-collection-text: oklch(0.96 0.012 85);
  --af-collection-cta: oklch(0.9 0.016 85);
}

.af-collections__grid > li:nth-child(1) {
  --af-collection-panel: oklch(0.39 0.043 67);
  --af-collection-panel-hover: oklch(0.36 0.045 67);
  --af-collection-border: oklch(0.58 0.041 70);
  --af-collection-veil: oklch(0.43 0.048 68 / 16%);
  --af-collection-text: oklch(0.96 0.012 78);
  --af-collection-cta: oklch(0.9 0.018 76);
}

.af-collections__grid > li:nth-child(2) {
  --af-collection-panel: oklch(0.43 0.045 24);
  --af-collection-panel-hover: oklch(0.4 0.047 24);
  --af-collection-border: oklch(0.63 0.045 25);
  --af-collection-veil: oklch(0.59 0.052 24 / 15%);
  --af-collection-text: oklch(0.965 0.011 55);
  --af-collection-cta: oklch(0.91 0.018 48);
}

.af-collections__grid > li:nth-child(3) {
  --af-collection-panel: oklch(0.37 0.041 127);
  --af-collection-panel-hover: oklch(0.34 0.043 127);
  --af-collection-border: oklch(0.56 0.042 126);
  --af-collection-veil: oklch(0.49 0.047 127 / 16%);
  --af-collection-text: oklch(0.96 0.012 110);
  --af-collection-cta: oklch(0.9 0.019 112);
}

.af-collections__grid > li:nth-child(4) {
  --af-collection-panel: oklch(0.4 0.034 235);
  --af-collection-panel-hover: oklch(0.37 0.036 235);
  --af-collection-border: oklch(0.6 0.036 232);
  --af-collection-veil: oklch(0.55 0.043 232 / 15%);
  --af-collection-text: oklch(0.965 0.01 220);
  --af-collection-cta: oklch(0.91 0.017 220);
}

.af-collections__grid > li:nth-child(5) {
  --af-collection-panel: oklch(0.35 0.042 51);
  --af-collection-panel-hover: oklch(0.32 0.043 51);
  --af-collection-border: oklch(0.54 0.04 54);
  --af-collection-veil: oklch(0.46 0.047 53 / 16%);
  --af-collection-text: oklch(0.96 0.012 70);
  --af-collection-cta: oklch(0.9 0.018 68);
}

.af-collection {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--af-collection-text);
  background: var(--af-collection-panel);
  border: 1px solid var(--af-collection-border);
  border-radius: 0.3rem;
  text-decoration: none;
  transition: border-color 360ms var(--af-ease);
}

.af-collection__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.af-collection__media::after {
  background: var(--af-collection-veil);
  opacity: 0.72;
  transition: opacity 420ms var(--af-ease);
}

.af-collection__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  transition: transform 640ms var(--af-ease),
    filter 420ms var(--af-ease);
}

.af-collection__label {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: grid;
  min-height: clamp(4.75rem, 6vw, 6.25rem);
  align-content: center;
  justify-items: center;
  padding: clamp(0.72rem, 1vw, 1rem);
  color: var(--af-collection-text);
  background: var(--af-collection-panel);
  border-block-start: 1px solid var(--af-collection-border);
  text-align: center;
  transition: background-color 360ms var(--af-ease),
    border-color 360ms var(--af-ease);
}

.af-collection__label strong {
  font-family: var(--af-font-display);
  font-size: clamp(1.12rem, 1.52vw, 1.72rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.05;
  text-transform: uppercase;
  transition: transform 360ms var(--af-ease);
}

.af-collection__label small {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.28rem;
  padding: 0.12rem 0.08rem;
  color: var(--af-collection-cta);
  border-block-end: 1px solid var(--af-collection-border);
  font-family: var(--af-font-ui);
  font-size: 0.66rem;
  font-weight: 580;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: color 280ms var(--af-ease),
    border-color 280ms var(--af-ease),
    transform 360ms var(--af-ease);
}

.af-collection__label small::after {
  width: 0.38rem;
  height: 0.38rem;
  content: "";
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 360ms var(--af-ease);
}

.af-collection:hover,
.af-collection:focus-visible {
  border-color: var(--af-collection-text);
}

.af-collection:hover .af-collection__label,
.af-collection:focus-visible .af-collection__label {
  background: var(--af-collection-panel-hover);
  border-color: var(--af-collection-text);
}

.af-collection:hover .af-collection__media::after,
.af-collection:focus-visible .af-collection__media::after {
  opacity: 1;
}

.af-collection:hover .af-collection__label strong,
.af-collection:focus-visible .af-collection__label strong {
  transform: translateY(-0.08rem);
}

.af-collection:hover .af-collection__label small,
.af-collection:focus-visible .af-collection__label small {
  color: var(--af-collection-text);
  border-color: currentColor;
  transform: translateY(0.04rem);
}

.af-collection:hover .af-collection__label small::after,
.af-collection:focus-visible .af-collection__label small::after {
  transform: translateX(0.14rem) rotate(45deg);
}

.af-collection:hover .af-collection__media img,
.af-collection:focus-visible .af-collection__media img {
  filter: saturate(1.025) contrast(1.015);
  transform: scale(1.018);
}

/* Product row. Product photography is supplied vertically, so the media viewport uses
 * the same 9:16 ratio and `contain` keeps every garment completely visible. */

.af-products {
  padding-block: 3.1rem;
  background: #fff;
  border-top: 1px solid #f0ebe5;
}

.af-products__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.25vw, 1.35rem);
}

.af-home .af-product-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--af-home-line);
  border-radius: 0.5rem;
}

.af-home .af-product-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--af-surface-page);
  border-radius: 0;
}

.af-home .af-product-card__media > a,
.af-home .af-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.af-home .af-product-card__media img {
  object-fit: contain;
  object-position: center;
}

.af-home .af-product-card__badge {
  position: absolute;
  z-index: 2;
  inset: 0.65rem auto auto 0.65rem;
  padding: 0.35rem 0.55rem;
  color: #fff;
  background: #9c773c;
  border-radius: 0.2rem;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.af-home .af-product-card__wishlist {
  position: absolute;
  z-index: 2;
  inset: 0.5rem 0.5rem auto auto;
}

.af-home .af-product-card__wishlist :is(a, button) {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  min-height: 0;
  place-items: center;
  padding: 0;
  color: var(--af-home-ink);
  background: rgb(255 255 255 / 88%);
  border: 0;
  border-radius: 50%;
}

.af-home .af-product-card__body {
  padding: 0.9rem;
}

.af-home .af-product-card__body h3 {
  display: -webkit-box;
  min-height: 2.55em;
  margin: 0;
  overflow: hidden;
  color: var(--af-home-ink);
  font-family: var(--af-font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.af-home .af-product-card__body h3 a {
  color: inherit;
  text-decoration: none;
}

.af-home .af-product-card__rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.45rem;
  color: #aa7b28;
  font-size: 0.69rem;
}

.af-home .af-product-card__price {
  min-height: 1.4rem;
  margin-top: 0.4rem;
  color: var(--af-home-ink);
  font-size: 0.85rem;
  font-weight: 650;
}

.af-home .af-product-card__action {
  margin-top: 0.7rem;
}

.af-home .af-product-card .button,
.af-home .af-product-card .added_to_cart {
  display: inline-flex;
  width: 100%;
  min-height: 2.55rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.55rem;
  color: var(--af-home-ink);
  background: #fff;
  border: 1px solid #bcb2a8;
  border-radius: 0.25rem;
  box-shadow: none;
  font-family: var(--af-font-ui);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.af-home .af-product-card .button:hover,
.af-home .af-product-card .button:focus-visible,
.af-home .af-product-card .added_to_cart:hover,
.af-home .af-product-card .added_to_cart:focus-visible {
  color: #fff;
  background: var(--af-home-ink);
  border-color: var(--af-home-ink);
}

/* Value row. */

.af-values {
  padding-block: clamp(4.5rem, 6vw, 6.75rem);
  background: var(--af-home-sand);
}

.af-values__layout {
  display: grid;
  grid-template-columns: minmax(17.5rem, 0.74fr) minmax(0, 2.4fr);
  gap: clamp(3rem, 5vw, 5.5rem);
  align-items: center;
}

.af-values__head {
  align-self: center;
}

.af-values__head h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--af-home-ink);
  font-size: clamp(2.65rem, 3.3vw, 4.15rem);
  font-weight: 450;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.af-values__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.af-values__list li {
  position: relative;
  min-width: 0;
  min-height: clamp(14rem, 18vw, 16.5rem);
  padding: 0 clamp(1.25rem, 1.8vw, 2rem);
  border-inline-start: 1px solid color-mix(in srgb, var(--af-home-ink) 14%, transparent);
}

.af-values__list li::before {
  content: attr(data-value-index);
  position: absolute;
  top: 0.2rem;
  right: clamp(1.25rem, 1.8vw, 2rem);
  color: color-mix(in srgb, var(--af-home-olive) 58%, var(--af-home-sand));
  font-family: var(--af-font-ui);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.af-values__icon {
  display: block;
  width: clamp(5rem, 6vw, 6.5rem);
  height: clamp(5rem, 6vw, 6.5rem);
  margin: 0 0 clamp(1.4rem, 2vw, 2rem);
  aspect-ratio: 1;
  object-fit: contain;
}

.af-values__list h3 {
  margin: 0;
  color: var(--af-home-ink);
  font-family: var(--af-font-ui);
  font-size: clamp(0.95rem, 1vw, 1.08rem);
  font-weight: 650;
  line-height: 1.25;
}

.af-values__list p {
  max-width: 27ch;
  margin: 0.7rem 0 0;
  color: var(--af-home-muted);
  font-size: clamp(0.8rem, 0.82vw, 0.9rem);
  line-height: 1.6;
}

/* Lookbook — a flat photographic strip, not nested cards. */

.af-lookbook {
  padding-block: 2rem;
  background: #fff;
}

.af-lookbook__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.1vw, 1.25rem);
}

.af-lookbook__grid li {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--af-home-sand);
  border-radius: 0.45rem;
}

.af-lookbook__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Reviews. */

.af-reviews {
  padding-top: clamp(2.5rem, 3.4vw, 4rem);
  background: #fff;
}

.af-reviews .af-section-head {
  margin-bottom: 1.5rem;
}

.af-reviews__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.af-reviews__list:has(li:only-child) {
  grid-template-columns: minmax(0, 42rem);
  justify-content: center;
}

.af-reviews__list figure {
  height: 100%;
  padding: clamp(1.4rem, 2.2vw, 2.4rem);
  background: var(--af-home-cream);
  border-radius: 0.5rem;
}

.af-reviews__stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
}

.af-reviews__list:has(li:only-child) .af-reviews__stars {
  justify-content: center;
}

.af-reviews__stars svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: #d99a1d;
  stroke: none;
}

.af-reviews__list blockquote {
  padding: 0;
  color: var(--af-home-ink);
  background: none;
  border: 0;
  font-family: var(--af-font-ui);
  font-size: 0.84rem;
  line-height: 1.5;
}

.af-reviews__list figcaption {
  margin-top: 1rem;
  color: var(--af-home-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.af-reviews__list figcaption strong,
.af-reviews__list figcaption a {
  display: block;
}

.af-reviews__list figcaption strong {
  color: var(--af-home-ink);
}

.af-reviews__list figcaption a {
  margin-top: 0.15rem;
  color: inherit;
  text-decoration: none;
}

/* Journal. */

.af-journal {
  padding-block: 2.5rem;
  background: #fff;
}

.af-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.af-journal__grid li {
  min-width: 0;
}

.af-journal-card {
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--af-home-line);
  border-radius: 0.45rem;
}

.af-journal-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: var(--af-home-sand);
}

.af-journal-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.af-journal-card__body {
  padding: 1rem 1.15rem 1.2rem;
}

/* #8a765a mesurait 4.36:1 sur blanc (axe, AF-AUD-014) : sous les 4.5:1 exigés
 * pour du petit texte. Assombri du minimum nécessaire, la teinte est
 * inchangée à l'œil. */
.af-journal-card__meta {
  margin: 0;
  color: #877358;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.af-journal-card h3 {
  display: -webkit-box;
  margin: 0.4rem 0 0;
  overflow: hidden;
  color: var(--af-home-ink);
  font-size: clamp(1.25rem, 1.7vw, 1.8rem);
  font-weight: 480;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.af-journal-card h3 a {
  color: inherit;
  text-decoration: none;
}

.af-journal-card__link {
  margin-top: 0.8rem;
}

/* Community showcase. This is a distinct brand destination, not a second
 * collection menu. */

.af-community {
  padding-block: clamp(4rem, 6vw, 7rem);
  color: var(--af-home-cream);
  background: var(--af-home-olive-dark);
}

.af-community__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: clamp(2rem, 3.4vw, 4rem);
}

.af-community .af-eyebrow {
  color: #cfcbb7;
}

.af-community__head h2 {
  max-width: 12ch;
  margin: 0;
  color: inherit;
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.af-community__intro p {
  max-width: 42ch;
  margin: 0;
  color: #dedccd;
  font-size: 1rem;
  line-height: 1.6;
}

.af-community__intro .af-link {
  margin-top: 1.2rem;
  color: inherit;
}

.af-community__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: clamp(17rem, 22vw, 27rem);
  gap: clamp(0.55rem, 0.9vw, 1rem);
}

.af-community__grid li:first-child {
  grid-column: span 2;
}

.af-community__grid :is(a, span) {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: #4a4936;
}

.af-community__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Crawlable SEO content from the former homepage, kept visible and useful. */

.af-seo {
  background: var(--af-home-sand);
}

.af-seo__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.af-seo__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--af-home-cream);
}

.af-seo__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.af-seo__content h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--af-home-ink);
  font-size: clamp(2.35rem, 3.7vw, 4.6rem);
  font-weight: 450;
  letter-spacing: -0.04em;
  line-height: 1;
}

.af-seo__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  margin-top: 1.75rem;
}

.af-seo__copy p {
  margin: 0;
  color: var(--af-home-muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

.af-seo__copy p:first-child {
  grid-column: 1 / -1;
  color: var(--af-home-ink);
  font-size: 1.05rem;
}

.af-seo__links {
  margin-top: 1.75rem;
  padding-top: 1.2rem;
  border-top: 1px solid #d8cec2;
}

.af-seo__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
}

.af-seo__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--af-home-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.af-seo__links svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
}

/* Responsive adaptation keeps the same order and visual hierarchy. */

@media (max-width: 1099px) {
  .af-hero__content {
    width: min(44%, 35rem);
  }

  .af-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .af-community__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: clamp(14rem, 24vw, 18rem);
  }

  .af-values__layout {
    grid-template-columns: 1fr;
    gap: 3.25rem;
  }

  .af-values__head h2 {
    max-width: 18ch;
  }
}

@media (max-width: 899px) {
  /*
   * Mobile : hero plein-écran avec overlay depuis le bas.
   * La photo occupe tout, le texte est superposé avec un dégradé
   * depuis le bas — pas d'empilement image + bloc texte séparés.
   */
  .af-hero {
    min-height: clamp(28rem, 90vw, 42rem);
  }

  /* Fondu depuis le bas : laisse la photo respirer en haut */
  .af-hero::before {
    background: linear-gradient(
      to top,
      #e4ccb8 0%,
      #e4ccb8 22%,
      rgb(228 204 184 / 88%) 38%,
      rgb(228 204 184 / 55%) 55%,
      transparent 75%
    );
  }

  .af-hero__media {
    position: absolute;
    inset: 0;
  }

  .af-hero__media img {
    object-position: center 15%;
  }

  /* Copie en bas de la photo */
  .af-hero__copy {
    align-items: flex-end;
    padding-bottom: 2.25rem;
  }

  .af-hero__content {
    width: 100%;
    padding-block: 0;
    margin-inline-start: 0;
  }

  .af-hero__content h1 {
    max-width: 18ch;
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  /* Services stays horizontal on tablet, no change needed */

  .af-collections__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .af-values__list li {
    min-height: 13rem;
    padding-block: 0 2.25rem;
  }

  .af-values__list li:nth-child(n + 3) {
    padding-block: 2.25rem 0;
    border-top: 1px solid color-mix(in srgb, var(--af-home-ink) 14%, transparent);
  }

  .af-values__list li:nth-child(odd) {
    border-inline-start: 0;
  }

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

  .af-community__head,
  .af-seo__layout {
    grid-template-columns: 1fr;
  }

  .af-community__head h2 {
    max-width: 16ch;
  }

  .af-seo__media {
    width: min(100%, 48rem);
  }
}

@media (max-width: 639px) {
  body.home {
    --af-home-gutter: 1rem;
  }

  .af-home-section {
    padding-block: 3.6rem;
  }

  .af-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .af-section-head h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .af-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .af-hero__actions .af-btn {
    width: 100%;
  }

  /* Mobile : stack vertical, chaque item pleine largeur */
  .af-services__list {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .af-services__list li {
    justify-content: flex-start;
    text-align: left;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-inline-start: none;
    border-top: 1px solid var(--af-color-border);
  }

  .af-services__list li:first-child {
    border-top: none;
  }

  .af-services__list li + li {
    border-inline-start: none;
  }

  .af-services__list svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .af-services__list strong {
    white-space: normal;
  }

  .af-services__list em {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

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

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

  .af-values__list {
    grid-template-columns: 1fr;
  }

  .af-values__list li {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    min-height: 0;
    padding: 1.4rem 2.25rem 1.4rem 0;
    border-inline-start: 0;
    border-top: 1px solid var(--af-home-line);
  }

  .af-values__list li:first-child {
    border-top: 0;
  }

  .af-values__list li:nth-child(n + 3) {
    padding: 1.4rem 2.25rem 1.4rem 0;
  }

  .af-values__list li::before {
    top: 1.65rem;
    right: 0;
  }

  .af-values__icon {
    grid-row: 1;
    width: 4.75rem;
    height: 4.75rem;
    margin: 0;
  }

  .af-values__list li > div {
    grid-column: 2;
    grid-row: 1;
  }

  .af-values__head h2 {
    max-width: 15ch;
    font-size: clamp(2.35rem, 11vw, 3.15rem);
  }

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

  .af-reviews__list,
  .af-journal__grid {
    grid-template-columns: 1fr;
  }

  .af-community__head {
    display: block;
  }

  .af-community__intro {
    margin-top: 1.4rem;
  }

  .af-community__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 20rem;
    gap: 0.65rem;
  }

  .af-community__grid li:first-child {
    grid-column: span 2;
  }

  .af-seo__copy {
    grid-template-columns: 1fr;
  }

  .af-seo__copy p:first-child {
    grid-column: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .af-collection,
  .af-collection__media::after,
  .af-collection__label,
  .af-collection__label strong,
  .af-collection__label small,
  .af-collection__label small::after,
  .af-collection__media img,
  .af-link svg,
  .af-journal-card__link svg {
    transition: none;
  }
}