/*
 * Accueil : hero, sections et carte du sourcing.
 * Contrat de direction : .impeccable/surfaces/templates-home-index-html-twig.md
 */

/* Titres en tête de paragraphe (« Un sourcing direct. Chaque produit... ») */
.run-in-block {
  color: var(--color-text-muted);
}

.run-in-block > * {
  display: inline;
}

.run-in {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: inherit;
  font-weight: var(--weight-subtitle);
  letter-spacing: 0;
  color: var(--color-text);
}

.section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* 2. Hero (Amaury, retenu le 2026-10-07) : la signature (H1) et la phrase,
   le dessin des maisons et du camion, le bandeau des repères, les boutons.
   Téléphone et tablette dans cet ordre, alignés à gauche ; dès 1100 px, tout
   centré sur le dessin, chaque ligne centrée. */
.hero {
  --signature-scale: 0.9;
  position: relative;
  padding-top: var(--space-2xl);
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1;
}

/* La signature d'Amaury, « The Art of Selection », en grand et en olive, un
   peu sous la taille des grands titres (Chris, 2026-10-01 : « un chouilla
   plus petit ») ; sur téléphone, elle tient ainsi sur une ligne. Les
   accroches des pages acheteurs et producteurs partagent sa famille. */
.hero__signature,
.audience-hero__hook,
.audience-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}

.hero__signature,
.audience-hero__hook {
  color: var(--color-accent);
}

.audience-hero__title {
  color: var(--color-text);
}

.hero__signature {
  font-size: calc(var(--text-display) * var(--signature-scale));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.audience-hero__hook {
  font-size: var(--text-headline);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
}

/* Pages acheteurs et producteurs : la même hiérarchie un cran plus bas sur
   l'échelle (leur accroche, une phrase, partage la colonne avec le
   formulaire) : accroche à la taille d'un titre de section, titre (h1) dessous. */
.audience-hero__title {
  font-size: var(--text-subhead);
  line-height: var(--leading-subhead);
}

.hero__subtitle,
.audience-hero__lead {
  max-width: 34rem;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.hero__subtitle {
  margin-top: var(--space-md);
}

/* Mobile : le dessin sous la phrase, aux marges du texte, jamais au ras de
   l'écran (Chris, 2026-09-30). */
.hero__media {
  display: block;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: var(--space-xl) auto 0;
}

.hero__media img {
  width: 100%;
}

.hero__after {
  margin-top: var(--space-md);
}

/* Les quatre repères d'Amaury (2026-10-05), en bandeau d'étiquette entre
   deux filets fins (variante choisie par Chris le 2026-10-06 parmi quatre).
   Téléphone : un repère par ligne, chacun précédé d'un point olive (des
   séparateurs y tomberaient en fin de ligne). Tablette : deux colonnes. Dès
   1100 px : sur une ligne, centrés, séparés par un point olive. */
.hero__proofs {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-block: 1px solid var(--color-rule);
  list-style: none;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: 600;
  color: var(--color-text);
}

.hero__proofs li::before {
  content: "·";
  margin-right: 0.6em;
  color: var(--color-olive);
}

@media (min-width: 37.5rem) and (max-width: 68.74rem) {
  .hero__proofs {
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--space-xl);
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Dès la tablette, une phrase par ligne : jamais un « Et » (ou « En »,
   « And ») isolé en fin de ligne (2026-10-07). */
@media (min-width: 37.5rem) {
  .hero__line {
    display: block;
  }
}

@media (max-width: 37.49rem) {
  .hero__actions .button {
    flex: 1 1 100%;
  }
}

/* Sous les boutons : l'espace normal d'une section avant la suivante, et un
   peu plus quand elle porte un halo (il s'efface en haut de la section). */
.hero + .section {
  padding-top: var(--section-space);
}

.hero:has(+ .section--halo) {
  padding-bottom: var(--space-3xl);
}

/* Dès 1100 px : signature et phrase centrées ligne à ligne au-dessus du
   dessin, lui-même centré, puis le bandeau et les boutons centrés. */
@media (min-width: 68.75rem) {
  .hero {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, var(--container))
      [content-end] minmax(var(--gutter), 1fr)
      [full-end];
  }

  /* Le texte, les repères et les boutons se placent dans la grille du hero. */
  .hero__content,
  .hero__after {
    display: contents;
  }

  .hero__intro {
    grid-column: content;
    grid-row: 1;
    text-align: center;
  }

  .hero__signature {
    font-size: calc(var(--text-display-hero) * var(--signature-scale));
    line-height: var(--leading-display-hero);
    letter-spacing: var(--tracking-display-hero);
  }

  /* Chaque phrase d'Amaury sur sa ligne (.hero__line, plus bas), quelle que
     soit la langue : la largeur ne sert plus à placer le retour à la ligne. */
  .hero__subtitle {
    max-width: 40rem;
    margin: var(--space-lg) auto 0;
  }

  /* La largeur du dessin suit la hauteur de l'écran : sur un écran bas
     (portable de 1200 x 800), le bandeau et les boutons tiennent dans le
     premier écran (Chris, 2026-10-06). 500 px : hauteur du texte au-dessus et
     du bloc repères + boutons dessous ; 3 : proportion de l'image. Jamais
     moins de 60 % de la largeur du contenu. */
  .hero__media {
    grid-column: content;
    grid-row: 2;
    justify-self: center;
    width: max(60%, min(100%, calc((100svh - 500px) * 3)));
    margin-top: var(--space-lg);
  }

  .hero__proofs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-column: content;
    grid-row: 3;
    gap: var(--space-2xs) 0;
    margin-top: var(--space-lg);
  }

  .hero__proofs li::before {
    content: none;
  }

  .hero__proofs li:not(:last-child)::after {
    content: "·";
    margin-inline: 1em;
    color: var(--color-olive);
  }

  .hero__actions {
    grid-column: content;
    grid-row: 4;
    justify-self: center;
    margin-top: var(--space-xl);
  }
}

/* Sous un halo : filets des critères plus marqués. */
.section--halo .criteria__item {
  border-color: var(--color-field-border);
}

/* 4. Sélection : rangée de tirages en boucle, centrée sous le titre et un peu
   plus large que lui (80 rem au plus : Chris, 2026-10-01). Elle montre des
   tirages entiers (1 sur téléphone, 3 sur tablette, 5 dès 1100 px),
   alternativement hauts et bas dès 600 px, chacun penché à sa façon et
   redressé au survol ; les flèches la font tourner sans fin
   (assets/js/product-rail.js). */
.product-rail {
  --rail-visible: 1;
  --rail-gap: var(--space-lg);
  /* Bande de fondu de chaque côté, jamais plus large que l'espace entre deux
     produits : au repos elle ne montre que cet espace, aucun produit coupé. */
  --rail-fade: min(var(--rail-gap), var(--gutter));
  width: min(100% - 2 * var(--gutter) + 2 * var(--rail-fade), 80rem + 2 * var(--rail-fade));
  margin-inline: auto;
}

@media (min-width: 37.5rem) {
  .product-rail {
    --rail-visible: 3;
  }

  .product-rail__item:nth-child(even) {
    margin-top: var(--space-3xl);
  }
}

@media (min-width: 68.75rem) {
  .product-rail {
    --rail-visible: 5;
    --rail-gap: var(--space-xl);
  }
}

.product-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--rail-visible) - 1) * var(--rail-gap)) / var(--rail-visible));
  gap: var(--rail-gap);
  padding: var(--space-md) var(--rail-fade) var(--space-lg);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-fade);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
  /* Pendant le glissement, les produits qui entrent et sortent se fondent dans
     le fond au lieu d'être tranchés net par le bord de la rangée. */
  mask-image: linear-gradient(90deg, transparent, #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), transparent);
}

.product-rail__list:focus-visible {
  outline-offset: -2px;
}

.product-rail__item {
  scroll-snap-align: start;
}

/* Chaque tirage penché à sa façon, sur un cycle de cinq ; redressé au survol. */
.product-rail__item:nth-child(5n + 1) .product-card { transform: rotate(-2.2deg); }
.product-rail__item:nth-child(5n + 2) .product-card { transform: rotate(1.6deg); }
.product-rail__item:nth-child(5n + 3) .product-card { transform: rotate(-0.8deg); }
.product-rail__item:nth-child(5n + 4) .product-card { transform: rotate(2deg); }
.product-rail__item:nth-child(5n) .product-card { transform: rotate(-1.4deg); }

.product-rail__item .product-card:hover {
  transform: rotate(0deg);
}

/* Barre de défilement masquée seulement quand les flèches fonctionnent. */
.product-rail.is-enhanced .product-rail__list {
  scrollbar-width: none;
}

.product-rail.is-enhanced .product-rail__list::-webkit-scrollbar {
  display: none;
}

/* Trop peu de produits pour défiler : rangée fixe et centrée, sans flèches. */
.product-rail.is-static .product-rail__list {
  justify-content: center;
}

.product-rail__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.product-rail__controls[hidden] {
  display: none;
}

.rail-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-width) solid var(--color-field-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.rail-button:hover {
  border-color: var(--color-olive);
  background: var(--color-wheat);
}

.rail-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.rail-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Bouton pause / lecture du défilement automatique : une seule icône visible. */
.rail-button--toggle[hidden] {
  display: none;
}

.rail-button--toggle .icon {
  width: 1rem;
  height: 1rem;
}

.rail-button--toggle .rail-button__play,
.rail-button--toggle.is-paused .rail-button__pause {
  display: none;
}

.rail-button--toggle.is-paused .rail-button__play {
  display: block;
}

/* 6. Sourcing : texte et liste des pays à gauche, carte aquarelle à droite
   (Amaury, 2026-10-06). Mobile : texte, carte, puis liste des pays. */
.sourcing__grid {
  display: grid;
  grid-template-areas: "text" "map" "list";
  gap: var(--space-2xl);
}

.sourcing__text { grid-area: text; }
.sourcing__list { grid-area: list; }

.sourcing-illustration {
  grid-area: map;
  margin: 0;
}

.sourcing-illustration img {
  width: 100%;
  height: auto;
}

@media (min-width: 60rem) {
  .sourcing__list {
    margin-top: var(--space-2xl);
  }

  .sourcing__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas: "text map" "list map";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-3xl);
    row-gap: 0;
  }

  /* Un peu moins haute que sa colonne (Chris, 2026-10-06 : « vraiment un
     tout petit peu moins ») : 92 %, centrée. */
  .sourcing-illustration {
    align-self: center;
    justify-self: center;
    width: 92%;
  }
}

.sourcing__text .section-heading {
  margin-bottom: var(--space-lg);
}

.sourcing__lead {
  max-width: 34rem;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

.sourcing__lead + .sourcing__lead {
  margin-top: var(--space-md);
}

.sourcing__list-title {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Origines en pastilles arrondies, filet olive de 1 px (Chris, 2026-10-06,
   parmi plusieurs présentations : la liste en lignes prenait trop de hauteur). */
.origin-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}

.origin-list__item {
  padding: 0.3rem 0.95rem;
  border: 1px solid var(--color-olive);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--color-olive);
  line-height: 1.3;
}

.origin-list__name {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 480;
}

/* 3. Notre métier : étapes numérotées reliées par le pointillé des trajets
   de la carte */
.steps {
  --marker: 2.75rem;
  position: relative;
  display: grid;
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
}

/* Le pointillé va d'un repère au suivant sans passer dessous : les repères
   restent transparents, sur n'importe quel fond. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--marker);
  bottom: calc(-1 * var(--space-xl));
  left: calc(var(--marker) / 2 - 1px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--color-olive-leaf) 0 2px, transparent 2px 8px);
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: var(--marker) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--marker);
  height: var(--marker);
  border: 1.5px solid var(--color-olive);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-olive);
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: 500;
}

.step .run-in-block {
  padding-top: 0.45rem;
}

/* Pictogramme à la place du numéro (pages acheteurs et producteurs). */
.step__marker .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Accueil (Amaury, 2026-10-05) : le numéro passe dans un petit intitulé
   (« 01 · Sélectionner »), l'accroche prend le premier plan, le texte suit ;
   le repère devient un point sur le pointillé, comme les points de la carte. */
.steps--leads {
  --marker: 0.75rem;
}

/* Empilé (téléphone), le point descend un peu pour s'aligner sur
   l'intitulé ; le pointillé vertical part de dessous lui. */
.step__marker--dot {
  margin-top: 0.15rem;
  border: 0;
  background: var(--color-olive);
}

.step__body {
  display: grid;
  gap: var(--space-xs);
}

.step__label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: 0.08em;
  font-weight: var(--weight-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.step__lead {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: var(--leading-title);
  /* Un peu plus épais que les autres titres de bloc : Amaury les voulait
     en gras. */
  font-weight: 500;
  /* Pas d'équilibrage : il ajoutait une ligne à l'accroche la plus longue. */
  text-wrap: pretty;
  color: var(--color-text);
}

.step__text {
  color: var(--color-text-muted);
}

/* En ligne dès 960 px, sauf les étapes empilées des pages acheteurs et
   producteurs (.steps--stacked), qui gardent le pointillé vertical. */
@media (min-width: 60rem) {
  .steps:not(.steps--stacked) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .steps:not(.steps--stacked) > .step:not(:last-child)::after {
    top: calc(var(--marker) / 2 - 1px);
    bottom: auto;
    left: var(--marker);
    right: calc(-1 * var(--space-xl));
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--color-olive-leaf) 0 2px, transparent 2px 8px);
  }

  .steps:not(.steps--stacked) > .step {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .steps:not(.steps--stacked) .run-in-block {
    padding-top: 0;
  }

  /* En ligne, le point se pose sur le pointillé horizontal, centré sur lui. */
  .steps--leads .step__marker--dot {
    margin-top: 0;
  }
}

/* 9. À propos : le texte, et à sa droite un tirage papier (photo à marge
   blanche, penchée de 3 degrés, étiquette du logo collée sur le coin bas
   gauche, nom et rôle alignés à droite dessous). Tirage et texte rapprochés,
   l'ensemble centré dans la page ; le tirage au-dessus du texte sur mobile.
   Choisi par Chris le 2026-09-30. */
.about__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.about__body {
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text-muted);
}

/* Titre puis texte en colonne, comme le sourcing : le même écart. */
.about__text .section-heading {
  margin-bottom: var(--space-lg);
}

/* Texte d'Amaury en trois paragraphes ; ses mots en gras ressortent en encre
   sur le texte grisé (2026-10-05). */
.about__body p + p {
  margin-top: var(--space-md);
}

.about__body strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Toute la figure penche d'un bloc : photo, étiquette et légende. */
.about__print {
  position: relative;
  justify-self: center;
  width: min(100%, 15rem);
  margin: 0;
  rotate: 3deg;
}

.about__print-photo {
  position: relative;
  padding: 0.6rem 0.6rem 2.25rem;
  background: var(--color-paper);
  box-shadow: var(--shadow-print);
}

.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about__sticker {
  position: absolute;
  left: -2.25rem;
  bottom: 1.5rem;
  width: 7rem;
  height: auto;
  rotate: -12deg;
  filter: drop-shadow(0 4px 6px rgba(38, 38, 30, 0.25));
}

.about__caption {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
  text-align: end;
}

.about__name {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-subtitle);
  line-height: 1.3;
  color: var(--color-text);
}

.about__role {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

@media (min-width: 37.5rem) {
  .about__grid {
    grid-template-columns: minmax(0, 36rem) auto;
    justify-content: center;
    gap: var(--space-2xl) var(--space-3xl);
  }

  .about__print {
    order: 2;
    width: 13rem;
  }
}

@media (min-width: 60rem) {
  .about__print {
    width: 15rem;
  }
}

/* Porte des producteurs (dernière section de l'accueil) : le seul aplat
   olive de la page */
.producers__panel {
  display: grid;
  gap: var(--space-xl);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-olive);
  color: var(--color-cream);
}

.producers__eyebrow {
  color: var(--color-night-focus);
}

.producers__title {
  margin-top: var(--space-sm);
  color: var(--color-cream);
}

.producers__panel :focus-visible {
  outline-color: var(--color-night-focus);
}

/* Le trait d'union. Deux cartes papier, les producteurs à gauche et les
   acheteurs à droite. Empilées sur mobile, côte à côte et rapprochées dès
   960 px (sans logo ni flèches entre elles depuis le 2026-09-30). */
/* Cartes du trait d'union, textes d'Amaury (2026-10-05), alignés à gauche
   (Chris, 2026-10-06 : le centrage des lignes n'était pas harmonieux).
   Échelle : surtitre (13 px) ; titre en deux phrases de 24 px, la seconde
   en olive comme l'accroche des pages acheteurs et producteurs, chacune sur
   une ligne dès 1100 px ; présentation en Body grisé ; quatre lignes en Body
   sous filets, chacune ouverte par un point olive comme les points de la
   carte ; conclusion en Small ; bouton à gauche. */
.bridge {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

.bridge__card {
  display: grid;
  align-content: start;
  width: 100%;
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.bridge__title {
  margin-top: var(--space-sm);
  font-size: 1.5rem;
  line-height: var(--leading-subhead);
  font-weight: var(--weight-headline);
  /* Pas d'équilibrage des lignes (titres du site, base.css) : chaque phrase
     tient sur sa ligne dès que la carte le permet. */
  text-wrap: pretty;
}

/* Seconde phrase du titre d'Amaury sur sa propre ligne, en olive. */
.bridge__title-line {
  display: block;
  color: var(--color-accent);
}

.bridge__who {
  margin-top: var(--space-md);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.bridge__lines {
  display: grid;
  width: 100%;
  margin-top: var(--space-lg);
  list-style: none;
  padding: 0;
}

.bridge__lines li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-top: var(--rule-width) solid var(--color-rule);
}

.bridge__lines li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((var(--leading-body) * 1em - 0.5rem) / 2);
  border-radius: var(--radius-full);
  background: var(--color-olive);
}

.bridge__lines li:last-child {
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.bridge__closing {
  margin-top: var(--space-lg);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-text-muted);
}

.bridge__cta {
  justify-self: start;
  margin-top: var(--space-xl);
}

@media (min-width: 60rem) {
  /* Les deux cartes partagent les rangées de la grille (sous-grille) :
     titres, présentations, listes, conclusions et boutons s'alignent d'une
     carte à l'autre ; les espaces viennent des marges de chaque bloc. */
  .bridge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: var(--space-xl);
    row-gap: 0;
    max-width: var(--container);
    margin-inline: auto;
  }

  .bridge__card {
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
    max-width: none;
    padding: var(--space-2xl) var(--space-2xl) var(--space-2xl);
  }

  .bridge__card:first-child {
    grid-column: 1;
  }

  .bridge__card:last-child {
    grid-column: 2;
  }

  .bridge__cta {
    align-self: end;
  }
}

/* Les trois conditions de sélection : un pictogramme cerclé d'olive
   au-dessus de chacune ; dès 768 px, côte à côte et reliées par le pointillé
   des trajets de la carte, qui va d'un pictogramme au suivant sans passer
   dessous. Empilées sous filets fins en dessous. Choisi par Chris le
   2026-09-30. */
/* Toute la largeur du site : chaque titre de critère tient sur une ligne
   (« Un potentiel commercial. », Amaury, 2026-10-05). */
.criteria {
  display: grid;
  max-width: var(--container);
  margin-inline: auto;
}

.criteria__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-top: var(--rule-width) solid var(--color-rule);
  text-align: center;
}

.criteria__item:last-child {
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.criteria__marker {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-md);
  border: 1.5px solid var(--color-olive);
  border-radius: var(--radius-full);
  color: var(--color-olive);
}

/* Titres de bloc de l'accueil à 24 px : critères, accroches du métier,
   cartes du trait d'union (passe d'harmonisation, Chris, 2026-10-06). */
.criteria__term {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-headline);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--color-text);
}

/* 21 rem : dès 1280 px, le dernier mot du troisième critère d'Amaury ne
   tombe plus seul sur une sixième ligne (Chris, 2026-10-06). */
.criteria__text {
  max-width: 21rem;
  margin: 0 auto;
  color: var(--color-text-muted);
}

/* Trois colonnes dès 960 px, comme les étapes du métier : à 768 px, elles
   étaient trop étroites (titres coupés, textes sur six lignes ; 2026-10-05). */
@media (min-width: 60rem) {
  .criteria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .criteria__item {
    padding: var(--space-sm) var(--space-lg);
    border-top: 0;
  }

  .criteria__item:last-child {
    border-bottom: 0;
  }

  .criteria__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--space-sm) + 1.75rem - 1px);
    left: calc(50% + 1.75rem + var(--space-sm));
    width: calc(100% - 3.5rem - 2 * var(--space-sm));
    height: 2px;
    background: repeating-linear-gradient(to right, var(--color-olive-leaf) 0 2px, transparent 2px 8px);
  }
}

/* Deux portes en bas de l'accueil (2026-10-01) : une par public, vers le
   formulaire de sa page ; la carte papier pour les acheteurs, l'aplat olive
   pour les producteurs, de même hauteur, le bouton en bas. */
.doors__grid {
  display: grid;
  gap: var(--space-xl);
}

.door {
  display: grid;
  align-content: space-between;
  gap: var(--space-xl);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
}

.door--buyers {
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-surface);
}

.door__title {
  margin-top: var(--space-sm);
  font-size: var(--text-subhead);
  line-height: 1.2;
}

.door__cta {
  justify-self: start;
}

@media (min-width: 60rem) {
  .doors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

/*
 * Pages acheteurs et producteurs (Chris, 2026-10-01) : le système de
 * l'accueil en deux temps, sans photo (audience/_page.html.twig). L'en-tête
 * suit le hero (mêmes rôles et mêmes tailles, règles partagées plus haut),
 * l'essentiel en étapes empilées dessous ; le formulaire à droite dès
 * 1100 px, comme l'image carrée du hero. Puis une section de l'accueil.
 */
/* Sous le menu, le même air que l'accueil (jeton --page-top). */
.audience-hero {
  padding-block: var(--page-top) var(--space-3xl);
}

/* Grille (texte, formulaire, l'essentiel dessous) et carte du formulaire :
   .form-split et .form-card, partagées avec la page contact (components.css). */

/* Écarts de l'en-tête : l'accroche seule, puis le titre et son texte
   ensemble (choisi par Chris le 2026-10-01 parmi trois réglages). */
.audience-hero__hook {
  margin-top: var(--space-md);
}

.audience-hero__title {
  margin-top: var(--space-xl);
}

.audience-hero__lead {
  margin-top: var(--space-md);
}

@media (min-width: 68.75rem) {
  /* Le formulaire, plus haut que la colonne de gauche, finit le bloc : la
     section suivante garde seulement son propre espace au-dessus (Chris,
     2026-10-01 : elle paraissait trop basse). */
  .audience-hero {
    padding-bottom: 0;
  }
}

/* L'illustration de la page, sous le texte (choisie par Chris le 2026-10-01
   parmi trois emplacements). Son fond est ramené au crème du site
   (tools/images) : aucun cadre ne se voit. */
.audience-hero__media {
  display: block;
  margin-top: var(--space-xl);
}

.audience-hero__media img {
  width: 100%;
  height: auto;
}

/*
 * Approche 2 : fonds des sections (validé par Chris le 2026-09-29). Une
 * section sur deux reste sur le papier crème ; les autres portent un halo en
 * comète, d'une seule couleur, jaune doré et vert sauge en alternance : tête
 * ronde sur la première carte, qui déborde un peu du contenu, et queue vers
 * le coin opposé du contenu (sun-comet.svg, en masque sur la couleur). Le
 * dessin est calé sur la colonne de contenu (largeur --cw), pas sur l'écran,
 * et retourné d'une section à l'autre pour varier la direction.
 */
.section--halo {
  position: relative;
  isolation: isolate;
  background: var(--color-bg);
  --sun: color-mix(in oklab, var(--wash) var(--sun-strength, 40%), transparent);
  --cw: min(var(--container), 100vw - 2 * var(--gutter));
  --fade-y: min(7rem, 20%);
}

/* Le dessin couvre le contenu et 25 % de sa largeur en plus du côté de la
   tête, 5 % de l'autre ; il s'efface en haut et en bas de la section. */
.section--halo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sun);
  -webkit-mask-image: url("../images/ui/sun-comet-qhQxOkK.svg"), linear-gradient(to bottom, transparent, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent);
  -webkit-mask-size: calc(var(--cw) * 1.3) 100%, 100% 100%;
  -webkit-mask-position: calc(50% - var(--cw) * 0.1) 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url("../images/ui/sun-comet-qhQxOkK.svg"), linear-gradient(to bottom, transparent, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent);
  mask-size: calc(var(--cw) * 1.3) 100%, 100% 100%;
  mask-position: calc(50% - var(--cw) * 0.1) 0, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  transform: var(--sun-flip, none);
  pointer-events: none;
}

/* Métier, sous le hero : jaune, du haut à gauche vers le bas à droite ;
   léger, rien ne couvre son fond. */
.metier.section--halo {
  --wash: var(--color-halo-gold);
  --sun-strength: 26%;
}

/* Critères : vert, du haut à droite vers le bas à gauche. Le vert est presque
   aussi clair que le crème : plus dosé que le jaune, mais un peu plus
   transparent que lui à l'œil (demande de Chris). */
.criteria-section.section--halo {
  --wash: var(--color-halo-sage);
  --sun-strength: 60%;
  --sun-flip: scaleX(-1);
}

/* Produits : jaune, du bas à gauche vers le haut à droite. */
.selection.section--halo {
  --wash: var(--color-halo-gold);
  --sun-strength: 34%;
  --sun-flip: scaleY(-1);
}

/* Deux portes : vert, du bas à droite vers le haut à gauche. */
.doors.section--halo {
  --wash: var(--color-halo-sage);
  --sun-strength: 60%;
  --sun-flip: scale(-1, -1);
}

/* Mobile : sections hautes et étroites. Le halo garde une zone à peine plus
   haute que large, posée du côté de sa tête (en haut ou en bas). */
@media (max-width: 47.99rem) {
  .section--halo::before {
    height: min(100%, 150vw);
  }

  :is(.metier, .criteria-section).section--halo::before {
    inset-block: 0 auto;
  }

  :is(.selection, .doors).section--halo::before {
    inset-block: auto 0;
  }
}