/* BlockEngine block styles — built into dist/blocks.css and registered as the
 * blocks' `style` handle, so WP loads it on the front (only when a block is
 * rendered) AND inside the editor iframe (preview fidelity).
 *
 * Charte BeeZard : couleurs et familles viennent de theme.json (presets WP).
 * Les valeurs de repli permettent au rendu SSR isolé et à l'éditeur de tenir
 * debout même si les presets ne sont pas encore injectés. */

:root {
  --bz-noir: var(--wp--preset--color--noir, #000000);
  --bz-blanc-casse: var(--wp--preset--color--blanc-casse, #fffcf5);
  --bz-terre: var(--wp--preset--color--terre, #c94930);
  --bz-bleu: var(--wp--preset--color--bleu, #7296cc);
  --bz-bordeaux: var(--wp--preset--color--bordeaux, #731a08);
  --bz-bleu-nuit: var(--wp--preset--color--bleu-nuit, #0b2347);
  --bz-ocre-clair: var(--wp--preset--color--ocre-clair, #edbe80);
  --bz-ocre: var(--wp--preset--color--ocre, #e89c38);
  --bz-vert: var(--wp--preset--color--vert, #5d8b6f);
  --bz-vert-fonce: var(--wp--preset--color--vert-fonce, #294d36);
  --bz-gris-mine: var(--wp--preset--color--gris-mine, #6b6b6b);

  --bz-perle: var(--wp--preset--font-family--perle, Georgia, serif);
  --bz-parangonne: var(--wp--preset--font-family--parangonne, Georgia, serif);
  --bz-manuscrite: var(--wp--preset--font-family--manuscrite, cursive);
  --bz-garamond: var(--wp--preset--font-family--garamond, Garamond, Georgia, serif);

  /* Gouttière de page : 150px sur une maquette 1440, resserrée sur mobile. */
  --bz-gutter: clamp(25px, 10.42vw, 150px);
  --bz-container: 1140px;
  --bz-section-gap: clamp(56px, 6.95vw, 100px);
  --bz-stack: 25px;
  --bz-after-eyebrow: 38px;
  --bz-after-title: 16px;
  --bz-radius-pill: 27px;
}

/* ---------------------------------------------------------------- primitives */

[class^='bz-'],
[class*=' bz-'] {
  box-sizing: border-box;
}

.bz-section {
  padding-block: var(--bz-section-gap);
  position: relative;
}

/* La maquette pose 1140px de CONTENU entre deux gouttières de 150 : la
 * largeur maximale doit donc inclure les gouttières, sans quoi le padding se
 * retranche du contenu (1140 - 300 = 840) et toute la page se resserre. */
.bz-container {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(var(--bz-container) + 2 * var(--bz-gutter));
  padding-inline: var(--bz-gutter);
  width: 100%;
}

/* Rythme vertical commun : sur-titre → titre → texte.
 *
 * Deux classes de spécificité, exprès : les primitives (.bz-title, .bz-body,
 * les grilles…) remettent leur marge à zéro avec une seule classe, et un
 * `.bz-stack > * + *` à égalité perdait contre elles selon l'ordre du fichier
 * — les sur-titres se retrouvaient collés au contenu. */
.bz-stack > * + * {
  margin-block-start: var(--bz-stack);
}

.bz-stack > .bz-eyebrow + * {
  margin-block-start: var(--bz-after-eyebrow);
}

.bz-stack > .bz-title + * {
  margin-block-start: var(--bz-after-title);
}

.bz-eyebrow {
  font-family: var(--bz-parangonne);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  text-transform: uppercase;
}

.bz-title {
  font-family: var(--bz-perle);
  /* Par variable : un bloc qui fixe sa propre taille (une classe) l'emporte
   * ainsi à toute largeur, mobile compris. */
  font-size: var(--bz-title-size, clamp(40px, 4.86vw, 70px));
  font-weight: 400;
  line-height: 0.93;
  margin: 0;
  text-wrap: balance;
}

.bz-title--h2 {
  font-size: clamp(26px, 2.43vw, 35px);
  line-height: 1;
}

.bz-body {
  font-family: var(--bz-perle);
  font-size: 19px;
  line-height: 29px;
  margin: 0;
}

.bz-body--small {
  font-size: 13px;
  line-height: 23px;
}

.bz-body p {
  margin: 0;
}

.bz-body p + p {
  margin-block-start: 23px;
}

/* Légende manuscrite — toujours en gris mine, jamais en noir (charte p.65). */
/* Les légendes manuscrites longent le bord (37px dans la maquette), pas la
 * gouttière de contenu. */
.bz-caption {
  color: var(--bz-gris-mine);
  font-family: var(--bz-manuscrite);
  font-size: 18px;
  line-height: normal;
  margin: 0;
  padding-inline: clamp(20px, 2.57vw, 37px);
  text-align: right;
}

/* Mot mis en exergue : manuscrite posée sur un adhésif déchiré. */
.bz-highlight {
  display: inline-block;
  position: relative;
}

.bz-highlight__text {
  font-family: var(--bz-manuscrite);
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

/* Boîte de rognage : la planche source contient plusieurs adhésifs, on n'en
 * montre qu'un. L'image est positionnée dedans avec le cadrage repris de la
 * maquette (inline, depuis brand.ts), la boîte coupe le reste. */
.bz-scotch {
  display: block;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.bz-scotch img {
  height: auto;
  max-width: none;
  position: absolute;
}

/* Variante d'un même élément selon l'écran (ex. un adhésif propre au mobile). */
.bz-mobile {
  display: none;
}

@media (max-width: 860px) {
  .bz-bureau { display: none; }
  .bz-mobile { display: block; }
}

.bz-btn {
  border: 1px solid var(--bz-noir);
  border-radius: var(--bz-radius-pill);
  display: inline-block;
  font-family: var(--bz-perle);
  font-size: 14px;
  line-height: 30px;
  min-width: 177px;
  padding: 11px 24px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bz-btn--solid {
  background: var(--bz-blanc-casse);
  border-color: transparent;
}

.bz-btn--ghost {
  background: transparent;
}

.bz-btn:hover,
.bz-btn:focus-visible {
  background: var(--bz-noir);
  color: var(--bz-blanc-casse);
}

.bz-badge-video {
  height: 54px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 54px;
}

/* Flèches du slider : cercle filaire, ou plein pour la flèche du sens de
 * lecture. Chevron de 2px, comme sur la maquette. */
.bz-arrow {
  background: transparent;
  border: 1px solid var(--bz-noir);
  border-radius: 50%;
  color: var(--bz-noir);
  cursor: pointer;
  height: 54px;
  position: relative;
  width: 54px;
}

.bz-arrow::before {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: '';
  height: 9px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 9px;
}

.bz-arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.bz-arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.bz-arrow--plein {
  background: var(--bz-noir);
  color: var(--bz-blanc-casse);
}

/* Aplats de la charte. */
.bz-bg--blanc-casse { background-color: var(--bz-blanc-casse); }
.bz-bg--noir        { background-color: var(--bz-noir); color: var(--bz-blanc-casse); }
.bz-bg--terre       { background-color: var(--bz-terre); }
.bz-bg--bleu        { background-color: var(--bz-bleu); }
.bz-bg--bordeaux    { background-color: var(--bz-bordeaux); color: var(--bz-blanc-casse); }
.bz-bg--bleu-nuit   { background-color: var(--bz-bleu-nuit); color: var(--bz-blanc-casse); }
.bz-bg--ocre-clair  { background-color: var(--bz-ocre-clair); }
.bz-bg--ocre        { background-color: var(--bz-ocre); }
.bz-bg--vert        { background-color: var(--bz-vert); }
.bz-bg--vert-fonce  { background-color: var(--bz-vert-fonce); color: var(--bz-blanc-casse); }

/* -------------------------------------------------------------------- intro */

/* 850 de large dans un contenu de 1140 : la colonne de texte ne va pas au
 * bout de la ligne, c'est voulu dans la maquette. */
.bz-intro__heading,
.bz-intro__body {
  max-width: 850px;
}

/* Coupure de la maquette : « BeeZard transforme / le vivant en matières
 * brutes / de création. » — un retour forcé (Maj+Entrée) après la première
 * ligne, puis un remplissage glouton. `balance` égaliserait les lignes et
 * repousserait « brutes » à la troisième. */
.bz-intro__heading {
  text-wrap: wrap;
}

/* ------------------------------------------------------------------- header */

.bz-header {
  inset-inline: 0;
  padding-block: 10px;
  position: absolute;
  top: 0;
  z-index: 10;
}

.bz-header--solide {
  background: var(--bz-blanc-casse);
  position: relative;
}

.bz-header__inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1440px;
  padding-inline: 27px;
  width: 100%;
}

.bz-header__logo img {
  display: block;
  height: auto;
  max-width: 263px;
  width: 100%;
}

.bz-header__panel {
  align-items: center;
  display: flex;
  gap: 32px;
}

.bz-header__nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-header__nav a {
  font-family: var(--bz-parangonne);
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
}

.bz-header__burger {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  height: 44px;
  position: relative;
  width: 44px;
}

/* Trait central ; les deux autres sont dessinés en pseudo-éléments. */
.bz-header__burger span,
.bz-header__burger span::before,
.bz-header__burger span::after {
  background: currentColor;
  content: '';
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  width: 30px;
}

.bz-header__burger span::before { transform: translate(-50%, -8px); }
.bz-header__burger span::after  { transform: translate(-50%, 7px); }

.is-open .bz-header__burger span { background: transparent; }
.is-open .bz-header__burger span::before { transform: translate(-50%, -50%) rotate(45deg); }
.is-open .bz-header__burger span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Phase 1 : le bouton seul, calé à droite et fixé à l'écran — il reste à
 * portée tout au long de la page. La barre elle-même laisse passer les clics :
 * seul le bouton en capte. */
.bz-header--sans-menu {
  pointer-events: none;
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
}

.bz-header--sans-menu .bz-header__cta {
  pointer-events: auto;
}

.bz-header--sans-menu .bz-header__inner {
  justify-content: flex-end;
}

@media (max-width: 860px) {
  /* Sans menu, le panneau n'est pas un tiroir : il reste dans l'en-tête. */
  .bz-header--sans-menu .bz-header__inner {
    padding: 7px 13px 0;
  }

  .bz-header--sans-menu .bz-header__panel {
    background: none;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    position: static;
    z-index: auto;
  }

  /* Maquette mobile : pastille de 54 avec une enveloppe, pas de libellé. Le
   * libellé reste lu par les lecteurs d'écran. */
  .bz-header--sans-menu .bz-header__cta {
    background: var(--bz-blanc-casse) url('/app/themes/beezard/assets/brand/icon-mail.svg') center / 24px 16px
      no-repeat;
    border-radius: 50%;
    height: 54px;
    min-width: 0;
    padding: 0;
    width: 54px;
  }

  .bz-header--sans-menu .bz-header__cta-label {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

@media (max-width: 860px) {
  .bz-header__burger { display: block; }

  .bz-header__panel {
    background: var(--bz-blanc-casse);
    flex-direction: column;
    gap: 24px;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.25s ease;
    z-index: -1;
  }

  .bz-header.is-open .bz-header__panel {
    opacity: 1;
    pointer-events: auto;
    z-index: 9;
  }

  .bz-header__nav ul {
    align-items: center;
    flex-direction: column;
    gap: 16px;
  }
}

/* -------------------------------------------------------------------- cover */

.bz-cover {
  position: relative;
}

.bz-cover__media {
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
}

.bz-cover--plein-ecran .bz-cover__media { height: min(100svh, 1000px); }
.bz-cover--grande .bz-cover__media      { aspect-ratio: 1440 / 792; }
.bz-cover--moyenne .bz-cover__media     { aspect-ratio: 1440 / 560; }

/* Le <picture> (image mobile facultative) ne doit pas occuper une case de la
 * grille : il repousserait le verrou sous le centre. */
.bz-cover__media > picture {
  display: contents;
}

.bz-cover__bg {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* Le verrou est le repère : logo et exergue sont dimensionnés en pourcentage
 * de sa largeur, donc fidèles à la maquette à toute largeur d'écran — et sans
 * dépendre des métriques de la fonte, qui varieront selon la Garabosse. */
.bz-cover__lockup {
  /* Le verrou est le repère : tailles et décalages de la signature sont en
   * cqw, pourcentage de sa largeur — la composition est la même à toute
   * largeur. */
  container-type: inline-size;
  position: relative;
  width: min(858px, calc(100% - 2 * var(--bz-gutter)));
}

.bz-cover__logo {
  display: block;
  height: auto;
  width: 100%;
}

/* Signature : l'exergue sur son adhésif, un espace, puis la suite — le tout
 * centré sous le nom. Le logo (1720x270) finit à 14,8 % de sa largeur ;
 * l'adhésif mord d'un point sur le bas des lettres. */
.bz-cover__tagline {
  align-items: center;
  display: flex;
  font-size: 3.61cqw;
  justify-content: center;
  margin: -4.13cqw 0 0;
}

/* Boîte au ratio du cadrage de l'adhésif (476x154) : la planche est rognée
 * dedans. L'adhésif visible n'en occupe que 5 → 92 % en largeur ; les marges
 * négatives rendent ces bords transparents au centrage. Recette : l'adhésif
 * déborde d'à peine un caractère de part et d'autre de l'exergue, sans quoi
 * « végétales » paraît détaché de « hautes matières ». */
.bz-cover__highlight {
  align-items: center;
  aspect-ratio: 476 / 154;
  display: flex;
  flex: none;
  justify-content: center;
  margin-inline: -0.58em -0.92em;
  width: 11.5em;
}

.bz-cover__highlight .bz-scotch {
  inset: 0;
}

.bz-cover__suite {
  color: #1a1a1a;
  font-family: var(--bz-perle);
  font-size: 1.22em;
  margin-inline-start: 0.3em;
  position: relative;
  white-space: nowrap;
}

/* 792 (image) + 8 + 31 (légende) + 8 = 839, la hauteur de la couverture dans
 * la maquette. Hauteur figée pour ne pas dépendre des métriques de la fonte. */
.bz-cover__caption {
  box-sizing: content-box;
  height: 31px;
  padding-block: 8px;
}

/* ----------------------------------------------------------------- matières */

/* Géométrie reprise au pixel de la maquette (diapo de 1440x769). Les enfants
 * sont positionnés en pourcentage de .bz-matieres__inner, dont le ratio est
 * celui de la maquette : la composition reste donc fidèle à toute largeur,
 * jusqu'au point de rupture où elle s'empile. */
.bz-matieres {
  overflow: hidden;
}

.bz-matieres__track {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.bz-matieres__track::-webkit-scrollbar {
  display: none;
}

/* La diapo porte la couleur sur TOUTE la largeur : le fond de la section
 * change avec la matière, et c'est le défilement qui fait la transition. */
.bz-matieres__slide {
  scroll-snap-align: start;
}

.bz-matieres__inner {
  aspect-ratio: 1440 / 769;
  margin-inline: auto;
  max-width: 1440px;
  position: relative;
  width: 100%;
}

/* image : 62,71 — 551x635 */
.bz-matieres__media {
  height: 82.575%;
  inset-inline-start: 4.306%;
  position: absolute;
  top: 9.233%;
  width: 38.264%;
}

.bz-matieres__media img:not(.bz-scotch img) {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* L'adhésif mord sur le bord haut de la photo : pas d'overflow qui le rogne,
 * object-fit suffit à contenir l'image. */
.bz-matieres__media .bz-scotch {
  aspect-ratio: 321 / 133;
  inset-inline-start: 36.298%;
  top: -7.559%;
  width: 58.257%;
  z-index: 1;
}

/* cadre filaire : 675,67 — 703x640 */
.bz-matieres__panel {
  border: 1px solid var(--bz-noir);
  height: 83.225%;
  inset-inline-start: 46.875%;
  position: absolute;
  top: 8.713%;
  width: 48.819%;
}

/* symbole de la matière : 1284,67 — 94x102 */
.bz-matieres__symbol {
  aspect-ratio: 94 / 102;
  height: auto;
  inset-inline-start: 89.167%;
  position: absolute;
  top: 8.713%;
  width: 6.528%;
}

/* colonne de texte : 733,68 — 459 de large, premier texte à 60px du haut */
.bz-matieres__text {
  display: flex;
  flex-direction: column;
  gap: var(--bz-stack);
  inset-inline-start: 50.903%;
  padding-block-start: 60px;
  position: absolute;
  top: 8.843%;
  width: 31.875%;
}

.bz-matieres__title {
  margin: 0;
}

/* Maquette : les paragraphes d'une matière s'enchaînent sans ligne blanche. */
.bz-matieres .bz-body p + p {
  margin-block-start: 0;
}

/* flèches : 733,593 et 800,593 — 54x54, donc 13px d'écart */
.bz-matieres__nav {
  display: flex;
  gap: 13px;
  inset-inline-start: 50.903%;
  position: absolute;
  top: 77.113%;
}

/* Dans l'éditeur, les diapos sont empilées : tout est éditable sans naviguer. */
.bz-matieres--edit .bz-matieres__track {
  gap: 40px;
  grid-auto-flow: row;
  overflow: visible;
}

/* ----------------------------------------------------------------- produits */

.bz-produits__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--bz-cols, 4), minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-produits__link {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

.bz-produits__media {
  aspect-ratio: 270 / 385;
  background: var(--bz-noir);
  display: block;
  overflow: hidden;
}

.bz-produits__media img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.bz-produits__link:hover .bz-produits__media img {
  transform: scale(1.04);
}

.bz-produits__label {
  font-family: var(--bz-perle);
  font-size: 13px;
  line-height: 23px;
}

@media (max-width: 860px) {
  .bz-produits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------- vidéo */

/* 51px entre le haut de la section et l'image (2820 -> 2871 dans la maquette) :
 * l'écart de 100 avec la section précédente est déjà porté par la gouttière
 * basse de celle-ci. */
.bz-video {
  padding-block: 51px 0;
  position: relative;
}

/* À cheval sur le haut de l'image (le padding de la section), centré par
 * translate : en pourcentage de gauche, il dérivait dès que sa largeur
 * changeait (45 % sur mobile). */
.bz-video__scotch {
  aspect-ratio: 353 / 124;
  left: 50%;
  top: 51px;
  transform: translate(-50%, -58%) rotate(2.68deg);
  width: 24.5%;
  z-index: 1;
}

.bz-video__frame {
  aspect-ratio: 1440 / 832;
  background: var(--bz-noir);
  overflow: hidden;
  position: relative;
}

/* ------------------------------------------------------------------ lecteur */

/* Affiche et vidéo occupent tout le cadre ; le cadrage (zoom + point focal)
 * est posé en style par runtime/cadrage.ts, le cadre parent rogne. */
.bz-player {
  container-type: size;
  inset: 0;
  position: absolute;
}

.bz-player__media {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* L'affiche laisse passer le clic jusqu'à la vidéo, et s'efface au lancement. */
.bz-player__poster {
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Lecteur YouTube / Vimeo : le service centre sa vidéo 16/9 dans l'iframe et
 * comble le reste en noir. On lui donne donc une boîte 16/9 qui couvre le
 * cadre — comme object-fit: cover — et le cadre rogne le surplus : plus de
 * bandes noires, quel que soit le ratio du cadre. */
.bz-player__embed {
  border: 0;
  height: max(100cqh, 100cqw * 9 / 16);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 100cqh * 16 / 9);
  z-index: 1;
}

.bz-player.is-started .bz-player__poster {
  opacity: 0;
}

.bz-player video {
  cursor: pointer;
}

/* Pastille de 54 à 20px du coin, comme le badge de la maquette. */
.bz-play {
  background: none;
  border: 0;
  border-radius: 50%;
  height: 54px;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 54px;
  z-index: 1;
}

button.bz-play {
  cursor: pointer;
}

.bz-play svg {
  display: block;
  height: 100%;
  width: 100%;
}

.bz-video__caption {
  padding-block-start: 11px;
}

/* -------------------------------------------------------------- engagements */

/* Trois colonnes : une carte « large » en occupe deux, une « étroite » une —
 * c'est ce qui rend le réglage de largeur réellement agissant, et la grille
 * se recompose d'elle-même quand on ajoute ou retire une carte. */
.bz-engagements__grid {
  display: grid;
  gap: 21px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-engagements__item {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bz-engagements__item--large {
  grid-column: span 2;
}

.bz-engagements__item--etroite {
  grid-column: span 1;
}

.bz-engagements__media {
  aspect-ratio: 752 / 400;
  background: var(--bz-noir);
  overflow: hidden;
  position: relative;
}

.bz-engagements__item--etroite .bz-engagements__media {
  aspect-ratio: 366 / 400;
}

.bz-engagements__media img:not(.bz-badge-video) {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bz-engagements__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 26px;
}

@media (max-width: 860px) {
  .bz-engagements__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bz-engagements__item--large,
  .bz-engagements__item--etroite {
    grid-column: span 1;
  }

  /* Sur mobile la maquette garde les proportions du bureau : la carte étroite
   * reste un portrait (366x400), cadré comme sur grand écran. Écarts de la
   * maquette : 20 de la photo au titre, 21 du titre au texte, 37 du texte à la
   * carte suivante. */
  .bz-engagements__grid {
    row-gap: 32px;
  }

  .bz-engagements__item {
    gap: 19px;
  }

  .bz-engagements__text {
    gap: 12px;
    padding-inline: 27px;
  }
}

/* --------------------------------------------------------------- sur-mesure */

.bz-surmesure {
  isolation: isolate;
  overflow: hidden;
  /* 86 au-dessus du sur-titre, 76 sous le bouton : section de 540. */
  padding-block: clamp(56px, 5.97vw, 86px) clamp(50px, 5.28vw, 76px);
}

.bz-surmesure__monogramme {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: -1;
}

/* Sur mobile, le monogramme par défaut est remplacé par un recadrage de la
 * source, zoomé comme la maquette (quelques grandes courbes, traits à ~4 % de
 * la largeur). L'image entière en cover montrait des boucles bien plus
 * petites, et ses 39 Mpx étaient sous-échantillonnés par Safari iOS, d'où le
 * flou ; le recadrage (840x1143 de la source, servi en 1170 de large) reste
 * net jusqu'au 3x. */
.bz-surmesure__motif {
  background: url('/app/themes/beezard/assets/brand/monogramme-jaune-mobile.webp') center / cover no-repeat;
  inset: 0;
  position: absolute;
  z-index: -1;
}

.bz-surmesure--droite .bz-surmesure__inner {
  text-align: right;
}

/* Le bloc est un .bz-container : sa gouttière pose déjà le texte à 150 du
 * bord, comme la maquette. (Une marge supplémentaire l'y ajoutait une seconde
 * fois — le texte finissait à 300.) */
.bz-surmesure--gauche .bz-surmesure__inner {
  text-align: left;
}

/* « associations singulières » : l'exergue se pose en fin de titre, dans le
 * flux, donc elle suit le retour à la ligne au lieu de le chevaucher. */
.bz-surmesure__heading {
  display: block;
}

.bz-surmesure__heading-text {
  margin-inline-end: 0.2em;
}

.bz-surmesure__highlight {
  display: inline-block;
  vertical-align: baseline;
}

.bz-surmesure__highlight {
  font-size: clamp(30px, 4.24vw, 61px);
}

/* L'adhésif se cale sur le mot plutôt que sur une largeur fixe : c'est le mot
 * qui porte l'exergue, quelle que soit sa longueur. */
.bz-surmesure__highlight .bz-scotch {
  aspect-ratio: 405 / 116;
  left: 50%;
  top: 50%;
  transform: translate(-44%, -45%);
  width: 122%;
}

.bz-surmesure__body {
  margin-inline-start: auto;
  max-width: 460px;
}

/* Maquette : les deux paragraphes s'enchaînent sans ligne blanche. */
.bz-surmesure__body p + p {
  margin-block-start: 0;
}

.bz-surmesure--gauche .bz-surmesure__body {
  margin-inline: 0 auto;
}

/* Écarts de la maquette, mesurés d'œil de lettre à œil de lettre : 27 du
 * sur-titre au titre, 116 de la seconde ligne du titre au texte, 42 du texte
 * au filet du bouton (les marges ci-dessous en déduisent l'interlignage). */
.bz-surmesure .bz-stack > .bz-eyebrow + * {
  margin-block-start: 22px;
}

.bz-surmesure .bz-stack > .bz-title + * {
  margin-block-start: 37px;
}

.bz-surmesure .bz-stack > .bz-surmesure__action {
  margin-block-start: 21px;
}

.bz-surmesure__action {
  margin: 0;
}

/* ------------------------------------------------------------------- footer */

.bz-footer {
  padding-block: clamp(48px, 6.25vw, 90px) clamp(48px, 5.42vw, 78px);
}

.bz-footer__inner {
  align-items: start;
  column-gap: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 62px;
}

/* Le logo a sa propre ligne. Le fichier porte 42px de marge transparente à
 * gauche (sur 860) : on la rattrape pour que le symbole tombe sur la
 * gouttière, comme les coordonnées en dessous. */
.bz-footer__logo {
  grid-column: 1 / -1;
  height: auto;
  margin-inline-start: -17px;
  max-width: 286px;
  width: 100%;
}

/* Interlignage de la maquette : 21 dans un paragraphe, 40 d'un paragraphe au
 * suivant. */
.bz-footer__address {
  line-height: 21px;
}

.bz-footer__address p + p {
  margin-block-start: 19px;
}

.bz-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 23px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bz-footer__nav a {
  text-decoration: none;
}

.bz-footer__legal {
  align-self: end;
  text-align: right;
}

@media (max-width: 860px) {
  /* Maquette mobile : marges de 33, logo à 41 du haut, copyright détaché des
   * liens. */
  .bz-footer {
    padding-block-start: 27px;
  }

  .bz-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 33px;
    row-gap: 46px;
  }

  .bz-footer__logo {
    margin-inline-start: -14px;
  }

  .bz-footer__legal {
    margin-block-start: 46px;
    text-align: left;
  }
}

/* ------------------------------------------------------------- popin inscr. */

/* Mesures de la maquette : boîte de 945x545, visuel 462 à gauche, colonne de
 * texte de 365 calée à 484. */
.bz-popin {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--bz-gutter);
  position: fixed;
  z-index: 100;
}

.bz-popin[hidden] {
  display: none;
}

.bz-popin__voile {
  background: rgb(0 0 0 / 50%);
  inset: 0;
  position: absolute;
}

.bz-popin__dialog {
  aspect-ratio: 945 / 545;
  background: var(--bz-blanc-casse);
  display: flex;
  max-width: 945px;
  position: relative;
  width: 100%;
}

.bz-popin__media {
  background: var(--bz-noir);
  flex: 0 0 48.889%;
  overflow: hidden;
}

.bz-popin__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bz-popin__contenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 0 100px;
  padding-inline-start: 2.328%;
  width: 40.95%;
}

/* Hauteurs des boîtes figées sur la maquette (24 et 42). Sans cela, la
 * position du titre suivrait les métriques de la fonte — et bougerait le jour
 * où la vraie Garabosse remplacera le repli. */
.bz-popin__contenu .bz-eyebrow {
  height: 24px;
}

.bz-popin__titre {
  height: 42px;
}

.bz-popin__titre {
  font-family: var(--bz-perle);
  font-size: 35px;
  line-height: 30px;
  margin: 0;
}

/* Champ à 224 et bouton à 298 dans une boîte de 945x545 : positionnés, et non
 * portés par le flux, pour ne pas dépendre de la hauteur réelle du corps.
 * (La maquette pose le bouton à 486 et le champ à 484 ; ces 2px d'écart sont
 * un artefact, les deux sont alignés ici.) */
.bz-popin__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  inset-inline-start: 51.217%;
  position: absolute;
  top: 41.101%;
  width: 35.767%;
}

.bz-popin__champ {
  background: transparent;
  border: 1px solid var(--bz-noir);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--bz-noir);
  display: block;
  font-family: var(--bz-perle);
  font-size: 13px;
  height: 54px;
  line-height: 30px;
  padding-inline: 19px;
  width: 100%;
}

.bz-popin__champ:focus {
  box-shadow: inset 0 0 0 1px var(--bz-noir);
  outline: none;
}

.bz-popin__champ::placeholder {
  color: var(--bz-noir);
  opacity: 0.5;
}

.bz-btn--noir {
  background: var(--bz-noir);
  border-color: var(--bz-noir);
  color: var(--bz-blanc-casse);
  cursor: pointer;
  min-width: 211px;
  width: 211px;
}

/* 183 dans la popin sur-mesure, contre 211 dans la popin inscription. */
.bz-sm .bz-btn--noir {
  min-width: 183px;
  width: 183px;
}

.bz-btn--noir:hover,
.bz-btn--noir:focus-visible {
  background: transparent;
  color: var(--bz-noir);
}

/* Croix de fermeture : 40x40 à 905,0 dans une boîte de 945. */
.bz-popin__fermer {
  backdrop-filter: blur(20px);
  background: transparent;
  border: 0;
  border-radius: 40px;
  /* Safari iOS teinte les boutons en bleu système par défaut. */
  color: var(--bz-noir);
  cursor: pointer;
  height: 40px;
  inset-inline-end: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

.bz-popin__fermer span,
.bz-popin__fermer span::before {
  background: currentColor;
  content: '';
  height: 1px;
  inset-inline-start: 50%;
  position: absolute;
  top: 50%;
  width: 16px;
}

.bz-popin__fermer span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bz-popin__fermer span::before {
  inset-inline-start: 0;
  top: 0;
  transform: rotate(-90deg);
}

/* Dans l'éditeur, la popin est posée à plat : ni voile, ni fixed, ni hidden. */
.bz-popin--edit {
  display: block;
  padding: 0;
  position: relative;
}

.bz-popin--edit .bz-popin__dialog {
  margin-inline: auto;
}

.bz-popin--edit .bz-popin__champ {
  align-items: center;
  display: flex;
  opacity: 0.5;
}

.bz-visuallyhidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bz-field__help {
  font-size: 12px;
  margin: -8px 0 16px;
  opacity: 0.7;
}

/* -------------------------------------------------------- popin sur-mesure */

/* Cadre de 1440x1024 : visuel à 62,119 (550x782), cadre filaire à 675,119
 * (703x789), colonne de texte à 730, bouton à 732,802. */
.bz-sm {
  inset: 0;
  overflow-y: auto;
  position: fixed;
  z-index: 110;
}

.bz-sm[hidden] {
  display: none;
}

.bz-sm__inner {
  aspect-ratio: 1440 / 1024;
  margin-inline: auto;
  max-width: 1440px;
  position: relative;
  width: 100%;
}

.bz-sm__media {
  height: 76.367%;
  inset-inline-start: 4.306%;
  overflow: hidden;
  position: absolute;
  top: 11.621%;
  width: 38.194%;
}

.bz-sm__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bz-sm__scotch {
  aspect-ratio: 306 / 117;
  inset-inline-start: 12.778%;
  top: 7.129%;
  width: 21.25%;
  z-index: 1;
}

.bz-sm__box {
  border: 1px solid var(--bz-noir);
  display: flex;
  flex-direction: column;
  inset-inline-start: 46.875%;
  /* Hauteur de la maquette en minimum, jamais d'ascenseur interne : si le
   * contenu dépasse (écran plus étroit), le cadre grandit et c'est la popin
   * qui défile. */
  min-height: 77.051%;
  position: absolute;
  top: 11.621%;
  width: 48.819%;
}

.bz-sm__contenu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: 61px 89px 40px 55px;
}

.bz-sm__titre {
  /* 50 : le titre « Vous avez un projet ou simplement une question ? » tient
   * sur deux lignes et laisse le formulaire dans le cadre. */
  font-size: 50px;
  margin: 0;
}

/* Le cadre reçoit le focus à l'ouverture (sans défilement) : pas de contour. */
.bz-sm__inner:focus {
  outline: none;
}

/* Pas de 64 entre les intitulés, bouton à 802 dans le cadre de 1024. La
 * boîte d'intitulé de la Garabosse fait 16px : il reste 25 entre deux lignes. */
.bz-sm__form {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-block-start: 43px;
}

.bz-sm__champ {
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
}

.bz-sm__champ input,
.bz-sm__champ > span:last-child:not(.bz-sm__erreur) {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--bz-noir);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--bz-noir);
  display: block;
  font-family: var(--bz-perle);
  font-size: 13px;
  height: 23px;
  padding: 0 2px;
  width: 100%;
}

/* Pas d'anneau de focus du navigateur (bleu, arrondi, hors charte) : le
 * champ actif se signale par un soulignement épaissi, la zone de message par
 * un cadre noir — un repère visible au clavier comme à la souris. */
.bz-sm__champ input:focus,
.bz-sm__message textarea:focus {
  outline: none;
}

.bz-sm__champ input:focus {
  border-block-end-width: 2px;
}

.bz-sm__message textarea:focus {
  border-color: var(--bz-noir);
  box-shadow: inset 0 0 0 1px var(--bz-noir);
}

.bz-sm__duo {
  display: grid;
  gap: 28px;
  grid-template-columns: 250fr 279fr;
}

.bz-sm__message {
  margin: 0;
  position: relative;
}

/* Mention RGPD : en tout petit mais lisible, en Garamond. Le gap du
 * formulaire la décolle déjà du message et du bouton. */
.bz-sm__rgpd {
  font-family: var(--bz-garamond);
  font-size: 11px;
  line-height: 1.4;
}

.bz-sm__rgpd p {
  margin: 0;
}

.bz-sm__rgpd a {
  color: inherit;
  text-decoration: underline;
}

.bz-sm__message textarea,
.bz-sm__message > span:not(.bz-sm__erreur) {
  background: transparent;
  border: 1px solid rgb(0 0 0 / 40%);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--bz-noir);
  display: block;
  font-family: var(--bz-perle);
  font-size: 13px;
  height: 133px;
  line-height: 30px;
  padding: 8px 14px;
  resize: vertical;
  width: 100%;
}

.bz-sm__message > span:not(.bz-sm__erreur) {
  opacity: 0.6;
}

/* Le gris par défaut du navigateur disparaît sur le vert : noir adouci. */
.bz-sm__message textarea::placeholder {
  color: var(--bz-noir);
  opacity: 0.6;
}

.bz-sm__champ input[aria-invalid='true'],
.bz-sm__message textarea[aria-invalid='true'] {
  border-color: var(--bz-bordeaux);
  border-width: 0 0 2px;
}

.bz-sm__message textarea[aria-invalid='true'] {
  border-width: 2px;
}

/* Le message se loge dans l'écart de 25 sous le filet : afficher une erreur
 * ne décale pas le formulaire. Noir pour rester lisible sur le vert ; c'est
 * le filet épaissi qui signale le champ. */
.bz-sm__erreur {
  font-family: var(--bz-perle);
  font-size: 12px;
  inset-inline-start: 0;
  line-height: 16px;
  position: absolute;
  top: calc(100% + 4px);
}

/* Écran de remerciement : la signature se pose en bas du cadre. */
.bz-sm__signature {
  margin-block-start: auto;
  padding-block-start: 60px;
}

.bz-sm__fermer {
  background: transparent;
  border: 0;
  /* Safari iOS teinte les boutons en bleu système par défaut. */
  color: var(--bz-noir);
  cursor: pointer;
  height: 40px;
  inset-inline-end: 2.917%;
  position: absolute;
  top: 3.32%;
  width: 40px;
}

.bz-sm__fermer span,
.bz-sm__fermer span::before {
  background: currentColor;
  content: '';
  height: 1px;
  inset-inline-start: 50%;
  position: absolute;
  top: 50%;
  width: 14px;
}

.bz-sm__fermer span {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bz-sm__fermer span::before {
  inset-inline-start: 0;
  top: 0;
  transform: rotate(-90deg);
}

/* Dans l'éditeur : à plat, dans le flux. */
.bz-sm--edit {
  overflow: visible;
  position: relative;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  /* Les ratios de la maquette sont pensés pour un écran large : gardés tels
   * quels sur téléphone, la couverture s'écrase à ~215px de haut et le verrou
   * n'y tient plus. */
  /* Échelle typographique de la maquette mobile (cadre de 390) : titres à 60,
   * corps à 16 — et non la réduction proportionnelle du bureau, qui tombait à
   * 40 et 19. Interlignes inchangés. */
  :root {
    /* Maquette mobile (cadre de 402) : 33 de marge et 80 entre deux blocs. */
    --bz-gutter: min(8.2vw, 40px);
    --bz-after-eyebrow: 34px;
    --bz-section-gap: 80px;
    --bz-title-size: 60px;
  }

  .bz-title--h2 {
    font-size: 35px;
  }


  .bz-body:not(.bz-body--small) {
    font-size: 16px;
  }

  .bz-cover--moyenne .bz-cover__media {
    aspect-ratio: 3 / 4;
    max-height: 80svh;
  }

  /* Maquette mobile : la photo et sa légende remplissent l'écran, rien de la
   * section suivante n'affleure. 40 = hauteur de la bande de légende. */
  .bz-cover--grande .bz-cover__media,
  .bz-cover--plein-ecran .bz-cover__media {
    aspect-ratio: auto;
    height: calc(100svh - 40px);
  }

  .bz-cover__caption {
    height: 24px;
  }

  .bz-cover__lockup {
    width: min(858px, calc(100% - 2 * var(--bz-gutter)));
  }

  /* Maquette mobile (cadre de 402) : photo au ratio du bureau, puis un cadre
   * filaire qui porte sur-titre, symbole, titre, texte et flèches.
   *
   * Toutes les diapos d'une ligne de grille ont la même hauteur — celle de la
   * plus longue (les déshydratés). Le cadre s'étire jusqu'en bas et les
   * flèches y sont posées : elles restent au même endroit d'une matière à
   * l'autre. */
  .bz-matieres__inner {
    aspect-ratio: auto;
    display: grid;
    /* minmax(0, 1fr) : une colonne implicite (auto) s'élargirait sur le
     * contenu le plus large et déborderait à droite — marge de 33 à gauche,
     * 15 à droite à 390px. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    height: 100%;
    /* 48 au-dessus de la photo : l'adhésif, qui en déborde de 28, garde une
     * vingtaine de pixels de couleur avant le bord de la section (maquette). */
    padding: 48px 33px 28px;
  }

  .bz-matieres__media,
  .bz-matieres__panel,
  .bz-matieres__symbol,
  .bz-matieres__text,
  .bz-matieres__nav {
    grid-column: 1;
    height: auto;
    inset: auto;
    position: static;
    width: auto;
  }

  /* La photo reste le repère de son adhésif. */
  .bz-matieres__media {
    aspect-ratio: 551 / 635;
    grid-row: 1;
    margin-block-end: 21px;
    min-height: 0;
    position: relative;
  }

  .bz-matieres__panel {
    grid-row: 2 / 4;
  }

  .bz-matieres__symbol {
    align-self: start;
    grid-row: 2;
    justify-self: end;
    margin: 11px 14px 0 0;
    width: 44px;
  }

  .bz-matieres__text {
    grid-row: 2;
    padding: 36px 19px 0;
  }

  .bz-matieres__nav {
    grid-row: 3;
    padding: 24px 20px 20px;
  }

  .bz-matieres .bz-title {
    font-size: 50px;
  }

  /* Maquette : 41 du sur-titre au titre, 9 du titre au texte. */
  .bz-matieres__text {
    gap: 0;
  }

  .bz-matieres__title {
    margin-block: 41px 9px;
  }

  .bz-matieres .bz-body {
    line-height: 26px;
  }

  /* Maquette mobile : tout reste calé à droite, titre à 48, exergue à 38. */
  .bz-surmesure__heading {
    font-size: 50px;
  }

  .bz-surmesure__highlight {
    font-size: 38px;
  }

  .bz-surmesure__body {
    max-width: none;
  }

  /* « singulières » passe seul à la ligne : l'espace réservé avant lui
   * décollerait « associations » du bord droit. */
  .bz-surmesure__heading-text {
    margin-inline-end: 0;
  }

  /* Sur mobile, les deux paragraphes coulent d'un seul tenant. */
  .bz-surmesure__body p {
    display: inline;
  }

  .bz-surmesure__body p + p::before {
    content: ' ';
  }

  .bz-surmesure {
    padding-block: 50px 49px;
  }

  .bz-surmesure .bz-stack > .bz-title + * {
    margin-block-start: 10px;
  }

  .bz-surmesure .bz-stack > .bz-surmesure__action {
    margin-block-start: 20px;
  }

  /* L'adhésif mobile part dans le mot et file jusqu'au bord de l'écran (la
   * section le rogne). */
  /* Maquette mobile : l'adhésif part sous le « s » et file jusqu'au bord
   * droit de l'écran. Adhésif entier, jamais étiré — un fragment agrandi
   * perdait ses bords déchirés et paraissait déformé. */
  .bz-surmesure__highlight .bz-scotch {
    left: 0;
    transform: translate(3%, -50%);
    width: 122%;
  }

  /* Toujours calées à droite, comme sur bureau ; plus petites, sans quoi
   * « Cuir de tomate et origan, Yvelines 2026 » passe sur deux lignes. */
  .bz-caption {
    font-size: 14px;
    padding-inline: 28px;
  }

  .bz-video__scotch {
    width: 45%;
  }

  /* Maquette mobile : cadre de 402x220, légende à 20 du bord droit. */
  .bz-video__frame {
    aspect-ratio: 402 / 220;
  }

  .bz-video__caption {
    padding-inline-end: 20px;
  }

  /* La boîte de 945x545 ne tient pas : on empile, et le visuel devient une
   * bannière plutôt que la moitié de la popin. */
  .bz-popin__dialog {
    aspect-ratio: auto;
    flex-direction: column;
    max-height: 90svh;
    overflow-y: auto;
  }

  .bz-popin__media {
    flex: 0 0 auto;
    height: 160px;
  }

  .bz-popin__contenu {
    padding: 32px 24px 40px;
    width: 100%;
  }

  .bz-popin__form {
    inset-inline-start: auto;
    margin-block-start: 32px;
    position: static;
    top: auto;
    width: 100%;
  }

  .bz-popin__champ,
  .bz-btn--noir {
    width: 100%;
  }

  /* Sur-mesure : le cadre de 1440x1024 n'a plus de sens, on empile. La croix
   * a sa bande verte au-dessus de la photo — posée dessus, noire sur le fond
   * noir du visuel, elle était invisible. */
  .bz-sm__inner {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 64px var(--bz-gutter) 24px;
  }

  .bz-sm__media,
  .bz-sm__box {
    height: auto;
    inset-inline-start: auto;
    position: static;
    top: auto;
    width: 100%;
  }

  .bz-sm__media {
    aspect-ratio: 550 / 782;
    max-height: 40svh;
  }

  /* L'adhésif bleu à cheval sur le haut de la photo, comme sur bureau. */
  /* Maquette : l'adhésif fait la moitié de la photo et en déborde de 44 %
   * de sa hauteur au-dessus. */
  .bz-sm__scotch {
    inset-inline-start: 27%;
    top: 36px;
    width: 46.5%;
  }

  /* Mêmes tailles et écarts que le bloc des matières : titre à 50, 41 du
   * sur-titre au titre, 9 du titre au texte, texte en 16/26. */
  .bz-sm__contenu {
    gap: 0;
    padding: 36px 19px 24px;
  }

  /* 46 et non 50 : à 50, « simplement » (312) déborde du cadre (298). */
  .bz-sm__titre {
    font-size: 46px;
    margin-block: 0 9px;
  }

  .bz-sm__contenu > .bz-eyebrow + .bz-sm__titre {
    margin-block-start: 41px;
  }

  .bz-sm__contenu .bz-body:not(.bz-body--small) {
    line-height: 26px;
  }

  .bz-sm__form {
    padding-block-start: 32px;
  }

  .bz-sm__signature {
    padding-block-start: 48px;
  }

  .bz-sm__duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .bz-sm__fermer {
    inset-inline-end: calc(var(--bz-gutter) - 12px);
    top: 12px;
  }
}

/* ------------------------------------------------------------------ éditeur */

/* Repère affiché à la place d'une liste vide — jamais rendu sur le front. */
.bz-editor-hint {
  border: 1px dashed currentColor;
  font-family: var(--bz-perle);
  font-size: 13px;
  opacity: 0.6;
  padding: 16px;
  text-align: center;
}

.bz-header--edit {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .bz-produits__media img,
  .bz-btn {
    transition: none;
  }
}