/*
Theme Name: Arbre de Jade
Theme URI:
Author:
Description: Thème block-based (FSE) scaffoldé par sc-php:setup.
Version: 0.2.8
Requires at least: 6.5
Requires PHP: 8.0
*/

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--font-lineHeight-base);
  color: var(--color-semantic-text);
  background-color: var(--color-semantic-background);
}

a { color: inherit; }

:focus-visible {
  outline: var(--border-width-thick) solid var(--color-semantic-focus);
  outline-offset: var(--space-2);
}

/* site-entete */
.site-entete {
  position: relative;
  background-color: var(--color-neutral-0);
}
.site-entete__lavis {
  display: block;
  width: 100%;
  height: 120px;
  z-index: var(--zIndex-base);
  pointer-events: none;
}
.site-entete__lavis--texture {
  background-image: url('assets/img/montagne-droite.webp');
  background-repeat: no-repeat;
  background-position: right -22px bottom;
  background-size: min(78%, 320px) auto;
}
@media (min-width: 834px) {
  .site-entete__lavis { height: 190px; }
  .site-entete__lavis--texture {
    background-image: url('assets/img/montagne-gauche.webp'), url('assets/img/montagne-droite.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: left -30px bottom, right -40px bottom;
    background-size: min(44%, 540px) auto, min(52%, 640px) auto;
  }
}

/* site-nav */
.site-nav {
  position: relative;
  z-index: var(--zIndex-raised);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-6);
  margin: -26px auto 0;
  padding: 0 0 var(--space-18);
}
.site-nav__groupe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  gap: var(--space-26);
}
/* Le pinceau est etire sur toute la largeur du groupe (inset: 0), mais son trace
   n'est pas centre dans le SVG : barycentre alpha mesure a 56,4 % de la largeur
   a gauche, 44,0 % a droite. Les liens sont donc decales de 2 x l'ecart au
   centre pour se poser sur l'encre et non a cote. En pourcentage, la
   compensation suit la largeur du groupe a toutes les tailles d'ecran. */
.site-nav__groupe--gauche { order: 2; padding-inline: 12.8% 0; }
.logo { order: 1; }
.site-nav__groupe--droite { order: 3; padding-inline: 0 12%; }
@media (min-width: 834px) {
  .site-nav {
    grid-template-columns: 1fr auto 1fr;
    justify-items: stretch;
    align-items: center;
    gap: 0;
    max-width: var(--size-container-wide);
    margin: -34px auto 0;
    padding: 0 var(--space-16) var(--space-26);
  }
  .site-nav__groupe {
    width: auto;
    gap: var(--space-22);
  }
  .site-nav__groupe--gauche { order: initial; }
  .logo { order: initial; }
  .site-nav__groupe--droite { order: initial; }
}
/* Palier desktop, pose a 1024px. La maquette n'a que deux cadres — 834
   (tablette) et desktop sans largeur imposee — et le palier desktop avait
   d'abord ete cale sur 1244, la largeur ou .section__inner atteint son plafond
   de 1180 + 2*32 de gouttiere. Mauvais raisonnement : entre 1024 et 1243 le
   conteneur fait deja plus de 1000px, et une fenetre de cette taille recevait
   une typographie et des grilles dessinees pour 834 — titres maigres, colonnes
   en sous-nombre, texte plaque a gauche d'un conteneur trop large pour lui.
   Le seuil est donc la largeur a partir de laquelle la mise en page desktop
   tient, pas celle ou elle se fige. Seul le medaillon du hero, qui deborde de
   74px hors de sa photo, reste conditionne plus haut. */
@media (min-width: 1024px) {
  .site-nav__groupe { gap: var(--space-34); }
}
.site-nav__lien {
  position: relative;
  display: inline-block;
  /* 6px 2px et non 2px 0 : la reference rend « 6px 2px » aux trois breakpoints,
     et tokens.json nomme space.6 « n=11, 9 pages — site-nav ». Le soulignement
     ::after reste centre (top:50%; translateY(-50%)), la cible tactile de 44px
     n'est pas affectee. Mesure de fidelite 2026-08-19. */
  padding-block: var(--space-6);
  padding-inline: var(--space-2);
  color: var(--color-brand-brun);
  text-decoration: none;
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-lineHeight-base);
  letter-spacing: var(--font-letterSpacing-capitales-2);
  text-transform: var(--font-transform-capitales);
}
.site-nav__lien::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--size-target-min);
  transform: translateY(-50%);
}
.site-nav__lien--actif {
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}
.site-nav__pinceau {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.site-nav__groupe--gauche .site-nav__pinceau { background-image: url('assets/img/aquarelle-gauche.svg'); }
.site-nav__groupe--droite .site-nav__pinceau { background-image: url('assets/img/aquarelle-droite.svg'); }

/* logo */
.logo {
  position: relative;
  display: block;
  width: 106px;
  height: 174px;
  margin-top: -34px;
  background-image: url('assets/img/logo-jade.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-brand-brun);
  text-decoration: none;
}
.logo::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--size-target-min);
  transform: translateY(-50%);
}

/* titre — calligraphie brune, centrée, pour tous les titres (maquette .titre) */
.titre {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-lineHeight-tight);
  letter-spacing: var(--font-letterSpacing-titre);
  color: var(--color-brand-brun);
  text-align: center;
  margin: 0;
}
h1.titre { font-size: var(--font-size-hero-sm); }
@media (min-width: 834px) {
  h1.titre { font-size: var(--font-size-hero-md); }
}
@media (min-width: 1024px) {
  h1.titre { font-size: var(--font-size-hero); }
}
.titre--section, .titre--frise {
  font-size: 34px; /* pas de token size correspondant (mobile) — mesuré maquette, cf. proposed_extensions */
}
@media (min-width: 834px) {
  .titre--section, .titre--frise { font-size: var(--font-size-titre-section-md); }
}
@media (min-width: 1024px) {
  .titre--section, .titre--frise { font-size: var(--font-size-titre-section); }
}
.titre--bloc { font-size: var(--font-size-titre-bloc-sm); }
@media (min-width: 834px) {
  .titre--bloc { font-size: var(--font-size-titre-bloc); }
}
.galerie__encadre .titre--bloc { font-size: var(--font-size-titre-bloc-sm); text-align: left; }
@media (min-width: 834px) {
  .galerie__encadre .titre--bloc { font-size: var(--font-size-titre-bloc); }
}
.titre--carte { font-size: var(--font-size-titre-carte); }
.titre--gauche { text-align: left; }

/* frise : ornement grecque de part et d'autre des titres de section — masqué
   sur mobile (< breakpoint-md), affiché en plein sur tablette/desktop */
.titre--frise { display: flex; align-items: center; justify-content: center; gap: var(--space-0); }
.titre--frise .titre__mot { flex: 0 1 auto; }
.titre--frise::before, .titre--frise::after {
  content: ""; flex: 1 1 0; height: var(--space-18); max-width: 0; min-width: 0; opacity: .9;
  background-image: url('assets/img/frise-grecque.png');
  background-repeat: repeat-x; background-size: auto var(--space-18);
  background-position: center;
}
.titre--frise::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
}
.titre--frise::after {
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 25%, transparent 100%);
}
@media (min-width: 834px) {
  .titre--frise { gap: var(--space-28); }
  .titre--frise::before, .titre--frise::after { max-width: 230px; }
}

/* chapo */
.chapo {
  font-size: var(--font-size-body);
  color: var(--color-neutral-900);
  text-align: center;
  max-width: var(--size-container-narrow);
  margin: var(--space-26) auto 0;
}
@media (min-width: 834px) {
  .chapo { font-size: var(--font-size-body-lg); }
}

/* texte */
.texte { line-height: var(--font-lineHeight-base); }
.texte p + p { margin-top: var(--space-16); }
.texte--colonne { max-width: 45rem; margin: var(--space-34) auto 0; }
.texte--colonne h3 {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-small);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-700);
  margin: var(--space-34) 0 var(--space-10);
}
.texte--colonne .titre--bloc { margin-bottom: var(--space-8); }
.texte--colonne a { color: var(--color-brand-brun); }
.duo__texte p { text-align: left; }

/* fil */
.fil {
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-4);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
  text-align: center;
}
.fil a { color: var(--color-neutral-700); text-decoration: none; border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-20); }

/* a-confirmer */
.a-confirmer { border-bottom: var(--border-width-hairline) dotted var(--color-brand-brun); cursor: help; }

/* section */
.section { position: relative; padding-block: var(--space-section-sm); padding-inline: 0; /* bat le padding du core :where(.wp-block-group.has-background) quand la section porte un preset de fond */ }
@media (min-width: 834px) {
  .section { padding-block: var(--space-section-md); }
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-section-lg); }
}
.section__inner {
  max-width: var(--size-container-max);
  margin-inline: auto;
  padding-inline: var(--space-22);
}
/* Gouttière fluide, DEV-014. La maquette pose 32px fixes, mais elle n'a que deux
   cadres — 834 et desktop large — et ne montre jamais la plage intermédiaire. Or le
   conteneur plafonne à 1180 : en dessous, `margin-inline: auto` vaut 0 et le texte
   reste collé à 32px du bord d'une fenêtre qui en fait 1080. La valeur est le `min`
   de deux droites, ce qui évite toute media query et toute discontinuité :
   • `14.458% - 88.58px` monte de 32px (parent 834) à 56px (parent 1000) ;
   • `646px - 50%` décroît exactement à la vitesse où la marge auto croît une fois
     le plafond atteint, si bien que marge + gouttière reste à 56px jusqu'à 1228,
     largeur à partir de laquelle la borne basse de 32px reprend et rend au desktop
     large sa ligne utile de 1116px — le rendu que la maquette valide.
   En pourcentage du bloc contenant et non en vw : `100vw` compte la barre de
   défilement, la largeur du conteneur non, et la rampe serait décalée d'autant. */
@media (min-width: 834px) {
  .section__inner { padding-inline: var(--size-gutter-content); }
}
/* --surface = le fond que la section pose sous ses enfants. Les cartes et les
   pastilles qui doivent « disparaitre » dans la section s'y accrochent au lieu
   de republier un blanc en dur — maquette, meme mecanique. */
.section--anis { background-color: var(--color-domain-wash-anis); --surface: var(--color-domain-wash-anis); }
.section--blanc { background-color: var(--color-neutral-0); --surface: var(--color-neutral-0); }
.section--brun { background-color: var(--color-domain-wash-sable); --surface: var(--color-domain-wash-sable); }
.section--motif {
  background-color: var(--color-neutral-100);
  --surface: var(--color-neutral-100);
  background-image: url('assets/img/motif-vagues.webp');
  background-size: 164px 152px;
}

/* Transitions douces entre sections : jamais de separateur net. Le blanc de la
   page deborde sur la section et s'y eteint, en haut comme en bas — maquette. */
.section--motif::before, .section--motif::after,
.section--brun::before, .section--brun::after,
.section--anis::before, .section--anis::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.75rem; /* 44px — mesure maquette mobile */
  pointer-events: none;
}
.section--motif::before, .section--brun::before, .section--anis::before {
  top: 0;
  background: linear-gradient(180deg, var(--color-neutral-0) 0%, transparent 100%);
}
.section--motif::after, .section--brun::after, .section--anis::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--color-neutral-0) 0%, transparent 100%);
}
@media (min-width: 834px) {
  .section--motif::before, .section--motif::after,
  .section--brun::before, .section--brun::after,
  .section--anis::before, .section--anis::after { height: 5.625rem; /* 90px — mesure maquette */ }
}
.section--serre { padding-block: var(--space-section-sm); }
@media (min-width: 834px) {
  .section--serre { padding-block: 4.75rem; /* 76px — pas de token, mesuré maquette */ }
}

/* duo */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-34);
}
.duo__visuel { display: flex; justify-content: center; }
.duo--inverse { direction: rtl; }
.duo--inverse > * { direction: ltr; }
@media (min-width: 834px) {
  .duo { grid-template-columns: 1fr 240px; gap: var(--space-48); align-items: center; }
  .duo--large { grid-template-columns: 1fr 1fr; }
  .duo--moities { grid-template-columns: 1fr 1fr; align-items: start; }
  .duo--aside { grid-template-columns: 1fr 280px; align-items: start; }
  .duo--portrait { grid-template-columns: 180px 1fr; }
}
@media (min-width: 1024px) {
  .duo { grid-template-columns: 1fr 300px; gap: 4.5rem; /* 72px — pas de token, mesuré maquette */ }
  .duo--large { grid-template-columns: 1.15fr 1fr; }
  .duo--moities { grid-template-columns: 1fr 1fr; gap: var(--space-44); }
  .duo--aside { grid-template-columns: 1fr 340px; }
  .duo--portrait { grid-template-columns: 210px 1fr; }
}
/* pied */
.pied {
  background-color: var(--color-domain-wash-pied);
  background-image: url('assets/img/footer-lavis.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-brand-brun);
  padding-top: 96px; /* pas de token exact (space-84=84px, space-108=108px) — mesuré maquette, cf. proposed_extensions */
  padding-bottom: var(--space-34);
}
.pied__inner {
  max-width: var(--size-container-max);
  margin-inline: auto;
  padding: 0 var(--space-16);
}
.pied__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-34);
}
@media (min-width: 834px) {
  .pied__grille { grid-template-columns: repeat(4, 1fr); }
}
.pied__grille h2, .pied__grille h3 {
  color: var(--color-brand-nuit);
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-letterSpacing-capitales-6);
  text-transform: var(--font-transform-capitales);
}
.pied__grille ul a {
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-meta);
  line-height: var(--font-lineHeight-relaxed);
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-32);
}
.pied__tel {
  width: fit-content;
  font-size: var(--font-size-meta);
  line-height: var(--font-lineHeight-relaxed);
  letter-spacing: var(--font-letterSpacing-capitales-1);
}
.pied__tel a { color: var(--color-brand-brun); font-weight: var(--font-weight-semibold); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-40);
  padding-top: var(--space-20);
  border-top: var(--border-width-hairline) solid var(--color-alpha-brun-20);
}
.pied__legal {
  font-size: var(--font-size-meta);
  line-height: var(--font-lineHeight-relaxed);
  text-align: center;
  color: var(--color-domain-encre-pied);
  margin: 0;
}
@media (min-width: 834px) {
  .pied__legal { text-align: left; }
}
.pied__legal a { color: inherit; }
.pied__reseaux { display: flex; gap: var(--space-10); list-style: none; margin: 0; padding: 0; }
.pied__reseaux a { color: var(--color-brand-brun); }
.pied__reseaux svg { width: var(--space-20); height: var(--space-20); fill: currentColor; }

/* btn-pinceau */
.btn-pinceau {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px; /* pas de token size correspondant — mesuré maquette */
  height: var(--space-56);
  padding: 0 var(--space-34);
  white-space: nowrap;
  /* Reset du <button> natif (single-evenement) : la classe est aussi posée sur
     des <a>, qui n'ont pas ces styles par défaut — sans effet sur eux ici. */
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background-color: transparent;
  /* Trace bouton_bgd.svg (production), extraite telle quelle depuis la maquette
     — cf. wp-content/themes/arbre-de-jade/assets/img/bouton-pinceau.svg. Étirée
     (100% 100%), pas contain : la trace suit la boîte au lieu de laisser le
     libellé dépasser sur les longs intitulés. */
  background-image: url('assets/img/bouton-pinceau.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-brand-brun);
  text-decoration: none;
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-letterSpacing-capitales-4);
  text-transform: var(--font-transform-capitales);
  text-align: center;
  border-radius: var(--radius-none);
}
.btn-pinceau:hover { opacity: 0.88; }
.btn-pinceau::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--size-target-min);
  transform: translateY(-50%);
}
.btn-pinceau--large {
  min-width: 208px; /* pas de token size correspondant — mesuré maquette */
  height: var(--space-64);
  padding: 0 38px; /* pas de token exact (space-34=34px, space-40=40px) — mesuré maquette */
  font-size: var(--font-size-body-sm);
}

/* lien-fleche */
.lien-fleche {
  position: relative;
  display: inline-block;
  padding-top: 0;
  padding-bottom: 3px; /* pas de token exact (space-2=2px) — mesuré maquette, cf. proposed_extensions */
  color: var(--color-brand-brun);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letterSpacing-capitales-2);
  text-transform: var(--font-transform-capitales);
  text-decoration: none;
  border-bottom: var(--border-width-hairline) solid var(--color-brand-anis);
}
.lien-fleche::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--size-target-min);
  transform: translateY(-50%);
}
.lien-fleche::after { content: " →"; text-decoration: none; }
.lien-fleche:hover { border-bottom-color: var(--color-brand-brun); }

/* hero */
.hero {
  position: relative;
  background-color: transparent;
  padding-top: var(--space-12);
  padding-bottom: var(--space-64);
}
@media (min-width: 834px) {
  .hero { padding-top: var(--space-26); padding-bottom: var(--space-108); }
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-34);
  max-width: var(--size-container-max);
  margin-inline: auto;
  padding-inline: var(--space-16);
}
@media (min-width: 834px) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-40); align-items: center; }
}
@media (min-width: 1024px) {
  .hero__inner { gap: var(--space-64); }
}
h1.hero__titre {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-lineHeight-tight-hero);
  text-align: center;
  font-size: var(--font-size-hero-sm);
  margin: 0 0 var(--space-20);
}
@media (min-width: 834px) {
  h1.hero__titre { text-align: left; font-size: var(--font-size-hero-md); }
}
@media (min-width: 1024px) {
  h1.hero__titre { font-size: var(--font-size-hero); }
}
.hero__chapo {
  max-width: 470px; /* pas de token size correspondant — mesuré maquette, cf. proposed_extensions */
  margin: 0 auto var(--space-28);
}
@media (max-width: 833px) {
  .hero__chapo { text-align: center; }
}
@media (min-width: 834px) {
  .hero__chapo { font-size: var(--font-size-lead); margin: 0 0 var(--space-28); }
}
.hero__actions { display: flex; }
.hero__visuel { position: relative; order: -1; }
.hero__photo {
  width: 100%;
  aspect-ratio: var(--ratio-carre);
  overflow: hidden;
  --arche: 50%; /* demi-largeur ramenée en % de la hauteur — mesuré maquette */
  border-radius: 50% 50% 5px 5px / var(--arche) var(--arche) 3px 3px;
  background-color: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-700);
  font-size: var(--font-size-small);
  text-align: center;
  padding: var(--space-16);
}
/* Le padding ci-dessus sert au libellé de remplacement affiché quand aucune photo
   n'est posée. Avec une photo il tronque l'arche : le border-radius suit la
   border-box, l'image commence 16px plus bas, et son bord supérieur — droit —
   reste visible partout où la courbe est encore au-dessus de ces 16px, soit un
   plateau sur un bon tiers de la largeur. */
.hero__photo:has(img) { padding: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__medaillon { display: none; }
@media (min-width: 834px) {
  .hero__visuel { order: 0; }
  .hero__photo { aspect-ratio: var(--ratio-portrait-3-4); --arche: 37.5%; }
  /* Le medaillon parait des que le hero passe en deux colonnes. Il deborde a
     gauche du visuel, donc au-dessus de la colonne texte : celle-ci reste
     lisible parce que .hero__chapo plafonne a 470px et que le bouton
     .hero__actions n'occupe que sa moitie gauche, le debord ne recouvre que du
     blanc. Sa largeur suit celle de la photo — 168px sur une photo de 363px de
     large en tablette la ferait passer pour le sujet principal. */
  .hero__medaillon {
    display: block;
    position: absolute;
    left: -46px; /* pas de token size correspondant — 0,44 x la largeur, ratio de la maquette */
    bottom: var(--space-26);
    width: 6.5rem;
    z-index: var(--zIndex-overlay);
  }
}
@media (min-width: 1024px) {
  .hero__medaillon { left: -60px; width: 8.5rem; }
}
@media (min-width: 1244px) {
  .hero__photo { aspect-ratio: var(--ratio-portrait-4-5); --arche: 40%; }
  .hero__medaillon { left: -74px; /* mesuré maquette */ width: 10.5rem; }
}
/* Le visuel du hero deborde de 56px a droite dans la maquette. .hero__inner
   plafonne a 1180px avec 16px de gouttiere interne : le debord ne tient donc
   dans la page qu'a partir de 1180 + 2*56 = 1292px de viewport. Pose plus tot,
   il ajoute une barre de defilement horizontale de quelques pixels. */
@media (min-width: 1292px) {
  .hero__visuel { margin-right: -56px; }
}

/* hero-soin */
.hero-soin { position: relative; background-color: var(--color-neutral-0); padding: var(--space-14) 0 var(--space-48); }
.hero-soin__inner {
  max-width: var(--size-container-max);
  margin-inline: auto;
  padding-inline: var(--space-22);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-30);
}
.hero-soin__titre { text-align: center; font-size: var(--font-size-hero-sm); line-height: var(--font-lineHeight-tight-hero); margin: 0; }
.hero-soin__chapo { max-width: 30rem; margin: var(--space-26) auto 0; font-size: var(--font-size-body); text-align: center; }
.hero-soin__caractere { display: flex; flex-direction: column; align-items: center; order: -1; }
.hero-soin__caractere img { width: 190px; opacity: .92; }
.hero-soin__legende {
  margin-top: var(--space-16);
  font-size: var(--font-size-small);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
  text-align: center;
}
@media (min-width: 834px) {
  .hero-soin { padding: var(--space-30) 0 var(--space-84); }
  .hero-soin__inner { grid-template-columns: 1.1fr .9fr; gap: var(--space-40); align-items: center; padding-inline: var(--size-gutter-content); }
  .hero-soin__titre { text-align: left; font-size: var(--font-size-hero-md); }
  .hero-soin__chapo { margin-inline: 0; font-size: var(--font-size-lead); text-align: left; }
  .hero-soin__caractere { order: 0; }
  .hero-soin__caractere img { width: 220px; }
}
@media (min-width: 1024px) {
  .hero-soin__inner { gap: 3.5rem; /* 56px — pas de token, mesuré maquette */ }
  .hero-soin__titre { font-size: 4.25rem; /* 68px — pas de token, mesuré maquette */ }
  .hero-soin__caractere img { width: 300px; }
}

/* carte-evenement — l'accent (bordure + étiquette) est piloté par les
   modificateurs --anis/--violet/--brun via les variables --accent/--accent-encre */
.carte-evenement {
  --accent: var(--color-brand-anis);
  --accent-encre: var(--color-brand-nuit);
  position: relative;
  /* Fond uni repris de la section : la trame seigaiha passait derriere le texte
     et genait la lecture, et l'etiquette a cheval sur la bordure garde ainsi
     exactement le meme fond que la carte — maquette. */
  background-color: var(--surface, var(--color-neutral-0));
  border: var(--border-width-hairline) solid var(--accent);
  padding: 2.75rem 1.25rem 1.875rem; /* 44/20/30 — pas de tokens exacts, mesuré maquette mobile */
}
@media (min-width: 834px) {
  .carte-evenement { padding: 3.25rem 2.5rem 2.5rem; /* 52/40/40 — mesuré maquette */ }
}
.carte-evenement--anis { --accent: var(--color-brand-anis); --accent-encre: var(--color-brand-nuit); }
.carte-evenement--violet { --accent: var(--color-brand-violet); --accent-encre: var(--color-neutral-0); }
.carte-evenement--brun { --accent: var(--color-brand-brun); --accent-encre: var(--color-neutral-0); }
.carte-evenement__etiquette {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  /* L'etiquette n'est plus une pastille pleine : elle reprend le fond de la
     section et se pose a cheval sur le filet, qu'elle interrompt — maquette.
     L'encre est le brun de marque et non l'accent : anis en texte echoue AA
     (2.40 sur neutral.100), cf. policies.json § anis-jamais-en-texte. */
  background-color: var(--surface, var(--color-neutral-0));
  color: var(--color-brand-brun);
  padding: 0 var(--space-18);
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-7);
  text-transform: var(--font-transform-capitales);
  white-space: nowrap;
  margin: 0;
}
.carte-evenement__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-26);
  justify-items: center;
}
@media (min-width: 834px) {
  .carte-evenement__grille { grid-template-columns: 180px 1fr; gap: var(--space-40); align-items: start; justify-items: stretch; }
  .carte-evenement__grille > :last-child { grid-column: 1 / -1; }
}
/* Palier propre a ce composant : la maquette ne connait qu'un desktop fluide
   au-dessus de la tablette, ou la grille est toujours a trois colonnes. 900px
   reprend ce comportement des que la fenetre quitte la bande tablette. Le prix
   assume, visible dans la maquette elle-meme : entre 900 et 1200px les deux
   colonnes de texte tombent vers 250px et le titre display de 30px passe sur
   deux ou trois lignes — decision utilisateur du 2026-08-18. */
@media (min-width: 900px) {
  .carte-evenement__grille { grid-template-columns: 210px 1fr 1.25fr; }
  .carte-evenement__grille > :last-child { grid-column: auto; }
}
.carte-evenement__visuel { display: flex; flex-direction: column; align-items: center; gap: var(--space-14); }
.carte-evenement__titre { font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-titre-carte-lg); color: var(--color-brand-brun); margin: 0; text-align: center; }
.carte-evenement__titre a { color: inherit; text-decoration: none; border-bottom: var(--border-width-hairline) solid transparent; }
.carte-evenement__titre a:hover { border-bottom-color: var(--color-brand-brun); }
.carte-evenement__date {
  font-family: var(--font-family-sans);
  font-size: 1.1875rem; /* 19px — pas de token, mesuré maquette */
  font-weight: var(--font-weight-semibold);
  line-height: 1.4; /* pas de token, mesuré maquette */
  color: var(--color-brand-brun);
  margin-top: var(--space-8);
  text-align: center;
}
.carte-evenement__infos { list-style: none; margin: var(--space-16) 0 0; padding: 0; font-size: var(--font-size-body-sm); }
.carte-evenement__infos > * {
  display: flex;
  gap: var(--space-12);
  margin: 0;
  padding: 0.4375rem 0; /* 7px — pas de token, mesuré maquette */
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-14);
}
.carte-evenement__cle {
  min-width: 6rem; /* 96px — pas de token, mesuré maquette */
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-4);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
  padding-top: 3px;
}
.carte-evenement__desc { font-size: var(--font-size-body-sm); margin: 0; text-align: center; }
/* « Avec » devant le nom d'intervenant (maquette carteEvenement). Un Block
   Binding remplace tout le contenu du paragraphe : le mot ne peut pas y être
   écrit, il est donc rendu en ::before. Le paragraphe visé est le second
   .carte-evenement__desc de .carte-evenement__texte — le premier porte la
   description, le suivant l'intervenant. */
.carte-evenement__desc + .carte-evenement__desc { font-style: italic; }
.carte-evenement__desc + .carte-evenement__desc::before { content: "Avec "; }
@media (min-width: 834px) {
  .carte-evenement__titre,
  .carte-evenement__date,
  .carte-evenement__desc { text-align: left; }
}
.carte-evenement__actions {
  margin-top: var(--space-22);
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px — pas de token, mesuré maquette */
  flex-wrap: wrap;
}
@media (max-width: 833px) {
  .carte-evenement__infos > * { justify-content: center; }
  .carte-evenement__actions { justify-content: center; }
}

/* activite (enveloppe de mise en page non déclarée — cf. components.json $description) */
.activite {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* soin (éléments sans classe racine sur le conteneur) */
.soin__titre {
  font-family: var(--font-family-display);
  color: var(--color-brand-brun);
  text-align: center;
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-titre-carte);
}
.soin__par {
  color: var(--color-neutral-700);
  text-align: center;
  margin: var(--space-10) 0 var(--space-8);
  font-size: var(--font-size-small);
}
.soin__par a { color: var(--color-brand-brun); }
.soin__texte {
  color: var(--color-neutral-900);
  text-align: center;
  font-size: var(--font-size-body-sm);
  max-width: 400px; /* pas de token size correspondant — mesuré maquette, cf. proposed_extensions */
  margin-inline: auto;
}

/* pratique — deux familles sous la même classe (arbitrage C10, cf. design-system.md) :
   les cartes soins portent un h3.titre--carte dans leur markup, les items
   « infos pratiques » gardent un h3 nu — le discriminant est :has() */
.pratique {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-26);
}
.pratique:has(.titre--carte) { gap: var(--space-30); }
@media (min-width: 834px) {
  .pratique { grid-template-columns: repeat(2, 1fr); gap: var(--space-40); }
  .pratique--trois { grid-template-columns: repeat(3, 1fr); }
  .pratique:has(.titre--carte) { gap: 2.625rem 3rem; /* 42px 48px — pas de tokens exacts, mesuré maquette */ }
}
@media (min-width: 1024px) {
  .pratique { grid-template-columns: repeat(4, 1fr); }
  .pratique:has(.titre--carte) { grid-template-columns: repeat(2, 1fr); }
  .pratique--trois:has(.titre--carte) { grid-template-columns: repeat(3, 1fr); gap: 2.625rem 2.5rem; /* 42px 40px — mesuré maquette */ }
}
.pratique__item h3 {
  color: var(--color-neutral-800);
  margin: 0 0 var(--space-10);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
}
.pratique__item p { color: var(--color-neutral-900); font-size: var(--font-size-body-sm); margin: 0; }
.pratique__meta { font-size: var(--font-size-small); color: var(--color-neutral-700); }
.pratique__item:has(.titre--carte) {
  border-top: var(--border-width-hairline) solid var(--color-alpha-brun-22);
  padding-top: var(--space-20);
}
.pratique__item .titre--carte { margin: 0; }
.pratique__item:has(.titre--carte) p { margin-top: var(--space-10); }
.pratique__item:has(.titre--carte) .pratique__meta {
  display: block;
  margin-top: var(--space-12);
  letter-spacing: var(--font-letterSpacing-capitales-3);
  text-transform: var(--font-transform-capitales);
}

/* branches */
.branches { display: grid; grid-template-columns: 1fr; gap: 2.25rem; /* 36px — pas de token, mesuré maquette */ }
@media (min-width: 834px) {
  .branches { grid-template-columns: repeat(3, 1fr); gap: var(--space-34) 1.5rem; /* col 24px — pas de token, mesuré maquette */ }
}
@media (min-width: 1024px) {
  .branches { grid-template-columns: repeat(5, 1fr); }
}
.branche { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); }
.branche__no {
  display: grid;
  place-items: center;
  width: 2.875rem; /* 46px — pas de token, mesuré maquette */
  height: 2.875rem;
  border-radius: var(--radius-full);
  background-color: var(--color-domain-brush-3);
  color: var(--color-brand-brun);
  font-family: var(--font-family-display);
  font-size: 1.375rem; /* 22px — pas de token, mesuré maquette */
  line-height: 1;
}
.branche__titre { font-family: var(--font-family-display); font-size: 1.375rem; /* 22px — mesuré maquette */ color: var(--color-brand-brun); margin: 0; }
.branche__texte { font-size: var(--font-size-meta); line-height: var(--font-lineHeight-base); }

/* liste-mouvements */
.liste-mouvements { margin: var(--space-6) 0 0 var(--space-18); padding: 0; }
.liste-mouvements li { font-size: var(--font-size-body-sm); line-height: var(--font-lineHeight-comfortable); }
.liste-mouvements--puces { list-style: none; margin-left: 0; }
/* maquette : tiret anis — retenu brun, la policy anis-jamais-en-texte prime (dérogation copycat) */
.liste-mouvements--puces li::before { content: "— "; color: var(--color-brand-brun); }

/* tel-lien */
.tel-lien {
  position: relative;
  display: inline-block;
  font-size: 1.25rem;
  letter-spacing: var(--font-letterSpacing-capitales-1);
  color: var(--color-brand-brun);
  text-decoration: none;
  border-bottom: var(--border-width-thick) solid var(--color-brand-anis);
  padding-bottom: 0.25rem;
  white-space: nowrap;
}
.tel-lien::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--size-target-min);
  transform: translateY(-50%);
}
@media (min-width: 834px) {
  .tel-lien { font-size: 1.375rem; }
}

/* praticiens / praticien */
.praticiens { display: grid; gap: 3.625rem; margin-top: 3.25rem; }
.praticien {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.625rem;
  align-items: start;
  padding-bottom: 3.375rem;
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-16);
  justify-items: center;
  text-align: center;
}
.praticien .titre--gauche { text-align: center; }
@media (min-width: 834px) {
  .praticien {
    grid-template-columns: 170px 1fr;
    gap: 2rem;
    justify-items: stretch;
    text-align: left;
  }
  .praticien .titre--gauche { text-align: left; }
}
@media (min-width: 1024px) {
  .praticien {
    grid-template-columns: 13.25rem 1fr;
    gap: 2.875rem;
  }
}
.praticien:last-child { border-bottom: 0; padding-bottom: 0; }
.praticien--hote { padding-bottom: 3.625rem; }
.praticien__visuel { display: flex; justify-content: center; }
.praticien__infos { list-style: none; margin-top: var(--space-22); }
.praticien__infos li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: 0.6875rem 0;
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-12);
  justify-items: center;
}
@media (min-width: 834px) {
  .praticien__infos li { grid-template-columns: 8.25rem 1fr; gap: var(--space-16); justify-items: stretch; }
}
.praticien__infos li:last-child { border-bottom: 0; }
.praticien__cle {
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
  padding-top: 0.25rem;
}
.praticien__infos .tel-lien { font-size: 1.1875rem; }

/* medaillon */
.medaillon { display: flex; flex-direction: column; align-items: center; gap: var(--space-18); width: 13.25rem; max-width: 100%; }
.medaillon--petit { width: 8.25rem; }
.medaillon__cadre {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-carre);
  border-radius: var(--radius-full);
  padding: 0;
  max-width: 13.25rem;
}
.hero__medaillon .medaillon__cadre {
  max-width: 10.5rem; /* pas de token size correspondant (168px) — mesuré maquette hero, cf. proposed_extensions */
}
.medaillon__cadre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.medaillon__cadre--anis { background-color: transparent; }
.medaillon__cadre--gris { background-color: var(--color-neutral-100); text-align: center; }
/* les combos anis/gris sont toujours utilisés avec une classe teinte--* (voir templates) :
   la teinte doit gouverner le fond, pas le cadre — priorité par spécificité, sans toucher aux utilitaires. */
.medaillon__cadre[class*="teinte--"] { background-color: transparent; }
.medaillon__cadre--anis::before { background-image: url('assets/img/anneau-anis.svg'); }
.medaillon__cadre--gris::before { background-image: url('assets/img/anneau-gris.svg'); }
.medaillon__photo {
  position: absolute;
  inset: 9%;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.medaillon__cadre--gris .medaillon__photo { inset: 12%; }
.medaillon__image { width: 100%; height: 100%; object-fit: cover; }
.medaillon__mention {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption); /* maquette 10px — remonté au plancher typographique 12px (policy, dérogation copycat) */
  letter-spacing: var(--font-letterSpacing-capitales-6);
  text-transform: var(--font-transform-capitales);
  line-height: 1.5; /* pas de token, mesuré maquette */
  color: var(--color-neutral-700);
  text-align: center;
  padding: 0 var(--space-18);
}

/* galerie */
/* La marge haute appartient au composant : la galerie suit toujours un bloc de
   texte, et sans elle la premiere legende vient toucher le dernier paragraphe.
   Valeur de la maquette : 56px au palier large, 40px en mobile. align-items:
   start empeche les tirages d'une meme rangee de s'etirer a la hauteur du plus
   haut — un polaroid garde le rapport de son format. */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  align-items: start;
  margin-top: var(--space-40);
}
/* La grille a quatre colonnes vaut des 834px et non au palier desktop. La
   maquette de reference ne porte aucune media query : elle rend cette grille
   quelle que soit la largeur de son cadre, et c'est elle qui donne aux tirages
   leur rapport (un double, deux simples). Repoussee au palier desktop, la
   galerie sortait en deux colonnes de tirages geants sur toute la plage
   tablette — jusque sur une fenetre de bureau non maximisee. */
@media (min-width: 834px) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: var(--space-40) var(--space-26); margin-top: var(--space-56); }
  .galerie__piece--large { grid-column: span 2; }
  .galerie__piece:nth-child(even) { margin-top: var(--space-30); }
  .galerie__piece:nth-child(4n) { margin-top: var(--space-56); }
}
@media (min-width: 1024px) {
  .galerie { gap: 2.875rem var(--space-30); /* row 46px — pas de token, mesuré maquette */ }
}
.galerie__piece { position: relative; margin: 0; min-width: 0; }
.galerie__tirage {
  background-color: var(--color-neutral-0);
  border: var(--border-width-hairline) solid var(--color-alpha-brun-28);
  padding: 11px 11px 0; /* pas de token exact (space-10=10px, space-12=12px) — mesuré maquette */
}
.galerie__zone {
  background-color: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-neutral-700);
  font-size: var(--font-size-small);
  text-align: center;
}
.galerie__zone img { width: 100%; height: 100%; object-fit: cover; }
.galerie__legende {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  text-align: center;
  color: var(--color-brand-brun);
  font-size: 21px; /* pas de token size correspondant (mobile) — mesuré maquette, cf. proposed_extensions */
  line-height: 1.2; /* pas de token lineHeight correspondant (ratio UA "normal") — mesuré maquette, cf. proposed_extensions */
  padding: var(--space-12) var(--space-8) var(--space-14);
}
@media (min-width: 834px) {
  .galerie__legende { font-size: 23px; /* pas de token size correspondant (tablette/desktop) — mesuré maquette, cf. proposed_extensions */ }
}
.galerie__ruban {
  position: absolute; z-index: var(--zIndex-raised); width: 104px; height: 27px; opacity: .72;
  background-image: url('assets/img/aquarelle-droite.svg');
  background-repeat: no-repeat; background-size: 420% 240%; background-position: 38% 45%;
}
.galerie__ruban--haut { top: -13px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); }
.galerie__ruban--coin-gauche { top: 4px; left: -26px; transform: rotate(-42deg); }
/* En une seule colonne (mobile), le tirage occupe toute la largeur : le ruban
   du coin droit, incliné, dépasse de moins d'un pixel et suffit à faire
   défiler la page latéralement (cf. maquette, même correctif). */
.galerie__ruban--coin-droit { top: 4px; right: -20px; transform: rotate(42deg); }
@media (min-width: 834px) {
  .galerie__ruban--coin-droit { right: -26px; }
}
.galerie__encadre { background-color: var(--color-neutral-100); padding: var(--space-28) 1.5rem; /* 24px — pas de token, mesuré maquette mobile */ border-radius: var(--radius-xs); }
@media (min-width: 834px) {
  .galerie__encadre { grid-column: span 2; padding: var(--space-40) var(--space-44); }
}
.galerie__mention {
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-6);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-800);
  text-align: center;
  line-height: var(--font-lineHeight-base);
}

/* cadre-grecque */
.cadre-grecque {
  position: relative;
  padding: var(--space-34) var(--space-26);
  background-color: var(--color-neutral-0);
}
.section--motif .cadre-grecque { background-color: var(--color-neutral-50); }
.cadre-grecque::before, .cadre-grecque::after { content: ""; position: absolute; pointer-events: none; }
.cadre-grecque::before {
  inset: 0;
  background-image: url('assets/img/frise-grecque-h.svg'), url('assets/img/frise-grecque-h.svg');
  background-repeat: repeat-x, repeat-x;
  background-position: left top, left bottom;
  background-size: auto 17px, auto 17px;
}
.cadre-grecque::after {
  top: 17px; bottom: 17px; left: 0; right: 0;
  background-image: url('assets/img/frise-grecque-v.svg'), url('assets/img/frise-grecque-v.svg');
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: 17px auto, 17px auto;
}
@media (min-width: 834px) {
  .cadre-grecque { padding: 3.125rem 2.875rem; }
  .cadre-grecque::before { background-size: auto 24px, auto 24px; }
  .cadre-grecque::after { top: 24px; bottom: 24px; background-size: 24px auto, 24px auto; }
  .cadre-grecque--large { padding: 2.875rem 3.25rem; }
  .cadre-grecque--bloc { padding: 3.125rem 3.25rem; }
}
.cadre-grecque > * { position: relative; z-index: var(--zIndex-raised); }

/* liaison */
.liaison { max-width: 51.25rem; margin: 0 auto; text-align: center; }
.liaison p { margin-top: var(--space-14); }
.liaison__bandeau { width: 100%; height: 11.875rem; object-fit: cover; object-position: center 40%; }

/* liste-pratique — enveloppe non déclarée (components.json § blocs ignorés) */
.liste-pratique { list-style: none; margin-top: var(--space-18); }
.liste-pratique li {
  font-size: var(--font-size-body-sm);
  line-height: var(--font-lineHeight-comfortable);
  padding: var(--space-12) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-16);
}
.liste-pratique li:last-child { border-bottom: none; }
.liste-pratique li > span:first-child {
  display: block;
  font-size: var(--font-size-caption);
  letter-spacing: .09em; /* pas de token exact (capitales-4=.08em, capitales-5=.1em) — mesuré maquette */
  text-transform: var(--font-transform-capitales);
  color: var(--color-brand-brun);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

/* mention-legale */
.mention-legale { font-size: var(--font-size-small); color: var(--color-neutral-700); }

/* aligne-haut — enveloppe non déclarée (components.json § blocs ignorés) */
.aligne-haut { align-items: start !important; }

/* format / pivot / teinte — utilitaires sanctionnés (policies.json § $utilityPrefixes) */
.format--3-4 { aspect-ratio: var(--ratio-portrait-3-4); }
.format--1-1 { aspect-ratio: var(--ratio-carre); }
.format--3-2 { aspect-ratio: var(--ratio-paysage-3-2); }
.format--4-3 { aspect-ratio: var(--ratio-paysage-4-3); }
.format--16-10 { aspect-ratio: var(--ratio-paysage-16-10); }
.teinte--lin { background-color: var(--color-domain-wash-sable); }
.teinte--bois { background-color: var(--color-domain-wash-sable); }
.teinte--vegetal { background-color: var(--color-domain-wash-anis); }
.teinte--gris { background-color: var(--color-neutral-100); }
.teinte--pierre { background-color: var(--color-domain-wash-pied); }
.teinte--portrait { background-color: var(--color-domain-wash-sable); }
.pivot--m2p2 { transform: rotate(-2.2deg); }
.pivot--1p4 { transform: rotate(1.4deg); }
.pivot--m1p6 { transform: rotate(-1.6deg); }
.pivot--1p3 { transform: rotate(1.3deg); }
.pivot--m1p8 { transform: rotate(-1.8deg); }
.pivot--1p6 { transform: rotate(1.6deg); }
.pivot--m1p2 { transform: rotate(-1.2deg); }
.pivot--1p7 { transform: rotate(1.7deg); }
.pivot--m1p5 { transform: rotate(-1.5deg); }
.pivot--1p2 { transform: rotate(1.2deg); }
/* En dessous de 834px, .galerie repasse en colonne unique : les tirages
   occupent alors toute la largeur et deviennent très hauts (format portrait
   sur presque 100% du viewport), ce qui amplifie la rotation en débordement
   horizontal (bras de levier vertical). La maquette réduit de moitié la
   rotation sur mobile pour la même raison (cf. .preview-frame.mobile). */
@media (max-width: 833px) {
  .pivot--m2p2 { transform: rotate(-1.1deg); }
  .pivot--1p4 { transform: rotate(.7deg); }
  .pivot--m1p6 { transform: rotate(-.8deg); }
  .pivot--1p3 { transform: rotate(.65deg); }
  .pivot--m1p8 { transform: rotate(-.9deg); }
  .pivot--1p6 { transform: rotate(.8deg); }
  .pivot--m1p2 { transform: rotate(-.6deg); }
  .pivot--1p7 { transform: rotate(.85deg); }
  .pivot--m1p5 { transform: rotate(-.75deg); }
  .pivot--1p2 { transform: rotate(.6deg); }
}
.etroit--720 { max-width: 45rem !important; margin-inline: auto !important; }
.etroit--840 { max-width: 52.5rem !important; margin-inline: auto !important; }
.etroit--860 { max-width: 53.75rem !important; margin-inline: auto !important; }

/* =========================================================================
   VOL D'HIRONDELLES / COCCINELLES — transformations seules, composées par le
   GPU. Port de aidd_docs/memory/external/maquette-arbre-de-jade.html
   (§ VOL D'HIRONDELLES + coccinelles butinage). Réglages d'instance
   (--duree/--delai/--taille/top) posés par assets/js/animations.js à partir
   des data-* du markup injecté.
   ========================================================================= */
.vol {
  position: absolute; left: 0; right: 0; overflow: hidden;
  pointer-events: none; z-index: 1; color: var(--color-neutral-700);
}
.vol--entete  { top: 0; height: 120px; }
.vol--section { top: 30px; height: 210px; }
.oiseau {
  position: absolute; left: 0; width: 100%;
  animation: vol-traverse var(--duree, 40s) linear var(--delai, 0s) infinite;
  will-change: transform;
}
.oiseau__bond { display: block; transform: translateZ(0); animation: vol-bond 7s ease-in-out infinite; }
.oiseau__corps {
  display: block; width: calc(var(--taille, 26px) * .72); height: auto; opacity: .62;
  transform-origin: 50% 35%;
  animation: vol-aile 1.15s ease-in-out infinite;
}
.oiseau:nth-child(2) .oiseau__bond  { animation-duration: 9s; animation-delay: -3s; }
.oiseau:nth-child(3) .oiseau__corps { animation-duration: .95s; }
.oiseau:nth-child(4) .oiseau__bond  { animation-duration: 11s; animation-delay: -6s; }
.oiseau:nth-child(4) .oiseau__corps { animation-duration: 1.4s; }
.oiseau:nth-child(4) { display: none; }
@keyframes vol-traverse { from { transform: translateX(-16%); } to { transform: translateX(106%); } }
@keyframes vol-bond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes vol-aile { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }

.site--anim-sobre .oiseau,
.site--anim-sobre .oiseau__bond,
.site--anim-sobre .oiseau__corps { animation: none; }
.site--anim-sobre .oiseau:nth-child(1) { transform: translateX(12%); }
.site--anim-sobre .oiseau:nth-child(2) { transform: translateX(38%); }
.site--anim-sobre .oiseau:nth-child(3) { transform: translateX(64%); }
.site--anim-sobre .oiseau:nth-child(4) { transform: translateX(86%); }

/* --- Coccinelles : butinage --------------------------------------------
   Elles ne traversent pas, elles butinent : 91 % du cycle à l'arrêt, des
   sauts d'une demi-seconde en cloche, deux déplacements à reculons pour
   flâner. Pendant les haltes, seul le frémissement bouge. */
.vol--coccinelles { top: auto; bottom: 0; height: 62%; }
.coccinelle {
  position: absolute; left: 0; width: 100%;
  animation: butinage-a var(--duree, 74s) linear var(--delai, 0s) infinite;
  will-change: transform;
}
.coccinelle:nth-child(2) { animation-name: butinage-b; }
.coccinelle:nth-child(2) { display: none; }
.coccinelle__bond {
  display: block; transform: translate3d(0, 0, 0);
  animation: sursaut 11s linear infinite;
}
.coccinelle:nth-child(2) .coccinelle__bond { animation-duration: 14s; animation-delay: -6s; }
/* Le cap : rotation portée par le SVG (30px de large), pas par .coccinelle
   qui fait toute la largeur de la section. Origine = centre des élytres. */
.coccinelle__corps {
  display: block; width: var(--taille, 30px); height: auto; opacity: .9;
  transform-origin: 62% 55%;
  animation: cap-a var(--duree, 74s) linear var(--delai, 0s) infinite;
}
.coccinelle:nth-child(2) .coccinelle__corps { animation-name: cap-b; }

@keyframes sursaut {
  0%,     22%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  23.2%         { transform: translate3d(1.4px, -1.9px, 0) rotate(1.8deg); }
  24.4%,  60%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  61.2%         { transform: translate3d(-1.3px, -1.5px, 0) rotate(-1.5deg); }
  62.4%, 100%   { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes butinage-a {
  0% { transform: translate(-12.0%, 0px); }
  6.78% { transform: translate(-12.0%, 0px); animation-timing-function: ease-out; }
  7.16% { transform: translate(-5.2%, -23px); animation-timing-function: ease-in; }
  7.53% { transform: translate(1.7%, -10px); }
  15.69% { transform: translate(1.7%, -10px); animation-timing-function: ease-out; }
  16.06% { transform: translate(0.5%, -27px); animation-timing-function: ease-in; }
  16.44% { transform: translate(-0.7%, -13px); }
  25.67% { transform: translate(-0.7%, -13px); animation-timing-function: ease-out; }
  26.05% { transform: translate(8.8%, -37px); animation-timing-function: ease-in; }
  26.42% { transform: translate(18.4%, -27px); }
  34.41% { transform: translate(18.4%, -27px); animation-timing-function: ease-out; }
  34.78% { transform: translate(23.1%, -40px); animation-timing-function: ease-in; }
  35.16% { transform: translate(27.9%, -29px); }
  42.53% { transform: translate(27.9%, -29px); animation-timing-function: ease-out; }
  42.9% { transform: translate(36.5%, -42px); animation-timing-function: ease-in; }
  43.28% { transform: translate(45.1%, -30px); }
  52.61% { transform: translate(45.1%, -30px); animation-timing-function: ease-out; }
  52.99% { transform: translate(52.2%, -41px); animation-timing-function: ease-in; }
  53.36% { transform: translate(59.4%, -24px); }
  59.54% { transform: translate(59.4%, -24px); animation-timing-function: ease-out; }
  59.92% { transform: translate(64.1%, -40px); animation-timing-function: ease-in; }
  60.29% { transform: translate(68.7%, -23px); }
  69.23% { transform: translate(68.7%, -23px); animation-timing-function: ease-out; }
  69.61% { transform: translate(66.5%, -47px); animation-timing-function: ease-in; }
  69.98% { transform: translate(64.3%, -30px); }
  76.99% { transform: translate(64.3%, -30px); animation-timing-function: ease-out; }
  77.36% { transform: translate(68.8%, -47px); animation-timing-function: ease-in; }
  77.74% { transform: translate(73.2%, -32px); }
  84.25% { transform: translate(73.2%, -32px); animation-timing-function: ease-out; }
  84.63% { transform: translate(81.0%, -42px); animation-timing-function: ease-in; }
  85% { transform: translate(88.7%, -33px); }
  91.43% { transform: translate(88.7%, -33px); animation-timing-function: ease-out; }
  91.8% { transform: translate(93.5%, -46px); animation-timing-function: ease-in; }
  92.18% { transform: translate(98.2%, -25px); }
  99.25% { transform: translate(98.2%, -25px); animation-timing-function: ease-out; }
  99.62% { transform: translate(103.1%, -45px); animation-timing-function: ease-in; }
  100% { transform: translate(108.0%, -30px); }
}
@keyframes cap-a {
  0% { transform: rotate(0.0deg); }
  6.78% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  7.16% { transform: rotate(-21.6deg); animation-timing-function: ease-in; }
  7.53% { transform: rotate(12.2deg); }
  15.69% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  16.06% { transform: rotate(-15.9deg); animation-timing-function: ease-in; }
  16.44% { transform: rotate(13.1deg); }
  25.67% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  26.05% { transform: rotate(-22.5deg); animation-timing-function: ease-in; }
  26.42% { transform: rotate(9.4deg); }
  34.41% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  34.78% { transform: rotate(-12.2deg); animation-timing-function: ease-in; }
  35.16% { transform: rotate(10.3deg); }
  42.53% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  42.9% { transform: rotate(-12.2deg); animation-timing-function: ease-in; }
  43.28% { transform: rotate(11.2deg); }
  52.61% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  52.99% { transform: rotate(-10.3deg); animation-timing-function: ease-in; }
  53.36% { transform: rotate(15.9deg); }
  59.54% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  59.92% { transform: rotate(-15.0deg); animation-timing-function: ease-in; }
  60.29% { transform: rotate(15.9deg); }
  69.23% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  69.61% { transform: rotate(-22.5deg); animation-timing-function: ease-in; }
  69.98% { transform: rotate(15.9deg); }
  76.99% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  77.36% { transform: rotate(-15.9deg); animation-timing-function: ease-in; }
  77.74% { transform: rotate(14.1deg); }
  84.25% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  84.63% { transform: rotate(-9.4deg); animation-timing-function: ease-in; }
  85% { transform: rotate(8.4deg); }
  91.43% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  91.8% { transform: rotate(-12.2deg); animation-timing-function: ease-in; }
  92.18% { transform: rotate(19.7deg); }
  99.25% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  99.62% { transform: rotate(-18.8deg); animation-timing-function: ease-in; }
  100% { transform: rotate(14.1deg); }
}
@keyframes butinage-b {
  0% { transform: translate(-12.0%, 0px); }
  7.6% { transform: translate(-12.0%, 0px); animation-timing-function: ease-out; }
  7.97% { transform: translate(-1.1%, -12px); animation-timing-function: ease-in; }
  8.35% { transform: translate(9.9%, 4px); }
  18.49% { transform: translate(9.9%, 4px); animation-timing-function: ease-out; }
  18.87% { transform: translate(21.0%, -14px); animation-timing-function: ease-in; }
  19.24% { transform: translate(32.1%, 0px); }
  28.21% { transform: translate(32.1%, 0px); animation-timing-function: ease-out; }
  28.58% { transform: translate(42.8%, -15px); animation-timing-function: ease-in; }
  28.96% { transform: translate(53.5%, -6px); }
  38.29% { transform: translate(53.5%, -6px); animation-timing-function: ease-out; }
  38.67% { transform: translate(58.0%, -19px); animation-timing-function: ease-in; }
  39.04% { transform: translate(62.4%, 1px); }
  49.29% { transform: translate(62.4%, 1px); animation-timing-function: ease-out; }
  49.66% { transform: translate(60.9%, -9px); animation-timing-function: ease-in; }
  50.04% { transform: translate(59.4%, 4px); }
  58.75% { transform: translate(59.4%, 4px); animation-timing-function: ease-out; }
  59.12% { transform: translate(58.4%, -17px); animation-timing-function: ease-in; }
  59.5% { transform: translate(57.4%, -1px); }
  66.98% { transform: translate(57.4%, -1px); animation-timing-function: ease-out; }
  67.35% { transform: translate(65.3%, -23px); animation-timing-function: ease-in; }
  67.73% { transform: translate(73.2%, -13px); }
  78.17% { transform: translate(73.2%, -13px); animation-timing-function: ease-out; }
  78.54% { transform: translate(78.0%, -33px); animation-timing-function: ease-in; }
  78.92% { transform: translate(82.9%, -20px); }
  88.57% { transform: translate(82.9%, -20px); animation-timing-function: ease-out; }
  88.94% { transform: translate(88.2%, -37px); animation-timing-function: ease-in; }
  89.32% { transform: translate(93.5%, -25px); }
  99.25% { transform: translate(93.5%, -25px); animation-timing-function: ease-out; }
  99.62% { transform: translate(100.7%, -46px); animation-timing-function: ease-in; }
  100% { transform: translate(108.0%, -31px); }
}
@keyframes cap-b {
  0% { transform: rotate(0.0deg); }
  7.6% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  7.97% { transform: rotate(-12.3deg); animation-timing-function: ease-in; }
  8.35% { transform: rotate(16.4deg); }
  18.49% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  18.87% { transform: rotate(-18.4deg); animation-timing-function: ease-in; }
  19.24% { transform: rotate(14.3deg); }
  28.21% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  28.58% { transform: rotate(-15.3deg); animation-timing-function: ease-in; }
  28.96% { transform: rotate(9.2deg); }
  38.29% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  38.67% { transform: rotate(-13.3deg); animation-timing-function: ease-in; }
  39.04% { transform: rotate(20.5deg); }
  49.29% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  49.66% { transform: rotate(-10.2deg); animation-timing-function: ease-in; }
  50.04% { transform: rotate(13.3deg); }
  58.75% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  59.12% { transform: rotate(-21.5deg); animation-timing-function: ease-in; }
  59.5% { transform: rotate(16.4deg); }
  66.98% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  67.35% { transform: rotate(-22.5deg); animation-timing-function: ease-in; }
  67.73% { transform: rotate(10.2deg); }
  78.17% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  78.54% { transform: rotate(-20.5deg); animation-timing-function: ease-in; }
  78.92% { transform: rotate(13.3deg); }
  88.57% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  88.94% { transform: rotate(-17.4deg); animation-timing-function: ease-in; }
  89.32% { transform: rotate(12.3deg); }
  99.25% { transform: rotate(0.0deg); animation-timing-function: ease-out; }
  99.62% { transform: rotate(-21.5deg); animation-timing-function: ease-in; }
  100% { transform: rotate(15.3deg); }
}

.site--anim-sobre .coccinelle,
.site--anim-sobre .coccinelle__bond,
.site--anim-sobre .coccinelle__corps { animation: none; }
.site--anim-sobre .coccinelle:nth-child(1) { transform: translateX(28%); }
.site--anim-sobre .coccinelle:nth-child(2) { transform: translateX(72%); }

/* Mobile-first : convention du thème (défaut = mobile, min-width = tablette+).
   Reprend .preview-frame.mobile de la maquette : 4e oiseau et 2e coccinelle
   masqués, ailes réduites, en-tête plus bas — inversé ici puisque la base
   théme est mobile et non desktop. */
@media (min-width: 834px) {
  .vol--entete { height: 190px; }
  .oiseau__corps { width: var(--taille, 26px); }
  .oiseau:nth-child(4) { display: block; }
  .coccinelle:nth-child(2) { display: block; }
}

/* espace-t-- / retrait-t-- / centre — utilitaires sanctionnés, valeurs mesurées sur pageAccueil() */
.espace-t--0 { margin-top: var(--space-0); }
.espace-t--2 { margin-top: var(--space-2); }
.espace-t--6 { margin-top: var(--space-6); }
.espace-t--10 { margin-top: var(--space-10); }
.espace-t--12 { margin-top: var(--space-12); }
.espace-t--14 { margin-top: var(--space-14); }
.espace-t--16 { margin-top: var(--space-16); }
.espace-t--18 { margin-top: var(--space-18); }
.espace-t--22 { margin-top: var(--space-22); }
.espace-t--26 { margin-top: var(--space-26); }
.espace-t--28 { margin-top: var(--space-28); }
.espace-t--30 { margin-top: var(--space-30); }
.espace-t--34 { margin-top: var(--space-34); }
.espace-t--36 { margin-top: 2.25rem; }
.espace-t--38 { margin-top: 2.375rem; }
.espace-t--40 { margin-top: var(--space-40); }
.espace-t--42 { margin-top: 2.625rem; }
.espace-t--44 { margin-top: var(--space-44); }
.espace-t--46 { margin-top: 2.875rem; }
.espace-t--48 { margin-top: var(--space-48); }
.espace-t--52 { margin-top: 3.25rem; }
.espace-t--56 { margin-top: var(--space-56); }
.espace-t--58 { margin-top: 3.625rem; }
.espace-t--60 { margin-top: 3.75rem; }
.espace-t--64 { margin-top: var(--space-64); }
.retrait-t--20 { padding-top: var(--space-20); }
.retrait-t--30 { padding-top: var(--space-30); }
.retrait-t--34 { padding-top: var(--space-34); }
.retrait-t--40 { padding-top: var(--space-40); }
.retrait-t--44 { padding-top: var(--space-44); }
.retrait-t--56 { padding-top: var(--space-56); }
.retrait-t--60 { padding-top: 3.75rem; }
.retrait-t--76 { padding-top: 4.75rem; }
.retrait-b--40 { padding-bottom: var(--space-40); }
.retrait-b--56 { padding-bottom: var(--space-56); }
.centre { text-align: center; }

/* fiche-champs — liste clé/valeur, pages juridiques */
.fiche-champs { list-style: none; margin: var(--space-16) 0 0; padding: 0; }
.fiche-champs > * {
  display: grid;
  grid-template-columns: 9.375rem 1fr; /* 150px — mesuré maquette */
  gap: var(--space-16);
  margin: 0;
  padding: 13px 0; /* pas de token exact (space-12=12px, space-14=14px) — mesuré maquette */
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-14);
}
.fiche-champs > *:last-child { border-bottom: none; }
.fiche-champs__cle {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
  padding-top: 4px; /* pas de token exact (space-2=2px, space-6=6px) — mesuré maquette */
}
.fiche-champs__val { color: var(--color-neutral-900); font-size: var(--font-size-body); }
.fiche-champs--legal .fiche-champs__val { margin-top: var(--space-22); }
@media (max-width: 46.1875rem) {
  .fiche-champs > * { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* fiche-champs--compact — grille 2 colonnes (clé au-dessus valeur), pour réduire la
   hauteur totale de l'aside quand elle dépasse largement la colonne de texte en vis-à-vis
   (duo--aside, fiche événement peu remplie). Pas de bordure entre lignes : le gap sert
   de séparateur, ce qui coupe la hauteur par rapport à l'empilement 1 colonne standard. */
@media (min-width: 834px) {
  .fiche-champs--compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-20) var(--space-16);
  }
  .fiche-champs--compact > * {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 0;
    border-bottom: none;
  }
}

/* sommaire — table des matières numérotée, pages juridiques */
.sommaire {
  list-style: none;
  counter-reset: sommaire;
  margin: var(--space-30) 0 0;
  padding: var(--space-22) var(--space-26);
  background-color: var(--color-domain-wash-anis); /* maquette rgba(148,177,8,.07) ≈ wash-anis — dérogation token */
}
.sommaire li {
  counter-increment: sommaire;
  position: relative;
  padding-left: var(--space-34);
  font-size: var(--font-size-body-sm);
  line-height: 1.9; /* pas de token (relaxed=1.8) — mesuré maquette */
  color: var(--color-neutral-900);
}
.sommaire li::before {
  content: counter(sommaire);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lead);
  /* maquette : compteur anis — retenu brun, la policy anis-jamais-en-texte prime (dérogation copycat) */
  color: var(--color-brand-brun);
}

/* fiche-date — date sous le titre d'un événement (renseignement, pas une annonce : jamais calligraphiée) */
.fiche-date {
  font-size: var(--font-size-lead);
  color: var(--color-brand-brun);
  text-align: center;
  margin-top: var(--space-12);
}

/* fiche-appel — rangée d'actions d'une fiche (bloc ignoré du lint) */
.fiche-appel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-18);
  margin-top: var(--space-26);
}

/* fiche-intervenant */
.fiche-intervenant {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-28);
  align-items: start;
  justify-items: center;
}
.fiche-intervenant__visuel { display: flex; justify-content: center; width: 190px; }
.fiche-intervenant__texte { text-align: center; }
.fiche-intervenant__titre { text-align: center; font-size: var(--font-size-hero-sm); line-height: var(--font-lineHeight-tight-hero); }
.fiche-intervenant__role {
  margin-top: var(--space-10);
  font-size: var(--font-size-body-sm);
  line-height: var(--font-lineHeight-base);
  font-style: italic;
  color: var(--color-neutral-700);
}
.fiche-intervenant__chapo {
  margin-top: var(--space-22);
  font-size: var(--font-size-body);
  line-height: var(--font-lineHeight-comfortable);
  max-width: 620px; /* pas de token size correspondant — mesuré maquette */
}
@media (min-width: 834px) {
  .fiche-intervenant { grid-template-columns: 190px 1fr; gap: var(--space-40); justify-items: stretch; }
  .fiche-intervenant__visuel { width: auto; }
  .fiche-intervenant__texte { text-align: left; }
  .fiche-intervenant__titre { text-align: left; font-size: var(--font-size-hero-md); margin-top: -6px; }
  .fiche-intervenant__chapo { font-size: var(--font-size-lead); }
}
@media (min-width: 1024px) {
  .fiche-intervenant { grid-template-columns: 232px 1fr; gap: var(--space-56); }
  .fiche-intervenant__titre { font-size: var(--font-size-hero); }
}

/* agenda — pile des cartes à venir (bloc ignoré du lint) */
.agenda { display: flex; flex-direction: column; gap: 3.875rem; /* 62px — pas de token, mesuré maquette */ }

/* agenda-passe — grille des événements passés (bloc ignoré du lint) */
.agenda-passe { display: grid; grid-template-columns: 1fr; gap: var(--space-40); }
@media (min-width: 834px) {
  .agenda-passe { grid-template-columns: repeat(2, 1fr); gap: var(--space-44) var(--space-30); }
}
@media (min-width: 1024px) {
  .agenda-passe { grid-template-columns: repeat(3, 1fr); gap: 3.375rem var(--space-40); /* row 54px — pas de token, mesuré maquette */ }
}

/* carte-passee */
.carte-passee { text-align: center; opacity: .78; }
.carte-passee .medaillon { filter: grayscale(.35); }
.carte-passee__visuel { display: flex; justify-content: center; }
.carte-passee__etiquette {
  margin-top: var(--space-16);
  font-size: var(--font-size-caption); /* maquette 11px — remonté au plancher typographique 12px (policy, dérogation copycat) */
  letter-spacing: var(--font-letterSpacing-capitales-6);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
}
.carte-passee__titre {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-titre-carte-sm);
  color: var(--color-brand-brun);
  margin: var(--space-6) 0 0;
}
.carte-passee__date { font-size: var(--font-size-meta); margin-top: var(--space-8); }
.carte-passee__par { font-size: var(--font-size-meta); color: var(--color-neutral-700); margin-top: 4px; /* pas de token exact — mesuré maquette */ }
/* Même contrainte de Block Binding que .carte-evenement__desc : « Avec » en ::before. */
.carte-passee__par::before { content: "Avec "; }

/* reserver — voies de réservation d'un événement */
.reserver__voies {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-34);
  margin-top: var(--space-40);
  padding-top: var(--space-40);
  border-top: var(--border-width-hairline) solid var(--color-alpha-brun-18);
}
.reserver__voie { text-align: center; }
.reserver__voie-titre {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-800);
  margin: 0 0 var(--space-10);
}
.reserver__voie .mention-legale { margin-top: var(--space-10); }
.reserver__voie .tel-lien { display: block; border-bottom: 0; padding-bottom: 0; }
.reserver__voie .tel-lien a { text-decoration: none; font-size: 1.5rem; /* 24px — pas de token, mesuré maquette */ }
.reserver__voie .lien-fleche { font-size: var(--font-size-small); }
@media (min-width: 834px) {
  .reserver__voies { grid-template-columns: repeat(3, 1fr); gap: var(--space-26); margin-top: 3.375rem; /* 54px — pas de token, mesuré maquette */ }
  .reserver__voie .tel-lien a { font-size: 1.1875rem; /* 19px — cadre tablette maquette */ }
}
@media (min-width: 1024px) {
  .reserver__voies { gap: var(--space-40); }
  .reserver__voie .tel-lien a { font-size: 1.5rem; }
}

/* formulaire / champ — formulaire de contact (enveloppe ignorée du lint) */
.formulaire {
  max-width: 700px; /* pas de token size correspondant — mesuré maquette */
  margin-inline: auto;
  display: grid;
  gap: var(--space-26);
}
.champ { display: flex; flex-direction: column; gap: var(--space-8); }
.champ__label {
  font-size: var(--font-size-caption);
  letter-spacing: var(--font-letterSpacing-capitales-5);
  text-transform: var(--font-transform-capitales);
  color: var(--color-neutral-700);
}
.formulaire input,
.formulaire textarea,
.formulaire select {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  color: var(--color-semantic-text);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-alpha-brun-35);
  padding: var(--space-10) var(--space-2);
}
.formulaire textarea { min-height: 132px; /* pas de token — mesuré maquette */ resize: vertical; }
/* la maquette annule l'outline au focus ; on garde le :focus-visible global du
   thème (accessibilité) et on ne reprend que l'accent de soulignement */
.formulaire input:focus,
.formulaire textarea:focus,
.formulaire select:focus { border-bottom-color: var(--color-brand-brun); }
.formulaire ::placeholder { color: var(--color-neutral-700); opacity: 1; }
.champ--duo { display: grid; grid-template-columns: 1fr; gap: var(--space-26); }
@media (min-width: 834px) {
  .champ--duo { grid-template-columns: 1fr 1fr; }
}

/* encart-partenaire — encart Keolan (bloc ignoré du lint) */
.encart-partenaire { max-width: 720px; margin-inline: auto; text-align: center; }