/* =====================================================================
   valais-nature.ch — feuille de style unique
   =====================================================================
   Direction : le vocabulaire du balisage alpin suisse. Fond blanc froid
   comme le papier des cartes nationales, encre bleu-nuit, bleu glacier
   pour le secondaire, et un seul accent — le rouge des marques
   blanc-rouge-blanc peintes sur les rochers le long des itinéraires.

   Ce trait blanc-rouge-blanc est le motif signature du site : il marque
   les surtitres et les séparations. Il ne décore pas, il signale, comme
   sur le terrain.

   Typo : Archivo à chasse élargie pour les titres, comme les cartouches
   des cartes nationales ; Spline Sans pour le texte courant ; IBM Plex
   Mono pour toute mesure (coordonnées, altitudes) — une donnée doit se
   lire comme une donnée.
   ===================================================================== */

:root {
  --papier:   #f5ecdf;
  --papier2:  #e8dccd;
  --ivoire:   #fffaf2;
  --sable:    #ead5b8;
  --encre:    #24312a;
  --ardoise:  #637169;
  --glacier:  #91a99b;
  --sapin:    #315044;
  --ocre:     #c88d43;
  --blaze:    #b84a32;

  --pas:      clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  --marge:    clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --large:    72rem;

  --display: 'Archivo', system-ui, sans-serif;
  --texte:   'Spline Sans', system-ui, sans-serif;
  --mesure:  'IBM Plex Mono', ui-monospace, monospace;
}

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

/* Toute règle `display` l'emporterait sinon sur l'attribut `hidden`, et des
   éléments masqués en JavaScript resteraient visibles — c'est ce qui faisait
   apparaître le bouton de modération aux membres non administrateurs. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--ocre) 7%, transparent), transparent 28rem),
    var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

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

/* --- Titres ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.125rem; font-variation-settings: 'wdth' 108; }

/* Surtitre précédé de la marque de balisage blanc-rouge-blanc. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mesure);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 0.9rem;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 22px;
  height: 9px;
  background: linear-gradient(
    to bottom,
    #fff 0 33.33%,
    var(--blaze) 33.33% 66.66%,
    #fff 66.66% 100%
  );
  border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent);
}

/* =====================================================================
   Barre de navigation
   ===================================================================== */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--pas);
  padding: 0.45rem var(--marge);
  background: color-mix(in srgb, var(--ivoire) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
  box-shadow: 0 3px 18px color-mix(in srgb, var(--encre) 5%, transparent);
}

.marque {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.marque span { color: var(--blaze); }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ardoise);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.menu a:hover { color: var(--encre); }

.menu a[aria-current='page'] {
  color: var(--encre);
  border-bottom-color: var(--blaze);
}

@media (max-width: 40rem) {
  .entete { gap: .6rem; padding-inline: .7rem; }
  .menu { gap: .55rem; }
  .menu a { font-size: .74rem; }
  .marque { font-size: .8rem; }
  .menu { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; }
  /* La marque mène déjà à l'accueil : en étroit, le lien Accueil est
     redondant. */
  .menu li:first-child { display: none; }
}

/* Téléphones : cinq entrées dont « Produits du terroir » — chaque pixel
   compte pour tenir sur une seule ligne. */
@media (max-width: 27rem) {
  .entete { gap: .45rem; padding-inline: .5rem; }
  .menu { gap: .42rem; }
  .menu a { font-size: .67rem; }
  .marque { font-size: .73rem; }
}

/* =====================================================================
   Accueil — section d'ouverture
   ===================================================================== */

.hero {
  position: relative;
  min-height: 82svh;
  display: grid;
  align-items: end;
  padding: 0 var(--marge) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--papier2);
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

/* Le relief du Valais en imagerie satellite, rendu en direct et en volume.
   Le sujet du site est le terrain : autant le montrer que le décrire. */
#relief-accueil {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Voile clair. Le haut est volontairement dense : il noie l'horizon et la
   limite des tuiles chargées dans une brume, comme un fond de vallée vu
   depuis un col. Le centre droit reste net, la gauche s'éclaircit pour
   porter le texte. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--papier) 0%,
      color-mix(in srgb, var(--papier) 72%, transparent) 16%,
      color-mix(in srgb, var(--papier) 12%, transparent) 40%,
      color-mix(in srgb, var(--papier) 12%, transparent) 58%,
      color-mix(in srgb, var(--papier) 70%, transparent) 88%,
      var(--papier) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--papier) 94%, transparent) 0%,
      color-mix(in srgb, var(--papier) 76%, transparent) 28%,
      color-mix(in srgb, var(--papier) 20%, transparent) 52%,
      transparent 68%);
}

/* Sur écran étroit, le texte occupe toute la largeur : superposé à
   l'imagerie, il devient illisible — les étiquettes de villages traversent
   les lettres. Aucun dégradé ne rattrape ça sans effacer la photo.
   On change donc de disposition : le relief devient un bandeau en haut, le
   texte passe dessous sur fond plein. */
@media (max-width: 52rem) {
  .hero {
    min-height: auto;
    display: block;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  #relief-accueil {
    position: relative;
    inset: auto;
    height: 44svh;
    margin: 0 calc(-1 * var(--marge));   /* pleine largeur malgré le padding */
  }

  /* Le voile ne couvre plus que le bandeau : il éclaircit le haut, que
     l'en-tête fixe recouvre, et fond le bas dans le fond de page. */
  .hero::after {
    inset: 0 0 auto 0;
    height: 44svh;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--papier) 82%, transparent) 0%,
      color-mix(in srgb, var(--papier) 8%, transparent) 24%,
      color-mix(in srgb, var(--papier) 8%, transparent) 62%,
      var(--papier) 100%);
  }

  .hero-contenu { max-width: none; padding-top: 1.5rem; }
}

.hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 52ch;
}

.hero p {
  color: color-mix(in srgb, var(--encre) 76%, var(--ardoise));
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  margin: 1.25rem 0 2rem;
  max-width: 46ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* =====================================================================
   Boutons
   ===================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--blaze);
  border-radius: 999px;
  background: var(--blaze);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--blaze) 18%, transparent);
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow .2s;
}

.bouton:hover { background: transparent; color: var(--blaze); box-shadow: none; }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

.bouton.secondaire {
  background: color-mix(in srgb, var(--ivoire) 82%, transparent);
  color: var(--encre);
  border-color: color-mix(in srgb, var(--encre) 25%, transparent);
  box-shadow: none;
}

.bouton.secondaire:hover { background: #fff; border-color: var(--encre); }

/* =====================================================================
   Sections courantes
   ===================================================================== */

.bande {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 10vh, 7.5rem) var(--marge);
  border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
  background: color-mix(in srgb, var(--papier) 97%, transparent);
}

.bande > .dedans { max-width: var(--large); margin: 0 auto; }
.bande p { color: var(--ardoise); max-width: 60ch; }

.duo { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

@media (min-width: 52rem) {
  .duo { grid-template-columns: 1fr 1fr; }
}

/* Schéma de la cellule : dessin au trait, pas d'image à télécharger.
   Contrainte des 10 Mo oblige, mais surtout c'est net à tout zoom. */
.schema {
  width: 100%;
  height: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--encre);
  background: color-mix(in srgb, var(--sable) 68%, var(--ivoire));
  border-radius: 46% 54% 42% 58% / 55% 42% 58% 45%;
}
.schema .surlignage { color: var(--blaze); }

/* La première section après le relief présente immédiatement les trois
   dimensions du projet et crée un passage plus chaleureux vers le contenu. */
.promesse-accueil {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 11vh, 8rem) var(--marge);
  color: var(--ivoire);
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--ocre) 35%, transparent), transparent 22rem),
    var(--sapin);
}

.promesse-accueil > .dedans { max-width: var(--large); margin: 0 auto; }
.promesse-accueil .eyebrow { color: color-mix(in srgb, var(--ivoire) 68%, transparent); }
.promesse-accueil h2 { max-width: 24ch; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.promesse-intro { max-width: 52ch; color: color-mix(in srgb, var(--ivoire) 72%, transparent); }

.promesse-liens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  background: color-mix(in srgb, var(--ivoire) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ivoire) 20%, transparent);
}

.promesse-liens a {
  min-height: 12rem;
  display: grid;
  align-content: end;
  gap: .35rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  color: var(--ivoire);
  text-decoration: none;
  background: color-mix(in srgb, var(--sapin) 84%, transparent);
  transition: background .2s, color .2s;
}

.promesse-liens a:hover { color: var(--encre); background: var(--sable); }
.promesse-liens span { font-family: var(--mesure); font-size: .7rem; color: var(--ocre); }
.promesse-liens strong { font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.promesse-liens small { color: currentColor; opacity: .7; }

@media (max-width: 42rem) {
  .promesse-liens { grid-template-columns: 1fr; }
  .promesse-liens a { min-height: 8.5rem; }
}

/* =====================================================================
   Accueil — univers de la boutique
   ===================================================================== */

.boutique-accueil {
  background:
    radial-gradient(circle at 15% 16%, color-mix(in srgb, var(--ocre) 10%, transparent), transparent 28rem),
    var(--ivoire);
}

.univers-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: 2.75rem;
}

.univers {
  position: relative;
  isolation: isolate;
  min-height: clamp(21rem, 46vh, 28rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  color: #fff;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.univers::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 12, 17, 0.88), transparent 68%);
}

.univers::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  transition: transform 0.6s ease;
}

.univers:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--encre) 20%, transparent);
}

.univers:hover::after { transform: scale(1.035); }

.univers-terroir::after {
  background:
    radial-gradient(circle at 25% 23%, rgba(255,255,255,.24) 0 3%, transparent 3.2%),
    repeating-radial-gradient(ellipse at 28% 34%, transparent 0 34px, rgba(255,255,255,.12) 35px 37px),
    linear-gradient(145deg, #8f2f22 0%, #c25a2f 42%, #d9a44d 100%);
}

.univers-stupa::after {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.32), transparent 27%),
    linear-gradient(160deg, #79583f 0%, #a77a4d 48%, #d2b477 100%);
}

.univers-offroad::after {
  background:
    repeating-linear-gradient(118deg, transparent 0 42px, rgba(255,255,255,.1) 43px 45px),
    linear-gradient(155deg, #18242b 0%, #3f5148 54%, #8a6f4d 100%);
}

.univers-numero {
  font-family: var(--mesure);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.univers-symbole {
  align-self: center;
  margin: auto;
  font-size: clamp(4.5rem, 8vw, 8rem);
  color: color-mix(in srgb, #fff 72%, transparent);
}

.symbole-stupa {
  width: clamp(5rem, 8vw, 7rem);
  height: clamp(6rem, 10vw, 9rem);
  background:
    linear-gradient(#fff 0 0) center 0 / 4% 23%,
    linear-gradient(#fff 0 0) center 25% / 34% 4%,
    linear-gradient(#fff 0 0) center 40% / 55% 4%,
    linear-gradient(#fff 0 0) center 58% / 76% 4%,
    linear-gradient(#fff 0 0) center 77% / 94% 4%,
    linear-gradient(#fff 0 0) center 96% / 100% 4%;
  background-repeat: no-repeat;
  opacity: .62;
}

.symbole-piste {
  width: clamp(5rem, 8vw, 7rem);
  height: clamp(7rem, 11vw, 10rem);
  border-left: 9px solid rgba(255,255,255,.58);
  border-right: 9px solid rgba(255,255,255,.58);
  transform: skew(-8deg);
}

.univers-terroir { grid-column: 1 / -1; min-height: clamp(23rem, 50vh, 30rem); }

.univers-contenu { display: grid; gap: 0.8rem; }

.univers-contenu strong {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-size: clamp(1.8rem, 2.8vw, 3.4rem);
  line-height: .96;
  text-wrap: balance;
}

.univers:not(.univers-terroir) .univers-contenu strong {
  font-size: clamp(1.55rem, 2.2vw, 2.4rem);
}

.univers-contenu > span:not(.univers-lien) {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

.univers-lien {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,.35);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.univers-lien i { font-style: normal; font-size: 1rem; }

@media (max-width: 38rem) {
  .univers-grille { grid-template-columns: 1fr; }
  .univers-terroir { grid-column: auto; }
  .univers { min-height: 25rem; }
  .univers-terroir { min-height: 31rem; }
}

.liste-reperes {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--encre) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

@media (min-width: 46rem) {
  .liste-reperes { grid-template-columns: repeat(3, 1fr); }
}

/* Les cartes restent lisibles même posées sur une bande sombre qui
   met son texte en ivoire (.appel-carte) : la couleur est reposée ici. */
.liste-reperes li { background: var(--ivoire); padding: 1.5rem; color: var(--encre); }
.liste-reperes h3 { margin-bottom: 0.5rem; }
.liste-reperes p,
.appel-carte .liste-reperes p { margin: 0; font-size: 0.95rem; color: var(--ardoise); }

.appel-carte {
  color: var(--ivoire);
  background:
    radial-gradient(circle at 88% 25%, color-mix(in srgb, var(--ocre) 26%, transparent), transparent 24rem),
    var(--sapin);
}

.appel-carte .eyebrow,
.appel-carte p { color: color-mix(in srgb, var(--ivoire) 72%, transparent); }
.appel-carte .bouton.secondaire { color: var(--ivoire); background: transparent; border-color: color-mix(in srgb, var(--ivoire) 45%, transparent); }
.appel-carte .bouton.secondaire:hover { color: var(--encre); background: var(--ivoire); }
.actions-section { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* =====================================================================
   Pied de page
   ===================================================================== */

.pied {
  padding: clamp(3rem, 7vh, 4.5rem) var(--marge) 0;
  border-top: 1px solid color-mix(in srgb, var(--ivoire) 14%, transparent);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ivoire) 72%, transparent);
  background: var(--encre);
}

.pied a { text-decoration: none; color: inherit; transition: color .2s; }
.pied a:hover { color: var(--ocre); }

/* Haut du pied : la marque au large, puis les deux colonnes de liens.
   Une seule colonne sous 40rem (640 px), deux ensuite, trois au-delà. */
.pied-haut {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.pied-marque { display: grid; gap: .9rem; align-content: start; }

@media (min-width: 40rem) {
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}

@media (min-width: 58rem) {
  .pied-haut { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pied-marque { grid-column: auto; }
}

/* Reprise de la marque de l'en-tête, un cran plus grande et en ivoire
   plein pour tenir sur le fond encre. */
.pied .marque {
  font-size: 1.05rem;
  margin-right: 0;
  color: var(--ivoire);
}

.pied-marque p {
  margin: 0;
  max-width: 42ch;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ivoire) 62%, transparent);
}

.pied-contact {
  justify-self: start;
  font-family: var(--mesure);
  font-size: 0.8rem;
  color: var(--ivoire);
  border-bottom: 1px solid color-mix(in srgb, var(--ocre) 55%, transparent);
  padding-bottom: 2px;
}

.pied-nav { display: grid; gap: .7rem; align-content: start; }

/* Surtitre de colonne, dans l'esprit de .eyebrow mais sans la marque de
   balisage : le pied doit rester calme. */
.pied-nav h2 {
  margin: 0 0 .2rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivoire) 45%, transparent);
}

.pied-nav a { justify-self: start; }

.pied-bas {
  max-width: var(--large);
  margin: 0 auto;
  padding: 1.25rem 0 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ivoire) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--pas);
  align-items: center;
  font-family: var(--mesure);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ivoire) 52%, transparent);
}

.pied-bas .droite { margin-left: auto; }

@media (max-width: 40rem) {
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .pied-bas .droite { margin-left: 0; }
}

/* =====================================================================
   Page carte
   ===================================================================== */

body.page-carte { height: 100svh; overflow: hidden; }

#carte { position: fixed; inset: 0; background: var(--papier2); }

/* Voile de connexion : la carte reste visible derrière, floutée. On montre
   le terrain sans en livrer les points. */
.voile {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 5rem var(--marge) var(--marge);
  background: color-mix(in srgb, var(--papier) 72%, transparent);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}

.voile[hidden] { display: none; }

.panneau {
  width: min(26rem, 100%);
  background: var(--ivoire);
  border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--encre) 14%, transparent);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: .75rem;
}

.panneau h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.panneau > p { color: var(--ardoise); font-size: 0.95rem; margin: 0 0 1.5rem; }

.carte-introduction {
  margin: -.25rem -.25rem 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

.carte-introduction .eyebrow { margin-bottom: .7rem; color: var(--blaze); }
.carte-introduction h1 { font-size: clamp(1.55rem, 4vw, 2rem); }
.carte-introduction p:last-child { margin: .7rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ardoise); }

.champ { display: block; margin-bottom: 1rem; }

.champ span {
  display: block;
  font-family: var(--mesure);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 0.4rem;
}

.champ input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent);
  border-radius: 2px;
}

.champ input:focus { border-color: var(--blaze); outline: none; background: #fff; }

.champ-fichier input[type='file'] {
  padding: 0.5rem;
  font-family: var(--texte);
  font-size: 0.85rem;
  background: var(--papier);
}

.champ-fichier input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4rem 0.8rem;
  font: inherit;
  color: var(--encre);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 25%, transparent);
  border-radius: 2px;
  cursor: pointer;
}

.champ-fichier em {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ardoise);
}

/* Une coordonnée est une mesure : elle se lit en chasse fixe, comme partout
   ailleurs sur le site. */
.champ input.mesure { font-family: var(--mesure); font-size: 0.9rem; }

.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* --- Recherche d'adresse --------------------------------------------- */

.champ-position {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

/* La liste flotte au-dessus du reste du formulaire : le conteneur porte le
   repère de positionnement, et rien ne doit le rogner. */
.recherche { position: relative; }

.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--encre) 16%, transparent);
}

.suggestions li {
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
  border-top: 1px solid color-mix(in srgb, var(--encre) 8%, transparent);
}

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

.suggestions li:hover,
.suggestions li.active { background: color-mix(in srgb, var(--glacier) 28%, transparent); }

.suggestions li.vide {
  color: var(--ardoise);
  cursor: default;
  background: none;
  font-size: 0.85rem;
}

/* Ligne d'état de la position : grise tant que rien n'est acquis, puis en
   chasse fixe avec la marque rouge dès qu'un point est retenu. */
.position-etat {
  margin: 0.6rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ardoise);
}

.position-etat.retenue {
  font-family: var(--mesure);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--encre);
  border-left: 2px solid var(--blaze);
  padding-left: 0.65rem;
}

.champ-position .bouton { margin-top: 0; }

/* Le point en cours de choix ne se confond pas avec un spot enregistré :
   creux, cerclé de rouge, et déplaçable à la souris. Comme `.marqueur`, il
   n'a ni `transform` ni transition dessus — MapLibre s'en sert pour le
   positionner. */
.marqueur-choix {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blaze);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 30%, transparent),
              0 3px 10px color-mix(in srgb, var(--encre) 45%, transparent);
  cursor: grab;
}

.marqueur-choix:active { cursor: grabbing; }

.panneau .bouton { width: 100%; justify-content: center; margin-top: 0.5rem; }

.bascule { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ardoise); }

.bascule button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blaze);
  cursor: pointer;
  text-decoration: underline;
}

.message {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  border-left: 2px solid var(--glacier);
  background: color-mix(in srgb, var(--glacier) 18%, transparent);
  color: var(--encre);
}

.message[hidden] { display: none; }

.message.erreur {
  border-left-color: var(--blaze);
  background: color-mix(in srgb, var(--blaze) 10%, transparent);
}

/* --- Barre d'outils de la carte --------------------------------------- */

.outils {
  position: fixed;
  z-index: 15;
  top: 4.5rem;
  left: var(--marge);
  right: var(--marge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  pointer-events: none;
}

.outils > * { pointer-events: auto; }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--mesure);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
  background: color-mix(in srgb, #fff 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--encre) 10%, transparent);
}

.pastille:hover { background: #fff; }

/* Sur téléphone la barre passe à deux lignes : on resserre pour qu'elle
   mange le moins de carte possible. */
@media (max-width: 32rem) {
  .outils { gap: 0.35rem; top: 4rem; }
  .pastille { padding: 0.4rem 0.6rem; font-size: 0.66rem; letter-spacing: 0.05em; }
}

.pastille[aria-pressed='true'] {
  color: #fff;
  background: var(--blaze);
  border-color: var(--blaze);
}

.pastille.info { cursor: default; }

/* Consigne de placement : elle remplace momentanément le panneau, qui est
   effacé pour laisser la carte cliquable. */
.pastille.indice {
  color: #fff;
  background: var(--encre);
  border-color: var(--encre);
}
.pastille .compte { color: var(--blaze); font-weight: 600; }
.pastille[aria-pressed='true'] .compte { color: #fff; }

/* --- Marqueurs -------------------------------------------------------- */

/* ⚠️ Aucune règle `transform` ni `transition: transform` ici.
   MapLibre positionne chaque marqueur en écrivant `style.transform` en ligne
   sur ce même élément, à chaque image du déplacement de la carte. Une
   transition sur `transform` anime donc le repositionnement lui-même : les
   points glissent avec du retard et ne restent plus fixés au terrain. Et un
   `transform: scale()` au survol serait de toute façon sans effet, le style
   en ligne l'emportant sur la feuille. Le survol passe donc par la couleur
   et l'ombre, jamais par la géométrie. */
.marqueur {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background: var(--blaze);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 35%, transparent),
              0 2px 6px color-mix(in srgb, var(--encre) 45%, transparent);
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.marqueur:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 35%, transparent),
              0 0 0 6px color-mix(in srgb, var(--blaze) 30%, transparent),
              0 2px 6px color-mix(in srgb, var(--encre) 45%, transparent);
}

/* Une proposition en attente se distingue au premier coup d'œil :
   pastille creuse, pas encore pleine. */
.marqueur.en-attente { background: #fff; border-color: var(--blaze); }

/* Une proposition écartée sort du rouge : elle n'appelle plus d'action.
   Visible du seul administrateur et de son auteur. */
.marqueur.refusee {
  background: var(--ardoise);
  border-color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 25%, transparent);
  opacity: 0.75;
}

/* --- Fiche du spot ---------------------------------------------------- */

.fiche {
  position: fixed;
  z-index: 18;
  inset: auto 0 0 0;
  max-height: 72svh;
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  box-shadow: 0 -10px 40px color-mix(in srgb, var(--encre) 15%, transparent);
  padding: clamp(1.25rem, 3vw, 2rem);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}

.fiche.ouverte { transform: none; }

@media (min-width: 52rem) {
  .fiche {
    /* Pas de `bottom` : la fiche s'arrête à son contenu au lieu de
       s'étirer sur toute la hauteur de l'écran. */
    inset: 4rem auto auto var(--marge);
    width: 26rem;
    max-height: calc(100svh - 6rem);
    border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--encre) 18%, transparent);
    transform: translateX(calc(-100% - var(--marge)));
  }
  .fiche.ouverte { transform: none; }
}

.fiche-fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--ardoise);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.fiche-fermer:hover { color: var(--encre); border-color: color-mix(in srgb, var(--encre) 25%, transparent); }

.fiche h2 { font-size: 1.5rem; padding-right: 2rem; }

.fiche .coordonnees {
  font-family: var(--mesure);
  font-size: 0.8rem;
  color: var(--blaze);
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.fiche .coordonnees a { color: var(--ardoise); }
.fiche .description { color: var(--ardoise); font-size: 0.95rem; }

.fiche dl {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
}

.fiche dt {
  font-family: var(--mesure);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  padding-top: 0.15rem;
}

.fiche dd { margin: 0; }

.galerie { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
.galerie img { width: 100%; border: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); }
.galerie figure { margin: 0; }
.galerie figcaption { font-size: 0.8rem; color: var(--ardoise); margin-top: 0.35rem; }

/* --- Bandeau de modération ------------------------------------------- */

.moderation {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moderation .bouton {
  flex: 1 1 7rem;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
}

/* La suppression est irréversible : elle ne doit pas se confondre avec les
   deux autres actions, qui elles se rattrapent. */
.bouton.danger {
  background: transparent;
  color: var(--blaze);
  border-color: color-mix(in srgb, var(--blaze) 45%, transparent);
}

.bouton.danger:hover { background: var(--blaze); color: #fff; border-color: var(--blaze); }

.moderation-saisie { width: 100%; }
.moderation-saisie .champ { margin-bottom: 0.75rem; }

.avertissement {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--encre);
}

.etat-attente {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--mesure);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blaze);
  border: 1px solid var(--blaze);
}

.etat-attente.refusee {
  color: var(--ardoise);
  border-color: color-mix(in srgb, var(--ardoise) 50%, transparent);
}

.fiche .motif {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ardoise);
  border-left: 2px solid color-mix(in srgb, var(--ardoise) 40%, transparent);
  padding-left: 0.7rem;
}

/* =====================================================================
   Page À propos
   ===================================================================== */

.page-texte { padding-top: 8rem; }
.page-texte .dedans { max-width: 42rem; margin: 0 auto; }
.page-texte h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); }
.page-texte h2 { margin-top: 3rem; }
.page-texte h2:first-of-type { margin-top: 2rem; }
.page-texte p + p { margin-top: 1rem; }

.page-texte dl { margin: 2rem 0 0; }

.page-texte dt {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-weight: 600;
  margin-top: 1.5rem;
}

.page-texte dd { margin: 0.35rem 0 0; color: var(--ardoise); }

.axes-projet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 3rem 0 4rem;
  background: color-mix(in srgb, var(--encre) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

.axes-projet a {
  min-height: 10rem;
  display: grid;
  align-content: end;
  gap: .25rem;
  padding: 1.4rem;
  text-decoration: none;
  background: var(--ivoire);
  transition: color .2s, background .2s;
}

.axes-projet a:hover { color: var(--ivoire); background: var(--sapin); }
.axes-projet span { font-family: var(--mesure); font-size: .68rem; color: var(--blaze); }
.axes-projet strong { font-family: var(--display); font-size: 1.3rem; }
.axes-projet small { color: currentColor; opacity: .7; }

@media (max-width: 34rem) {
  .axes-projet { grid-template-columns: 1fr; }
  .axes-projet a { min-height: 7.5rem; }
}

/* =====================================================================
   Pages des trois univers commerciaux
   ===================================================================== */

.page-univers { background: var(--papier); }

.commerce-hero {
  position: relative;
  min-height: 68svh;
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: clamp(5.5rem, 11vh, 7.5rem) var(--marge) clamp(3rem, 8vh, 5.5rem);
  color: #fff;
  background: #27343a;
}

.page-terroir .commerce-hero { background: linear-gradient(145deg, #712c22, #bd5934 54%, #cf9445); }
.page-stupa .commerce-hero { background: linear-gradient(150deg, #604631, #95704c 55%, #c3a36c); }
.page-offroad .commerce-hero { background: linear-gradient(150deg, #17251f, #355345 58%, #806441); }

.commerce-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,9,13,.55), transparent 65%);
  pointer-events: none;
}

.commerce-hero-contenu {
  position: relative;
  z-index: 2;
  width: min(48rem, 100%);
}

.commerce-hero .eyebrow { color: rgba(255,255,255,.68); }
.commerce-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }
.commerce-hero p:not(.eyebrow) {
  max-width: 48ch;
  margin: 1.5rem 0 2rem;
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  color: rgba(255,255,255,.78);
}

.retour-boutique {
  display: inline-block;
  margin-bottom: clamp(3rem, 9vh, 7rem);
  font-family: var(--mesure);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.74);
}

.retour-boutique:hover { color: #fff; }

.bouton-clair { background: #fff; border-color: #fff; color: var(--encre); }
.bouton-clair:hover { background: transparent; border-color: #fff; color: #fff; }

.commerce-motif {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-8rem, 4vw, 4rem);
  width: min(45vw, 38rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: .25;
}

.motif-terroir {
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 31px, #fff 32px 34px);
}

.motif-stupa {
  background:
    linear-gradient(#fff 0 0) center 4% / 3% 18%,
    linear-gradient(#fff 0 0) center 25% / 22% 3%,
    linear-gradient(#fff 0 0) center 39% / 39% 3%,
    linear-gradient(#fff 0 0) center 55% / 58% 3%,
    linear-gradient(#fff 0 0) center 74% / 78% 3%,
    linear-gradient(#fff 0 0) center 94% / 100% 3%;
  background-repeat: no-repeat;
}

.motif-offroad {
  border-left: clamp(1rem, 2vw, 2rem) solid #fff;
  border-right: clamp(1rem, 2vw, 2rem) solid #fff;
  transform: translateY(-50%) skew(-9deg);
}

.selection-commerce { padding-top: clamp(5rem, 12vh, 9rem); padding-bottom: clamp(5rem, 12vh, 9rem); }
.selection-commerce > .dedans > p:not(.eyebrow) { margin-top: 1.2rem; }

.rayons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  background: color-mix(in srgb, var(--encre) 15%, transparent);
}

.rayons article { min-height: 18rem; padding: clamp(1.4rem, 3vw, 2.5rem); background: var(--ivoire); }
.rayon-index { font-family: var(--mesure); font-size: .7rem; color: var(--blaze); }
.rayons h3 { margin-top: clamp(4rem, 8vh, 7rem); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.rayons p { margin: .75rem 0 0; font-size: .95rem; }

/* ---------------------------------------------------------------------
   Catalogue des produits du terroir
   ---------------------------------------------------------------------
   Le catalogue réel, famille par famille. Même trame que .rayons et
   .points-confiance — filets d'un pixel, cellules ivoire — pour que la
   liste de prix appartienne visiblement à la même page.
   Tout ce qui est chiffré (contenance, montant, unité) passe en chasse
   fixe : une donnée doit se lire comme une donnée. */

.catalogue { padding-bottom: clamp(4rem, 10vh, 7rem); }
.catalogue > .dedans > p:not(.eyebrow) { margin-top: 1.2rem; }

.familles {
  display: grid;
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  background: color-mix(in srgb, var(--encre) 15%, transparent);
}

.famille {
  background: var(--ivoire);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

/* En-tête de famille : le numéro d'ordre en repère, comme .rayon-index. */
.famille-tete {
  display: grid;
  gap: .5rem;
  padding-bottom: 1.1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
}

.famille-index { font-family: var(--mesure); font-size: .7rem; color: var(--blaze); }
.famille-tete h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }

/* La liste passe en colonnes dès qu'il y a la place ; l'ordre de lecture
   reste celui du document, ligne par ligne. */
.produits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}

.produit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem 1.5rem;
  padding: .75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 10%, transparent);
}

.produit-nom { font-size: .95rem; line-height: 1.45; }

.produit-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem 1.1rem;
  margin-left: auto;
  text-align: right;
}

.tarif { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }

.tarif-format,
.tarif-unite {
  font-family: var(--mesure);
  font-size: .7rem;
  color: var(--ardoise);
}

.tarif-montant {
  font-family: var(--mesure);
  font-size: .95rem;
  font-weight: 500;
  color: var(--encre);
}

/* Prix barré de l'action : il reste lisible mais s'efface derrière le
   prix en cours. */
.tarif-ancien {
  font-family: var(--mesure);
  font-size: .8rem;
  color: var(--ardoise);
}

/* L'action se repère au rouge signature, jamais à la seule couleur du
   montant : le badge porte le mot. */
.produit-action {
  background: color-mix(in srgb, var(--blaze) 8%, transparent);
  padding-left: .7rem;
  padding-right: .7rem;
  margin-left: -.7rem;
  margin-right: -.7rem;
}

.produit-action .tarif-montant { color: var(--blaze); }

.badge-action {
  display: inline-block;
  margin-left: .45rem;
  padding: .16rem .5rem;
  font-family: var(--mesure);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blaze);
  vertical-align: .08em;
}

/* Bande de réassurance : ce qui rassure avant l'appel au contact.
   Même trame que .liste-reperes — filets d'un pixel, fond ivoire. */
.reassurance {
  padding-top: clamp(2.5rem, 6vh, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.points-confiance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--encre) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

@media (min-width: 46rem) {
  .points-confiance { grid-template-columns: repeat(3, 1fr); }
}

.points-confiance li {
  display: grid;
  gap: .45rem;
  align-content: start;
  background: var(--ivoire);
  padding: 1.5rem;
}

.points-confiance strong {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-size: 1.05rem;
}

.points-confiance span {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ardoise);
}

.appel-commerce {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(4rem, 10vh, 7rem) var(--marge);
  color: #fff;
  background: var(--sapin);
}

.appel-commerce > div { max-width: 48rem; }
.appel-commerce .eyebrow { color: rgba(255,255,255,.58); }
.appel-commerce p:not(.eyebrow) { max-width: 56ch; margin: 1rem 0 0; color: rgba(255,255,255,.7); }
.appel-commerce .bouton { flex: none; }

.univers-suivants { display: grid; grid-template-columns: 1fr 1fr; }

.univers-suivants a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  min-height: 14rem;
  align-content: end;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--marge);
  text-decoration: none;
  border-right: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  transition: background .2s, color .2s;
}

.univers-suivants a:hover { color: #fff; background: var(--blaze); }
.univers-suivants small { grid-column: 1 / -1; font-family: var(--mesure); text-transform: uppercase; letter-spacing: .1em; }
.univers-suivants strong { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.univers-suivants span { font-size: 1.5rem; }

@media (max-width: 46rem) {
  .commerce-hero { min-height: 82svh; }
  .commerce-motif { width: 78vw; right: -28vw; opacity: .16; }
  .rayons { grid-template-columns: 1fr; }
  .rayons article { min-height: auto; }
  .rayons h3 { margin-top: 3.5rem; }
  /* Le catalogue repasse en une colonne : `auto-fit` garderait sinon une
     colonne de 19 rem plus large que l'écran. */
  .produits { grid-template-columns: 1fr; }
  .produit-nom { flex: 1 1 100%; }
  .produit-prix { margin-left: 0; }
  .appel-commerce { align-items: start; flex-direction: column; }
  .univers-suivants { grid-template-columns: 1fr; }
  .univers-suivants a { min-height: 11rem; border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent); }
}

/* ---------------------------------------------------------------------
   Galerie de vignettes sous une ligne de produit
   ---------------------------------------------------------------------
   `.produit` est un flex en `wrap` : une vignette-rangée en `flex-basis:
   100%` se pose donc toute seule sous la ligne nom + prix, sans toucher
   à la grille des familles. Les photos ne portent aucune information
   qui ne soit déjà dans le texte — elles restent un complément. */

.galerie-produit {
  flex: 1 1 100%;
  list-style: none;
  margin: .15rem 0 .25rem;
  padding: 0 0 .4rem;
  display: flex;
  gap: .5rem;
  /* La colonne d'une famille fait environ 320 px : quatre vignettes en
     rangée demanderaient 560 px et partiraient dans un défilement
     horizontal que rien n'annonce à l'écran — mesuré dans le navigateur.
     Elles passent donc à la ligne. `overflow-x` ne reste qu'en filet de
     sécurité, pour un cas où la colonne serait plus étroite qu'une
     vignette. */
  flex-wrap: wrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.galerie-produit li { flex: none; }

.galerie-produit a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
  background: var(--papier2);
  transition: border-color .2s, box-shadow .2s;
}

.galerie-produit a:hover,
.galerie-produit a:focus-visible {
  border-color: var(--blaze);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--encre) 18%, transparent);
}

/* Cadre fixe : les photos sont tantôt en largeur, tantôt en hauteur, et
   une rangée d'images de gabarits différents partirait dans tous les
   sens. `object-fit: cover` recadre sur le centre, où est le fromage. */
.galerie-produit img {
  width: 132px;
  height: 96px;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   Fiche des gélules — Épicerie des Mayens
   ---------------------------------------------------------------------
   Une fiche de lecture posée sous la liste de prix : même fond ivoire,
   mais détachée par un filet haut pour qu'on voie qu'on change de
   registre — on passe du tarif à la description du produit. */

.fiche-gelules {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
}

/* L'illustration du propriétaire, sur fond blanc : un liseré et une
   assise sable l'empêchent de flotter sur le papier ivoire. */
.fiche-illustration {
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto 2rem;
  padding: .9rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

.gelules-grille {
  display: grid;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
  background: color-mix(in srgb, var(--encre) 14%, transparent);
}

@media (min-width: 46rem) {
  .gelules-grille { grid-template-columns: 1fr 1fr; }
}

.gelule {
  background: var(--ivoire);
  padding: clamp(1.2rem, 3vw, 1.9rem);
}

.gelule h4 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-size: 1.15rem;
  line-height: 1.25;
}

/* Une contre-indication n'est pas un argument de vente : elle sort du
   flux du texte, encadrée, sur l'ocre de la signalisation. */
.gelule-contre {
  margin: 0 0 1.3rem;
  padding: .75rem .9rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--encre);
  background: color-mix(in srgb, var(--ocre) 12%, transparent);
  border-left: 3px solid var(--ocre);
}

.gelule-intertitre {
  margin: 0 0 .6rem;
  font-family: var(--mesure);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sapin);
}

.gelule-bienfaits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.gelule-bienfaits li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ardoise);
}

.gelule-bienfaits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--sapin);
}

/* ---------------------------------------------------------------------
   Présentation du stupa
   ---------------------------------------------------------------------
   Texte du propriétaire, repris mot pour mot ; seule la structure est
   ajoutée (intertitres, listes). */

.stupa-corps {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 1.6rem;
}

@media (min-width: 52rem) {
  .stupa-corps { grid-template-columns: minmax(0, 1fr) auto; }
}

.stupa-texte > p { margin: 0 0 1.1rem; }
.stupa-texte > p:last-child { margin-bottom: 0; }

/* Le dessin est sur un fond gris #e0e0e0 : le cadre reprend exactement
   cette valeur, sinon un rectangle gris flotterait sur le papier ivoire.
   Relevé au pixel sur l'image, pas estimé à l'œil. */
.stupa-illustration {
  margin: 0;
  padding: 1.4rem;
  background: #e0e0e0;
  border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  justify-self: center;
}

.stupa-illustration img {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.stupa-presentation h3 {
  margin: 2.6rem 0 .9rem;
  font-size: 1.2rem;
}

.stupa-presentation h3:first-of-type { margin-top: 3rem; }

.liste-stupa {
  list-style: none;
  margin: 1.1rem 0 1.8rem;
  padding: 0;
  display: grid;
  gap: .7rem;
  max-width: 60ch;
}

.liste-stupa li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ardoise);
}

.liste-stupa li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--blaze);
}

/* Le terme désigné garde la couleur du texte courant : c'est la graisse
   qui le détache, pas une seconde couleur. */
.liste-stupa strong {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106;
  font-weight: 600;
  color: var(--encre);
}