/* ==========================================================================
   Boucherie Bocquet · boucheriebocquet.fr
   Source de vérité visuelle : resources/design-system/ (README.md, tokens.json)
   ========================================================================== */

/* ---- Fontes (auto-hébergées, fontes variables) -------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../fonts/archivo-narrow-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
  /* Couleurs de marque */
  --taupe: #93715d;
  --taupe-deep: #6e5444;
  --taupe-soft: #b89d8c;
  --taupe-tint: #eadfd6;

  /* Fonds papier */
  --paper: #fbf8f4;
  --paper-2: #f4ece3;
  --paper-3: #ece0d4;
  --surface: #fff;

  /* Encres */
  --ink: #2b2521;
  --ink-2: #6b5e54;
  --ink-3: #8c7f74;

  /* Sur fond ink : la famille qui rend une bande sombre lisible */
  --on-ink: #ffffff;
  --on-ink-2: #e5d7c8;
  --on-ink-3: #c9b6a4;
  --on-ink-accent: #e4cbb6;

  /* Accent « cachet de cire » : un seul par vue */
  --bordeaux: #7a2e2e;
  --bordeaux-deep: #5e2323;

  /* Filets, rayons, ombres */
  --line: #e2d5c7;
  --line-strong: #cdbba9;
  --focus-field: 0 0 0 3px #eadfd6;
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 12px;
  --shadow-md: 0 2px 12px rgba(43, 37, 33, 0.08);

  /* Typo */
  --font-display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Rythme 8px */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
}

/* ---- Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s-3);
}

p {
  margin: 0 0 var(--s-2);
}

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

a {
  color: var(--taupe-deep);
  text-decoration-color: var(--taupe-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms ease-out, text-decoration-color 200ms ease-out;
}

a:hover {
  color: var(--taupe);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--taupe);
}

:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 3px;
}

:target {
  scroll-margin-top: 6rem;
}

/* ---- Helpers --------------------------------------------------------------- */

.container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.container--narrow {
  max-width: 720px;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
  margin: 0 0 var(--s-2);
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  background: var(--surface);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  z-index: 10;
}

/* ---- Boutons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: var(--r-sm);
  transition: background-color 200ms ease-out, color 200ms ease-out,
    transform 150ms ease-out;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--bordeaux);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--bordeaux-deep);
  color: var(--paper);
}

.btn--ghost {
  color: var(--taupe-deep);
  box-shadow: inset 0 0 0 1px var(--taupe-soft);
}

.btn--ghost:hover {
  color: var(--taupe-deep);
  box-shadow: inset 0 0 0 1px var(--taupe-deep);
}

/* ---- En-tête ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* Barre plus resserrée que le conteneur général : mesuré, l'en-tête tient en
   810 px environ, contre 1032 px de contenu disponible. */
.site-header .container {
  max-width: 60rem;
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-2);
}

.brand {
  text-decoration: none;
  text-align: center;
  color: var(--taupe);
  line-height: 1;
}

.brand:hover {
  color: var(--taupe-deep);
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
}

.brand__descriptor {
  /* Casse de phrase : le design system réserve les capitales au wordmark */
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  margin-top: 2px;
  /* taupe-deep et non ink-2 : meme teinte et meme saturation que le
     wordmark juste au-dessus, alors qu'ink-2 est deux fois moins sature
     et tire vers le gris a cote du brun de marque. 6,6:1 sur paper. */
  color: var(--taupe-deep);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  row-gap: var(--s-1);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 2px;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.site-nav a:hover {
  color: var(--taupe-deep);
  border-bottom-color: var(--taupe);
}

.site-nav a[aria-current="page"] {
  color: var(--taupe-deep);
  border-bottom-color: var(--taupe);
}

.lang-switch {
  /* margin : sinon la marge basse du <p> décale le texte vers le haut
     quand la barre s'aligne en ligne. text-align : sinon il se cale à
     gauche dans la colonne empilée du mobile. */
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}

.lang-switch a,
.lang-switch [aria-current="true"] {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 2px;
  border-bottom: 2px solid transparent;
}

.lang-switch [aria-current="true"] {
  font-weight: 700;
  color: var(--taupe-deep);
  border-bottom-color: var(--taupe);
}

@media (min-width: 880px) {
  /* Barre fine collante : uniquement là où l'en-tête tient sur une ligne */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-header .brand {
    text-align: left;
  }

  .site-header__right {
    display: flex;
    /* baseline, pas center : les deux blocs n'ont pas la même hauteur de ligne,
       centrer leurs boîtes décale le texte de quelques pixels. */
    align-items: baseline;
    gap: var(--s-3);
  }
}

/* ---- Héros ----------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding-block: var(--s-6) var(--s-6);
  /* Mesure commune : la photo ne dépasse jamais le bloc de texte */
  --hero-measure: 45rem;
}

/* Sous 880px l'en-tête s'empile sur quatre lignes et devient un bloc haut :
   s-8 au-dessus du héros ouvrait un vide qui mangeait le quart de l'écran,
   et faisait paraître la page d'accueil plus creuse que les intérieures.
   À partir de 880px l'en-tête redevient une barre fine, et s-8 est tenu. */
@media (min-width: 880px) {
  .hero {
    padding-block: var(--s-8) var(--s-6);
  }
}

.hero h1 {
  font-size: clamp(2.625rem, 7vw, 4.75rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-3);
}

.hero__lede {
  font-size: 1.1875rem;
  color: var(--ink-2);
  max-width: var(--hero-measure);
  margin-inline: auto;
}

/* Relais dans l'autre langue : la page de confirmation du formulaire est unique
   et sert les deux versions du site, le filet separe les deux langues. */
.hero__lede--en {
  font-size: 1rem;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* L'ardoise : « en ce moment a la boucherie », sous les boutons du heros. Le
   contenu change au fil des semaines, la forme ne bouge pas.

   Fond ink, et c'est le seul moment sombre de la page : il repond au
   clair-obscur de la photo du heros juste au-dessus, au lieu du blanc d'une
   carte, qui ne veut rien dire ici — une carte se pose dans une grille, pas
   seule au milieu d'un heros.

   Pas de bordeaux : sur l'encre il tombe a 2,2:1 et disparait, et dans cette
   vue le bouton principal est deja le seul moment bordeaux. Ce sont les trois
   tons chauds de la famille on-ink qui portent la mise en valeur. */
/* 38rem, et non la mesure du heros : a 45rem l'ardoise faisait 720px et
   depassait la photo du heros, qui en fait 671. Le deuxieme bloc sombre de la
   page passait plus large que le premier, et la photo cessait de dominer.
   608px la tiennent franchement en dedans.

   Ce n'est pas la largeur des boutons : les memes deux boutons mesurent 523px
   en francais et 359px en anglais, et s'y accrocher donnait une ardoise trop
   etroite des que le libelle etait court. Essaye, mesure, ecarte. */
.now {
  max-width: 38rem;
  margin: var(--s-6) auto 0;
  padding: var(--s-4) var(--s-3);
  background: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.now__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--on-ink);
  margin: 0;
}

.now__lede {
  font-size: 1.0625rem;
  color: var(--on-ink-2);
  margin: var(--s-2) 0 0;
}

/* La liste reprend le motif maison des races, transpose sur l'encre.

   Elle a porte une bride de 30rem tant que l'encart faisait 45rem de large :
   elle forcait la coupure en 3 + 2 plutot qu'en 4 + 1. L'encart suit
   desormais la largeur des boutons, 523px en francais, et sa mesure interieure
   passe sous les 30rem : la bride ne servait plus rien. */
.now .breeds {
  margin: var(--s-3) auto 0;
  color: var(--on-ink-accent);
}

.now .breeds > li:not(:last-child)::after {
  color: var(--on-ink-3);
}

.now__note {
  font-size: 0.9375rem;
  color: var(--on-ink-3);
  max-width: 44ch;
  margin: var(--s-3) auto 0;
}

/* Une phrase qui annonce sa liste se colle a elle : l'ecart de section les
   separait alors qu'elles forment un seul mouvement. */
.now__note + .breeds {
  margin-top: var(--s-1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.photo.hero__media {
  width: 100%;
  max-width: var(--hero-measure);
  margin: var(--s-4) auto;
}

.hero__media .photo__frame {
  /* Rapport, pas hauteur fixe : une hauteur figée rendait le cadre presque
     carré sur téléphone et rognait la moitié de la largeur des images, qui
     sont en 2:1. 21/10 reprend exactement la proportion du rendu desktop et
     ne rogne jamais sur les côtés. */
  aspect-ratio: 21 / 10;
}

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

/* Remonte la fenetre du cadre quand le sujet se tient haut dans la photo.
   Le cadre masque 92px en haut et autant en bas a 50 % ; 38 % en laisse 70,
   soit 22px de contenu gagnes vers le haut. On deplace la fenetre, on ne
   recadre pas le fichier : recadrer couterait 9 % de largeur. */
.hero__media--high img {
  object-position: center 38%;
}

/* Exception : une photo dont le sujet tient sur la hauteur ne supporte
   pas le 21/10, qui la rognerait de 37 %. Le cadre prend alors le
   rapport du fichier, decide a l export. */
.hero__media--tall .photo__frame {
  aspect-ratio: auto;
}

.hero__media--tall img {
  height: auto;
}

@media (min-width: 720px) {
  .photo.hero__media {
    width: 65%;
  }
}

/* ---- Emplacements photo (placeholders légendés) ------------------------------------- */

.photo {
  margin: 0;
}

.photo__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.photo__frame img {
  width: 100%;
  transition: transform 250ms ease-out;
}

/* Photo qui agremente un texte : plus etroite que la colonne, comme
   la devanture sur la page contact. */
.photo--inset {
  max-width: 34rem;
  margin: var(--s-4) auto;
}

.photo--placeholder .photo__frame {
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  box-shadow: none;
}

.photo--placeholder .photo__frame > span {
  font-style: italic;
  color: var(--ink-2);
  padding: var(--s-3);
  text-align: center;
}

.photo figcaption {
  font-size: 0.875rem;
  color: var(--ink-2);
  text-align: center;
  padding-top: var(--s-1);
}

/* ---- Sections ------------------------------------------------------------------------ */

.section {
  padding-block: var(--s-8);
}

/* Filet de separation : pour une section que ni fond creuse ni bande ne
   distingue de la precedente. Dans le conteneur et non en pleine largeur,
   pour s'aligner sur le contenu ; la section perd son padding haut, que le
   conteneur reprend sous le filet. */
.section--ruled {
  padding-top: 0;
}

.section--ruled > .container {
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}

.section__head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--s-6);
}

.section__head h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.section__head p {
  color: var(--ink-2);
}

/* Piliers */

.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.pillars > li {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

.pillars h3 {
  font-size: 1.25rem;
  margin-bottom: var(--s-1);
}

.pillars p {
  color: var(--ink-2);
  margin: 0;
}

@media (min-width: 720px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }
}

/* Bandeau kraft : bœufs d'exception */

.band {
  background: var(--paper-3);
  padding-block: var(--s-8);
  text-align: center;
}

/* La photo qui ferme la bande : bridee, sinon elle ecrase la liste. */
.band__photo {
  max-width: 45rem;
  margin: var(--s-6) auto 0;
}

.band h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.band__intro {
  color: var(--ink-2);
  max-width: 40em;
  margin-inline: auto;
}

.breeds {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: var(--s-2);
  row-gap: var(--s-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--taupe-deep);
}

.breeds a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.breeds a:hover {
  color: var(--taupe-deep);
  border-bottom-color: var(--taupe-soft);
}

.breeds > li:not(:last-child)::after {
  content: "·";
  margin-left: var(--s-2);
  color: var(--taupe-soft);
}

/* Pages race : cartes, blocs, navigation */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 250ms ease-out, transform 250ms ease-out;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(43, 37, 33, 0.13);
  transform: translateY(-2px);
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__media > span {
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: var(--s-2);
}

/* Fleche des liens d'invitation. Dessinee en SVG inline et teintee par
   currentColor : les polices du site sont sous-ensemblees et n'ont pas
   le caractere U+2192, que le navigateur rendait en carre. */
.card__more::after,
.go-links a::after {
  content: "";
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.42em;
  vertical-align: -0.06em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 200ms ease-out;
}

.card:hover .card__more::after,
.go-links a:hover::after {
  transform: translateX(3px);
}

/* Liens d'invitation : une ligne chacun, dans le registre de card__more. */
.go-links {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.go-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.go-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.card__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h3 {
  font-size: 1.375rem;
  margin: 0 0 var(--s-1);
}

.card h3 a {
  color: var(--ink);
  text-decoration: none;
}

/* Carte entierement cliquable : le lien du titre couvre la carte. Un seul
   lien pour un lecteur d ecran, mais toute la surface repond, y compris
   la ligne card__more qui n en est pas un. */
.card--link {
  position: relative;
}

.card--link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:hover h3 a {
  color: var(--taupe-deep);
}

.card__body > p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0;
}

.card__more {
  margin-top: var(--s-3) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--taupe) !important;
}

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

@media (min-width: 1080px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Deux colonnes au lieu de trois : pour un jeu de quatre cartes, 2x2 plutot
   qu une rangee de trois et une orpheline ; pour un jeu de deux, une paire
   plutot que deux cartes et un vide. */
@media (min-width: 1080px) {
  .cards--pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bride la grille et la centre : des cartes plus petites quand la page le
   demande. Se pose en plus de cards--pair, jamais seule. */
@media (min-width: 1080px) {
  .cards--narrow {
    max-width: 45rem;
    margin-inline: auto;
  }
}

.tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bordeaux);
  margin: 0 0 var(--s-1);
}

.hero--compact {
  padding-block: var(--s-4) var(--s-3);
}

.hero--compact h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  margin-bottom: var(--s-2);
}

.hero--compact .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.hero--compact .eyebrow a:hover {
  color: var(--taupe-deep);
  text-decoration: underline;
}

.hero__photo-wide {
  margin-top: var(--s-4);
}

.section--sunk {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}

.breed-blocks {
  display: grid;
  gap: var(--s-6);
}

.breed-block h2 {
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--taupe);
  margin: 0 0 var(--s-1);
}

.breed-block p {
  color: var(--ink-2);
  margin: 0 0 var(--s-2);
}

.breed-block p:last-child {
  margin-bottom: 0;
}

@media (min-width: 880px) {
  .breed-block {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s-6);
    align-items: start;
  }

  .breed-block h2 {
    margin-top: 6px;
  }
}

.chip-nav-section {
  border-top: 1px solid var(--line);
}

.chip-nav__title {
  text-align: center;
  margin-bottom: var(--s-3);
}

/* La barre reprise au sein d'une section, apres les piliers. */
.chip-nav__title--spaced {
  margin-top: var(--s-6);
}

.chip-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-2);
}

.chip-nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 15px;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.chip-nav a:hover {
  color: var(--taupe-deep);
  border-color: var(--taupe-soft);
}

.chip-nav a[aria-current="page"] {
  color: var(--taupe-deep);
  border-color: var(--taupe);
}

/* Blocs éditoriaux (produits, histoire) et tableaux de caractéristiques */

.prose-blocks {
  display: grid;
  gap: var(--s-6);
}

.prose-block {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

/* Le premier bloc d'une section n'a rien a separer de ce qui precede. */
.prose-blocks:first-child > .prose-block:first-child {
  border-top: none;
  padding-top: 0;
}

/* Deux groupes qui se suivent : le filet du second collait au texte du premier. */
.prose-blocks + .prose-blocks {
  margin-top: var(--s-6);
}

.prose-block h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-bottom: var(--s-2);
}

.prose-block p {
  color: var(--ink-2);
}

.prose-block p:last-child {
  margin-bottom: 0;
}

/* Extrait de texte publié : présenté d'un bloc, sans découpe ni sous-titres */

.extract {
  max-width: 36em;
  margin-inline: auto;
}

/* Un texte de livre se lit mieux en romain : exception assumée à la
   superfamille Archivo, limitée à ce bloc. Pile système, donc aucun
   téléchargement. Justifié avec césure, sans quoi le français creuse
   des rivières de blanc. */

.extract p {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.68;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

.extract p:last-child {
  margin-bottom: 0;
}

.extract__source {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.notice {
  background: var(--paper-2);
  border: 1px dashed var(--taupe-soft);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-top: var(--s-6);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink-2);
}

.notice p:last-child {
  margin-bottom: 0;
}

.pull-quote {
  margin: var(--s-8) 0;
  text-align: center;
}

.pull-quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--taupe-deep);
  margin: 0 0 var(--s-2);
}

.pull-quote footer {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
}

.specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-3);
}

.specs th,
.specs td {
  text-align: left;
  font-weight: 400;
  font-size: 0.9375rem;
  padding: 9px var(--s-2) 9px 0;
  border-bottom: 1px solid var(--line);
}

.specs thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--taupe);
}

.specs tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

.specs td {
  color: var(--ink-2);
}

/* Section média + texte (charcuterie maison) */

.split {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}

.split__text .eyebrow {
  margin-bottom: var(--s-1);
}

.split__text h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.split__text p {
  color: var(--ink-2);
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

/* ---- Infos pratiques -------------------------------------------------------------------- */

.practical {
  border-top: 1px solid var(--line);
}

.practical__grid {
  display: grid;
  gap: var(--s-6);
}

.practical h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.hours {
  width: 100%;
  border-collapse: collapse;
}

.hours caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--taupe);
  padding-bottom: var(--s-2);
}

.hours th,
.hours td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

.hours th {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-right: var(--s-3);
  white-space: nowrap;
}

.hours td {
  color: var(--ink);
}

.hours .hours--closed td {
  color: var(--ink-2);
}

.contact-card p {
  margin-bottom: var(--s-2);
}

.contact-card .address {
  font-style: normal;
  color: var(--ink-2);
}

.photo-pair {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

@media (min-width: 720px) {
  .photo-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card__phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--taupe-deep);
}

.contact-card__phone:hover {
  color: var(--taupe);
}

@media (min-width: 880px) {
  .practical__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
    /* Sans ceci, le tableau des horaires est étiré à la hauteur de la
       colonne voisine et écarte ses propres rangées. */
    align-items: start;
  }
}

/* ---- Page contact ---- */

.contact-main {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

/* La photo de devanture remplit sa colonne : bridee a 24rem elle etait
   plus etroite que son conteneur comme que le croquis pose dessous. */
.contact-photo {
  max-width: 34rem;
  margin: 0 auto var(--s-3);
}

.contact-block {
  margin-top: var(--s-6);
}

/* Croquis de situation : dessin editorial, pas une photo.
   Ni cadre arrondi ni ombre, il est exporte aplati sur --paper. */
.sketch {
  margin: 0;
}

.sketch img {
  display: block;
  width: 100%;
  height: auto;
}

/* Page contact : le croquis y est un complement, pas le sujet. */
.sketch--compact {
  max-width: 32rem;
  margin-inline: auto;
}

.section--tight {
  padding-block: var(--s-3) var(--s-6);
}

.hero__address {
  font-style: normal;
  font-size: clamp(1.375rem, 3.4vw, 1.875rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.parking {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--taupe-deep);
  margin: 0;
}



.phone-lg {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-decoration: none;
  color: var(--taupe-deep);
  padding-block: var(--s-1);
}

.phone-lg:hover {
  color: var(--taupe);
}

.contact-line {
  font-style: normal;
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.map-note {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: var(--s-4) 0 0;
}

/* Champs : promus de components/extra.css, ou ils attendaient le formulaire. */

/* minmax(0, 1fr) et non 1fr : une colonne auto se dimensionne sur le max-content
   de son contenu, et le textarea deborde alors le conteneur sur telephone. */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

@media (min-width: 560px) {
  .form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-3);
  }
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

/* ink-2 et non ink-3 (PDF) : un libelle doit se lire */
.field__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field__label span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.field__control {
  position: relative;
}

.field__input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

textarea.field__input {
  min-height: 9rem;
  max-width: 100%;
  resize: vertical;
}

.field__input::placeholder {
  color: var(--ink-3);
}

.field__input:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: var(--focus-field);
}

.field__hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
}

/* Le bouton d'envoi est un <button> : lui retirer le chrome natif, et l'empecher
   de s'etirer sur toute la grille comme le font les autres enfants. */
button.btn {
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.form .btn {
  justify-self: start;
}

/* Mention d'information sous le bouton, bridee a la mesure de lecture pour ne
   pas courir sur toute la largeur. Elle reste en ink-2 : ink-3 ne tient que
   3,7:1 et la charte le reserve au texte qu'on n'a pas besoin de lire. Une
   mention RGPD est exactement l'inverse. */
.form__privacy {
  max-width: 52ch;
  margin-top: var(--s-1);
}

/* Piege a robots : hors de l'ecran, hors du clavier, hors de l'arbre d'accessibilite. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Pied de page -------------------------------------------------------------------------- */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  margin-top: var(--s-8);
  padding-block: var(--s-8) var(--s-6);
  text-align: center;
}

.logo-lockup {
  display: inline-block;
  line-height: 0;
}

.logo-lockup img {
  width: clamp(200px, 44vw, 292px);
  height: auto;
  transition: filter 200ms ease-out;
}

.logo-lockup:hover img {
  filter: brightness(0.88);
}

.site-footer .address {
  font-style: normal;
  color: var(--ink-2);
  margin-top: var(--s-3);
}

.site-footer__nav ul {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}

/* Les entrees secondaires sur une ligne a elles : flex-basis 100% force le
   retour dans la grille souple du pied de page, et justify-content la garde
   centree. La liste imbriquee les tient ensemble sur cette ligne plutot que
   de les empiler. */
.site-footer__nav .nav-break {
  flex-basis: 100%;
  margin-top: var(--s-1);
}

.site-footer__nav .nav-break ul {
  margin: 0;
}

/* Le meme point median que le selecteur de langue. Decoratif : il separe,
   il ne se lit pas, d'ou ink-3.

   Seulement a partir de 560px : en dessous, les deux entrees ne tiennent pas
   sur une ligne et retombent l'une sous l'autre. Le point partait alors avec
   la seconde et se retrouvait seul en tete de ligne, ou il se lit comme une
   coquille. Empilees sans point, elles sont justes. */
@media (min-width: 560px) {
  /* Resserre l'ecart : le point et ses deux marges separent mieux que l'ecart
     seul, et s-3 de chaque cote l'eloignerait des deux libelles. */
  .site-footer__nav .nav-break ul {
    column-gap: var(--s-2);
  }

  .site-footer__nav .nav-break li + li::before {
    content: "\00b7";
    margin-right: var(--s-2);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    /* Le point median se centre sur la hauteur d'x ; autour de lui tout est
       en capitales. On le remonte sur l'axe des capitales. */
    vertical-align: 0.08em;
    color: var(--ink-3);
  }
}

.site-footer__nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink-2);
}

.site-footer__nav a:hover {
  color: var(--taupe-deep);
}

.social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 11px;
  color: var(--taupe);
  text-decoration: none;
  transition: color 200ms ease-out;
}

.social a:hover {
  color: var(--taupe-deep);
}

.social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Variante avec intitulé, utilisée sur la page contact */

.social--labelled {
  gap: var(--s-3);
  margin-top: 0;
}

.social--labelled a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--taupe-soft);
  border-radius: var(--r-sm);
  padding: 12px 22px;
  transition: color 200ms ease-out, box-shadow 200ms ease-out;
}

.social--labelled a:hover {
  color: var(--taupe-deep);
  box-shadow: inset 0 0 0 1px var(--taupe-deep);
}

.social--labelled svg {
  width: 18px;
  height: 18px;
}

.site-footer__legal {
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: var(--s-4) 0 0;
}

/* ---- Mouvement réduit ------------------------------------------------------------------------ */

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