@charset "UTF-8";
/* =====================================================================
   DesMarquesBio - feuille unique.
   Point de vue : L'HERBIER ANNOTE.

   Une planche d'herbier, c'est un specimen pose sur du papier, un filet
   imprime, une etiquette numerotee et beaucoup de vide autour. Rien n'y
   flotte : tout est fixe sur la page. D'ou, ici, zero carte, zero ombre,
   zero angle arrondi. Les produits sont des specimens poses sur la
   planche ; les filets tiennent la page.

   Le piege de ce brief, c'est le look "apothicaire wellness" : creme
   pale, serif fin, botanique au trait, tout centre. On s'en sort par la
   couleur : la sauge n'est pas une touche sur du creme, elle est un
   APLAT PLEIN qui porte les bandeaux, les ouvertures et le pied de page.
   Le creme n'est que la surface de lecture.

   Prefixe hb-, propre a ce site. Aucune classe partagee avec un autre
   site du parc (regle 1 de PARC.md).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Jetons
   --------------------------------------------------------------------- */

:root {
	/* La sauge, du plus sombre au plus clair. C'est la couleur du site,
	   pas son accent. */
	--sauge-900: #1f2a1c;
	--sauge-800: #2c3a28;
	--sauge-700: #3e5138;
	--sauge-600: #556b4c;
	--sauge-400: #8aa07e;
	--sauge-200: #c4d0bb;
	--sauge-100: #dfe6d9;

	/* Le papier. */
	--creme: #f3f0e7;
	--creme-clair: #faf8f2;
	--blanc: #ffffff;

	/* Roles. On ne cite jamais une valeur brute plus bas. */
	--fond: var(--creme);
	--planche: var(--creme-clair);
	--aplat: var(--sauge-700);
	--texte: var(--sauge-900);
	--texte-2: var(--sauge-600);
	--texte-clair: var(--creme);
	--filet: var(--sauge-400);
	--filet-tenu: color-mix(in oklab, var(--sauge-400) 42%, transparent);
	--accent: var(--sauge-700);

	/* Echelle typographique, raison 1,25 sur un corps de 17px.
	   Les deux derniers degres sont fluides : ce sont les seuls qui
	   risquent de deborder. */
	--t--2: 0.6875rem;
	--t--1: 0.8125rem;
	--t-0: 1.0625rem;
	--t-1: 1.25rem;
	--t-2: 1.5rem;
	--t-3: 1.875rem;
	--t-4: 2.25rem;
	--t-5: clamp(2rem, 1.45rem + 2.3vw, 3.05rem);
	--t-6: clamp(2.3rem, 1.55rem + 3.1vw, 3.8rem);

	/* Rythme vertical, base 8. Tout espacement sort d'ici. */
	--r-1: 4px;
	--r-2: 8px;
	--r-3: 12px;
	--r-4: 16px;
	--r-5: 24px;
	--r-6: 32px;
	--r-7: 48px;
	--r-8: 64px;
	--r-9: 88px;
	--r-10: 120px;
	--r-11: 160px;

	/* Respiration d'un bloc de page. Identique partout : c'est ce qui
	   fait que toutes les pages ont les memes marges. */
	--bloc: clamp(56px, 7vw, 104px);

	/* Gabarit. */
	--page: 1320px;
	--gouttiere: clamp(20px, 5vw, 56px);
	--mesure: 68ch;

	/* Une planche d'herbier n'a pas de coins arrondis. */
	--angle: 0px;

	/* Mouvement : sobre. Editorial, pas demonstratif. */
	--sortie: cubic-bezier(0.16, 1, 0.3, 1);
	--vite: 220ms;
	--pose: 620ms;

	--z-nav: 60;
	--z-voile: 70;
	--z-menu: 80;

	color-scheme: only light;
}

/* ---------------------------------------------------------------------
   2. Socle
   --------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Le sommaire a ancres ne doit pas glisser sous le bandeau. */
	scroll-padding-top: 96px;
}

body.hb-corps {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t-0);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
picture,
video,
svg { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
	font-family: 'Faustina', Georgia, serif;
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.012em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

/* Un seul anneau de focus pour tout le site. Visible sur creme comme
   sur aplat sauge : on inverse la couleur dans les zones sombres. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Tout ce qui est pose sur un aplat sombre inverse son anneau de focus.
   Les trois surfaces sombres du site sont regroupees ici une fois pour
   toutes : un aplat ajoute plus tard n'a qu'a rejoindre cette liste. */
.hb-drape :where(a, button, input, textarea, summary):focus-visible,
.hb-ouverture__dire :where(a, button):focus-visible,
.hb-reponse :where(a, button):focus-visible,
.hb-partenaire :where(a, button):focus-visible,
.hb-pied :where(a, button):focus-visible {
	outline-color: var(--creme);
}

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

.hb-evite {
	position: absolute;
	left: var(--r-4);
	top: -100px;
	z-index: 200;
	padding: var(--r-3) var(--r-5);
	background: var(--sauge-900);
	color: var(--creme);
	font-size: var(--t--1);
	text-decoration: none;
	transition: top var(--vite) var(--sortie);
}
.hb-evite:focus { top: var(--r-4); }

/* ---------------------------------------------------------------------
   3. Gabarit de page
   --------------------------------------------------------------------- */

.hb-page {
	width: 100%;
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.hb-bloc { padding-block: var(--bloc); }

/* Le filet titre : un trait qui traverse la page, le libelle assis
   dessus. C'est le seul marqueur de section du site. Pas de surtitre
   en capitales au-dessus de chaque bloc. */
.hb-filet {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--r-5);
	margin-bottom: var(--r-7);
}

.hb-filet::after {
	content: '';
	height: 1px;
	background: var(--filet);
	transform: translateY(-0.35em);
}

.hb-filet__mot {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-3);
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0;
}

.hb-filet__note {
	grid-column: 1 / -1;
	max-width: 54ch;
	margin: calc(var(--r-3) * -1) 0 0;
	color: var(--texte-2);
	font-size: var(--t--1);
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
   4. Bandeau
   --------------------------------------------------------------------- */

.hb-bandeau {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: var(--fond);
	border-bottom: 1px solid transparent;
	transition: border-color var(--vite) linear, background var(--vite) linear;
}

.hb-bandeau[data-defile='1'] {
	border-bottom-color: var(--filet-tenu);
	background: color-mix(in oklab, var(--creme) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(8px);
}

.hb-bandeau__rang {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--r-5);
	min-height: 72px;
}

.hb-marque {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-2);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
	justify-self: center;
}

.hb-marque i { font-style: italic; font-weight: 400; }

.hb-marque:hover { color: var(--sauge-700); }

.hb-nav { justify-self: end; }

.hb-nav ul {
	display: flex;
	align-items: center;
	gap: var(--r-6);
	list-style: none;
}

.hb-nav a {
	position: relative;
	display: inline-block;
	padding-block: var(--r-2);
	font-size: var(--t--1);
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--texte-2);
	transition: color var(--vite) var(--sortie);
}

/* Le survol tire un filet sous l'entree, comme un trait de plume. */
.hb-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pose) var(--sortie);
}

.hb-nav a:hover,
.hb-nav a[aria-current='page'] { color: var(--texte); }
.hb-nav a:hover::after,
.hb-nav a[aria-current='page']::after { transform: scaleX(1); }

.hb-outils {
	display: flex;
	align-items: center;
	gap: var(--r-4);
}

.hb-chercher {
	display: flex;
	align-items: center;
	gap: var(--r-2);
	border-bottom: 1px solid var(--filet-tenu);
	padding-bottom: var(--r-1);
	transition: border-color var(--vite) linear;
}

.hb-chercher:focus-within { border-bottom-color: var(--accent); }

.hb-chercher svg { width: 15px; height: 15px; flex: none; color: var(--texte-2); }

.hb-chercher input {
	width: 118px;
	border: 0;
	background: none;
	padding: var(--r-1) 0;
	font: inherit;
	font-size: var(--t--1);
	color: var(--texte);
}

.hb-chercher input::placeholder { color: var(--texte-2); opacity: 0.75; }
.hb-chercher input:focus { outline: none; }

.hb-brulure {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: calc(var(--r-3) * -1);
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity var(--vite) var(--sortie);
}

.hb-brulure:hover { opacity: 0.6; }

/* ---------------------------------------------------------------------
   5. Ouverture : aplat sauge a gauche, photographie a droite.
      Volontairement asymetrique et non centre.
   --------------------------------------------------------------------- */

.hb-ouverture {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: stretch;
	min-height: min(74vh, 660px);
}

.hb-ouverture__dire {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--r-5);
	background: var(--aplat);
	color: var(--texte-clair);
	padding: var(--bloc) clamp(28px, 4.5vw, 72px);
}

.hb-ouverture__titre {
	font-size: var(--t-6);
	line-height: 1.06;
	letter-spacing: -0.022em;
	max-width: 15ch;
}

.hb-ouverture__titre em {
	font-style: italic;
	font-weight: 400;
	color: var(--sauge-200);
}

.hb-ouverture__texte {
	max-width: 46ch;
	font-size: var(--t-1);
	line-height: 1.55;
	color: color-mix(in oklab, var(--creme) 86%, var(--sauge-700));
}

.hb-ouverture__vue { position: relative; overflow: hidden; background: var(--sauge-100); }

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

/* La legende de la photographie, comme sur une planche. */
.hb-ouverture__legende {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: var(--r-3) var(--r-5);
	background: var(--creme);
	font-size: var(--t--2);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-2);
}

/* ---------------------------------------------------------------------
   6. La planche du jour : un seul specimen, annote.
   --------------------------------------------------------------------- */

.hb-planche {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 88px);
	align-items: center;
}

.hb-planche__vue {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--planche);
	padding: var(--r-7);
}

.hb-planche__vue img { width: 100%; height: 100%; object-fit: contain; }

.hb-planche__notes { display: flex; flex-direction: column; gap: var(--r-5); }

.hb-planche__marque {
	font-size: var(--t--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-2);
}

.hb-planche__titre { font-size: var(--t-4); }

.hb-planche__titre a { text-decoration: none; }
.hb-planche__titre a:hover { color: var(--sauge-700); text-decoration: underline; text-underline-offset: 5px; }

.hb-planche__texte { max-width: 46ch; color: var(--texte-2); }

/* Les annotations, en filets, comme les mentions d'une planche. */
.hb-annotations { border-top: 1px solid var(--filet-tenu); }

.hb-annotations div {
	display: grid;
	grid-template-columns: 11ch 1fr;
	gap: var(--r-4);
	padding: var(--r-3) 0;
	border-bottom: 1px solid var(--filet-tenu);
	font-size: var(--t--1);
}

.hb-annotations dt,
.hb-annotations span:first-child {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-2);
	font-size: var(--t--2);
	padding-top: 0.25em;
}

/* ---------------------------------------------------------------------
   7. Le rayon : des specimens poses sur la planche.
      Pas de carte, pas d'ombre : un filet en haut, l'image, le texte.
   --------------------------------------------------------------------- */

.hb-rayon {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--r-8) var(--r-6);
	list-style: none;
}

.hb-specimen { display: flex; flex-direction: column; }

.hb-specimen__lien {
	display: flex;
	flex-direction: column;
	gap: var(--r-4);
	text-decoration: none;
	border-top: 1px solid var(--filet-tenu);
	padding-top: var(--r-4);
	transition: border-color var(--pose) var(--sortie);
}

.hb-specimen__lien:hover { border-top-color: var(--sauge-700); }

/* Les plaques de produit CONTIENNENT l'image, elles ne la recadrent pas.
   Raison mesuree le 03/08 : 19 packshots sur 66 sont hauts et etroits
   (373x1440, 511x1500). Recadres en carre puis etires pour remplir la
   plaque, ils paraissaient flous. WordPress ne fabrique jamais une taille
   plus grande que l'original : le flou venait de l'agrandissement au
   rendu, pas d'un defaut de source. Un packshot pose au centre de sa
   plaque est net a tous les coups, et c'est de toute facon plus juste
   pour un specimen d'herbier qu'un cadrage a la serpe. */
.hb-specimen__vue {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--planche);
	padding: var(--r-4);
}

.hb-specimen__vue img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--pose) var(--sortie);
}

.hb-specimen__lien:hover .hb-specimen__vue img { transform: scale(1.035); }

.hb-specimen__marque {
	font-size: var(--t--2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-2);
}

.hb-specimen__nom {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-1);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.01em;
}

.hb-specimen__lien:hover .hb-specimen__nom { text-decoration: underline; text-underline-offset: 4px; }

.hb-specimen__prix { font-size: var(--t--1); color: var(--texte-2); }

/* ---------------------------------------------------------------------
   8. Bande drapee : un aplat plein, du texte seul.
      C'est la respiration entre deux bandes d'images.
   --------------------------------------------------------------------- */

.hb-drape {
	background: var(--aplat);
	color: var(--texte-clair);
}

.hb-drape__mot {
	max-width: 26ch;
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-5);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.018em;
}

.hb-drape__mot em { font-style: italic; font-weight: 400; color: var(--sauge-200); }

.hb-drape__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 96px);
	align-items: end;
}

.hb-drape__texte {
	max-width: 52ch;
	color: color-mix(in oklab, var(--creme) 84%, var(--sauge-700));
}

.hb-drape__texte p + p { margin-top: var(--r-4); }

/* ---------------------------------------------------------------------
   9. Le carnet : entrees editoriales. Images en 3/2, pour qu'on ne les
      confonde jamais avec un produit (qui est en 3/4).
   --------------------------------------------------------------------- */

.hb-carnet {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}

.hb-entree { display: flex; flex-direction: column; gap: var(--r-4); text-decoration: none; }

.hb-entree__vue { overflow: hidden; background: var(--sauge-100); aspect-ratio: 3 / 2; }
.hb-entree__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pose) var(--sortie); }
.hb-entree:hover .hb-entree__vue img { transform: scale(1.03); }

.hb-entree__date {
	font-size: var(--t--2);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte-2);
}

.hb-entree__titre {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-3);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.015em;
}

.hb-entree:hover .hb-entree__titre { text-decoration: underline; text-underline-offset: 5px; }

.hb-entree__chapo { max-width: 52ch; color: var(--texte-2); }

/* Les entrees secondaires : sans image, en liste reglee. */
.hb-suite { list-style: none; border-top: 1px solid var(--filet-tenu); }

.hb-suite li { border-bottom: 1px solid var(--filet-tenu); }

.hb-suite a {
	display: grid;
	gap: var(--r-2);
	padding: var(--r-5) 0;
	text-decoration: none;
	transition: padding-left var(--pose) var(--sortie);
}

.hb-suite a:hover { padding-left: var(--r-3); }

.hb-suite__titre {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-1);
	font-weight: 500;
	line-height: 1.24;
}

.hb-suite a:hover .hb-suite__titre { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------------
   10. L'index des marques : du texte dense, aucune image.
       Contraste voulu avec les bandes aerees qui precedent.
   --------------------------------------------------------------------- */

.hb-index {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3) var(--r-5);
	list-style: none;
}

.hb-index a {
	display: inline-block;
	padding: var(--r-2) 0;
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-2);
	line-height: 1.1;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--vite) var(--sortie), color var(--vite) var(--sortie);
}

.hb-index a:hover { color: var(--sauge-700); border-bottom-color: var(--sauge-700); }

/* ---------------------------------------------------------------------
   11. Boutons et liens d'action
   --------------------------------------------------------------------- */

.hb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r-2);
	padding: var(--r-4) var(--r-6);
	border: 1px solid var(--sauge-900);
	background: var(--sauge-900);
	color: var(--creme);
	font-size: var(--t--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--vite) var(--sortie), color var(--vite) var(--sortie), transform var(--vite) var(--sortie);
}

.hb-bouton:hover { background: transparent; color: var(--sauge-900); }
.hb-bouton:active { transform: translateY(1px); }

.hb-bouton--clair {
	border-color: var(--creme);
	background: var(--creme);
	color: var(--sauge-900);
}
.hb-bouton--clair:hover { background: transparent; color: var(--creme); }

.hb-bouton--ligne { background: transparent; color: var(--sauge-900); }
.hb-bouton--ligne:hover { background: var(--sauge-900); color: var(--creme); }

/* Le lien flechee : la fleche avance au survol. */
.hb-fleche {
	display: inline-flex;
	align-items: center;
	gap: var(--r-2);
	font-size: var(--t--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--texte);
	border-bottom: 1px solid var(--filet);
	padding-bottom: var(--r-1);
	transition: border-color var(--vite) linear, color var(--vite) linear;
}

.hb-fleche span { transition: transform var(--pose) var(--sortie); }
.hb-fleche:hover { border-bottom-color: var(--sauge-900); color: var(--sauge-900); }
.hb-fleche:hover span { transform: translateX(5px); }

/* Sur aplat sombre, le lien fleche s'inverse. Sans cette regle il
   restait en encre sauge sur sauge : 1,73:1, illisible. */
.hb-drape .hb-fleche,
.hb-ouverture__dire .hb-fleche,
.hb-reponse .hb-fleche,
.hb-partenaire .hb-fleche {
	color: var(--creme);
	border-bottom-color: color-mix(in oklab, var(--creme) 45%, transparent);
}

.hb-drape .hb-fleche:hover,
.hb-ouverture__dire .hb-fleche:hover,
.hb-reponse .hb-fleche:hover,
.hb-partenaire .hb-fleche:hover {
	color: var(--creme);
	border-bottom-color: var(--creme);
}

/* ---------------------------------------------------------------------
   12. Article : le gabarit de lecture.
       Structure relevee sur maisonnataly.fr, declinaison propre au site.
   --------------------------------------------------------------------- */

.hb-article { padding-block: var(--r-8) var(--bloc); }

.hb-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-2);
	margin-bottom: var(--r-7);
	font-size: var(--t--1);
	color: var(--texte-2);
	list-style: none;
}

.hb-fil a { text-decoration: none; border-bottom: 1px solid var(--filet-tenu); }
.hb-fil a:hover { border-bottom-color: var(--sauge-700); color: var(--texte); }
.hb-fil li:not(:last-child)::after { content: '/'; margin-left: var(--r-2); color: var(--filet); }

/* Piege verifie le 03/08 : une largeur en `ch` posee sur .hb-tete se
   resout contre SA police (le corps a 17px), pas contre celle du titre.
   24ch valaient alors 204px et le H1 tombait sur six lignes. La largeur
   se met donc sur le titre lui-meme, ou le `ch` est celui du serif
   d'affichage, et .hb-tete ne contraint plus rien. */
.hb-tete { max-width: none; }

.hb-tete__titre {
	font-size: var(--t-5);
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 17ch;
}

.hb-tete--large .hb-tete__titre { max-width: 24ch; }

.hb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-3) var(--r-5);
	margin-top: var(--r-5);
	padding-bottom: var(--r-5);
	border-bottom: 1px solid var(--filet-tenu);
	font-size: var(--t--1);
	color: var(--texte-2);
}

.hb-partage { display: flex; align-items: center; gap: var(--r-3); margin-left: auto; }

.hb-partage a,
.hb-partage button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--filet-tenu);
	background: none;
	color: var(--texte-2);
	cursor: pointer;
	transition: border-color var(--vite) linear, color var(--vite) linear, background var(--vite) linear;
}

.hb-partage a:hover,
.hb-partage button:hover { border-color: var(--sauge-700); color: var(--creme); background: var(--sauge-700); }

.hb-partage svg { width: 15px; height: 15px; }

/* La colonne de lecture, et sa marge de notes a droite en grand ecran. */
.hb-corps-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
	margin-top: var(--r-7);
}

.hb-flux { max-width: var(--mesure); }

.hb-marge { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--r-6); }

/* 5. L'encadre de reponse immediate, avant tout le reste. */
.hb-reponse {
	background: var(--aplat);
	color: var(--texte-clair);
	padding: clamp(24px, 3.5vw, 40px);
	margin-bottom: var(--r-7);
}

.hb-reponse__mot {
	display: block;
	margin-bottom: var(--r-3);
	font-size: var(--t--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sauge-200);
}

.hb-reponse p {
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-2);
	line-height: 1.36;
	letter-spacing: -0.008em;
}

/* 6. Le sommaire a ancres. */
.hb-sommaire { border-top: 1px solid var(--filet); padding-top: var(--r-4); }

.hb-sommaire__mot {
	font-size: var(--t--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-2);
	margin-bottom: var(--r-4);
}

.hb-sommaire ol { list-style: none; counter-reset: som; }

.hb-sommaire li { counter-increment: som; }

.hb-sommaire a {
	display: grid;
	grid-template-columns: 2.6ch 1fr;
	gap: var(--r-3);
	padding: var(--r-2) 0;
	font-size: var(--t--1);
	line-height: 1.4;
	color: var(--texte-2);
	text-decoration: none;
	transition: color var(--vite) linear;
}

.hb-sommaire a::before {
	content: counter(som, decimal-leading-zero);
	color: var(--filet);
	font-variant-numeric: tabular-nums;
}

.hb-sommaire a:hover,
.hb-sommaire a[aria-current='true'] { color: var(--texte); }
.hb-sommaire a:hover::before,
.hb-sommaire a[aria-current='true']::before { color: var(--sauge-700); }

/* 7. L'emplacement de l'element interactif d'entree. */
.hb-interactif {
	border: 1px solid var(--filet);
	padding: clamp(24px, 3.5vw, 40px);
	margin-bottom: var(--r-7);
	background: var(--planche);
}

.hb-interactif__mot {
	font-size: var(--t--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-2);
	margin-bottom: var(--r-3);
}

.hb-interactif__titre { font-size: var(--t-2); margin-bottom: var(--r-4); }

.hb-choix { display: flex; flex-wrap: wrap; gap: var(--r-3); }

.hb-choix button {
	padding: var(--r-3) var(--r-5);
	border: 1px solid var(--filet);
	background: var(--blanc);
	font-size: var(--t--1);
	cursor: pointer;
	transition: border-color var(--vite) linear, background var(--vite) linear, color var(--vite) linear;
}

.hb-choix button:hover { border-color: var(--sauge-700); }
.hb-choix button[aria-pressed='true'] { background: var(--sauge-700); border-color: var(--sauge-700); color: var(--creme); }

.hb-reponse-choix { margin-top: var(--r-4); font-size: var(--t--1); color: var(--texte-2); }

/* 9. Les boutons de resume par un assistant. */
.hb-assistants {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r-3);
	padding: var(--r-5) 0;
	border-block: 1px solid var(--filet-tenu);
	margin-bottom: var(--r-7);
	font-size: var(--t--1);
	color: var(--texte-2);
}

.hb-assistants a {
	padding: var(--r-2) var(--r-4);
	border: 1px solid var(--filet-tenu);
	text-decoration: none;
	transition: border-color var(--vite) linear, color var(--vite) linear;
}

.hb-assistants a:hover { border-color: var(--sauge-700); color: var(--texte); }

/* 10. Le corps. */
.hb-flux > * + * { margin-top: var(--r-5); }

.hb-flux h2 {
	margin-top: var(--r-9);
	padding-top: var(--r-4);
	border-top: 1px solid var(--filet);
	font-size: var(--t-4);
	letter-spacing: -0.018em;
	scroll-margin-top: 104px;
}

.hb-flux h3 { margin-top: var(--r-7); font-size: var(--t-2); }

.hb-flux h4 { margin-top: var(--r-6); font-size: var(--t-1); }

.hb-flux p { line-height: 1.68; }

.hb-flux a:not(.hb-bouton):not(.hb-fleche) {
	color: var(--sauge-800);
	text-decoration: underline;
	text-decoration-color: var(--filet);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--vite) linear;
}

.hb-flux a:not(.hb-bouton):not(.hb-fleche):hover { text-decoration-color: var(--sauge-800); }

.hb-flux ul,
.hb-flux ol { padding-left: 0; list-style: none; }

.hb-flux ul li,
.hb-flux ol li { position: relative; padding-left: var(--r-6); line-height: 1.62; }

.hb-flux ul li + li,
.hb-flux ol li + li { margin-top: var(--r-3); }

.hb-flux ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 14px;
	height: 1px;
	background: var(--filet);
}

.hb-flux ol { counter-reset: pas; }
.hb-flux ol li { counter-increment: pas; }
.hb-flux ol li::before {
	content: counter(pas, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-size: var(--t--1);
	color: var(--sauge-600);
	font-variant-numeric: tabular-nums;
}

.hb-flux blockquote {
	margin: var(--r-7) 0;
	padding: 0 0 0 var(--r-6);
	border-left: 1px solid var(--filet);
	font-family: 'Faustina', Georgia, serif;
	font-size: var(--t-2);
	font-style: italic;
	line-height: 1.4;
	color: var(--sauge-800);
}

.hb-flux figure { margin: var(--r-7) 0; }
.hb-flux figcaption { margin-top: var(--r-3); font-size: var(--t--1); color: var(--texte-2); }

/* Le tableau comparatif. Il defile seul si l'ecran est trop etroit :
   c'est ce qui evite le debordement horizontal de la page. */
.hb-tableau { overflow-x: auto; margin: var(--r-7) 0; border-top: 1px solid var(--filet); }

.hb-flux table,
.hb-tableau table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: var(--t--1);
}

.hb-flux th,
.hb-tableau th {
	text-align: left;
	padding: var(--r-4) var(--r-4) var(--r-4) 0;
	border-bottom: 1px solid var(--filet);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--t--2);
	color: var(--texte-2);
	white-space: nowrap;
}

.hb-flux td,
.hb-tableau td {
	padding: var(--r-4) var(--r-4) var(--r-4) 0;
	border-bottom: 1px solid var(--filet-tenu);
	vertical-align: top;
	line-height: 1.5;
}

.hb-flux tbody tr:hover,
.hb-tableau tbody tr:hover { background: var(--planche); }

/* 12. Les amorces d'encadre dans le flux. */
.hb-note {
	margin: var(--r-6) 0;
	padding: var(--r-5) var(--r-6);
	background: var(--planche);
	border-top: 2px solid var(--sauge-700);
	font-size: var(--t--0, var(--t-0));
	line-height: 1.6;
}

.hb-note strong { color: var(--sauge-800); }

/* 13. Le bloc de conversion a mi-parcours. */
.hb-partenaire {
	margin: var(--r-9) 0;
	padding: clamp(28px, 4vw, 48px);
	background: var(--aplat);
	color: var(--texte-clair);
	display: grid;
	gap: var(--r-5);
}

.hb-partenaire__mot {
	font-size: var(--t--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sauge-200);
}

.hb-partenaire__titre { font-size: var(--t-3); max-width: 22ch; }
.hb-partenaire__texte { max-width: 52ch; color: color-mix(in oklab, var(--creme) 84%, var(--sauge-700)); }

/* 14. La synthese de fin de section. */
.hb-synthese {
	margin: var(--r-7) 0 0;
	padding: var(--r-5) 0 0;
	border-top: 1px solid var(--filet);
	font-size: var(--t--1);
	line-height: 1.6;
	color: var(--texte-2);
}

.hb-synthese strong {
	display: block;
	margin-bottom: var(--r-2);
	font-size: var(--t--2);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sauge-700);
}

/* 15. La matrice a qui ca s'adresse. */
.hb-matrice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--filet-tenu); margin: var(--r-7) 0; }
.hb-matrice > div { background: var(--fond); padding: var(--r-5); }
.hb-matrice h4 { font-size: var(--t-1); margin-bottom: var(--r-3); }
.hb-matrice p { font-size: var(--t--1); color: var(--texte-2); line-height: 1.55; }

/* 17. Le bloc d'expertise, sans jamais nommer une personne. */
.hb-methode {
	margin-top: var(--r-9);
	padding: clamp(24px, 3.5vw, 40px);
	border: 1px solid var(--filet);
	background: var(--planche);
}

.hb-methode h2 { font-size: var(--t-2); margin: 0 0 var(--r-4); border: 0; padding: 0; }
.hb-methode p { font-size: var(--t--1); line-height: 1.65; color: var(--texte-2); max-width: 62ch; }
.hb-methode p + p { margin-top: var(--r-3); }

/* 19. A lire aussi. */
.hb-aussi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--r-6); }

/* ---------------------------------------------------------------------
   13. Fiche produit
   --------------------------------------------------------------------- */

.hb-fiche {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
	padding-block: var(--r-8) var(--bloc);
}

.hb-galerie { display: flex; flex-direction: column; gap: var(--r-4); }

.hb-galerie__vue {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--planche);
	padding: clamp(16px, 3vw, 40px);
	margin: 0;
}

.hb-galerie__vue img { width: 100%; height: 100%; object-fit: contain; }

.hb-galerie__vues { display: flex; flex-wrap: wrap; gap: var(--r-3); list-style: none; }

.hb-galerie__vues button {
	width: 68px;
	aspect-ratio: 3 / 4;
	padding: 0;
	border: 1px solid transparent;
	background: var(--sauge-100);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--vite) linear, opacity var(--vite) linear;
	opacity: 0.72;
}

.hb-galerie__vues button img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hb-galerie__vues button:hover { opacity: 1; }
.hb-galerie__vues button.est-active { border-color: var(--sauge-700); opacity: 1; }

.hb-fiche__notes { display: flex; flex-direction: column; gap: var(--r-5); }
.hb-fiche__titre { font-size: var(--t-4); }
.hb-fiche__prix { font-size: var(--t-2); font-family: 'Faustina', Georgia, serif; }

/* Le renvoi de prix n'est pas un prix : il ne doit pas crier comme un
   chiffre, mais rester lisible. */
.hb-fiche__prix--renvoi {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: var(--t--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-2);
}

.hb-fiche__texte { color: var(--texte-2); line-height: 1.66; }
.hb-fiche__texte p + p { margin-top: var(--r-4); }
.hb-fiche__texte ul { list-style: none; }
.hb-fiche__texte li { position: relative; padding-left: var(--r-6); }
.hb-fiche__texte li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 14px; height: 1px; background: var(--filet); }

.hb-mention {
	font-size: var(--t--2);
	line-height: 1.55;
	color: var(--texte-2);
	border-top: 1px solid var(--filet-tenu);
	padding-top: var(--r-4);
}

/* La vue large d'en-tete de page : meme aspect partout, jamais recadree
   au petit bonheur par la hauteur de son image. */
.hb-vue-large {
	margin: var(--r-7) 0 0;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--sauge-100);
}

.hb-vue-large img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   14. Archives et listes
   --------------------------------------------------------------------- */

.hb-archive-tete { padding-block: var(--r-9) var(--r-7); border-bottom: 1px solid var(--filet); }
.hb-archive-tete h1 { font-size: var(--t-5); max-width: 22ch; }
.hb-archive-tete p { margin-top: var(--r-4); max-width: 58ch; color: var(--texte-2); }

.hb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3);
	margin-top: var(--r-9);
	padding-top: var(--r-6);
	border-top: 1px solid var(--filet);
	list-style: none;
}

.hb-pagination a,
.hb-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--r-3);
	border: 1px solid var(--filet-tenu);
	font-size: var(--t--1);
	text-decoration: none;
	transition: border-color var(--vite) linear, background var(--vite) linear, color var(--vite) linear;
}

.hb-pagination a:hover { border-color: var(--sauge-700); }
.hb-pagination .current { background: var(--sauge-700); border-color: var(--sauge-700); color: var(--creme); }

/* ---------------------------------------------------------------------
   15. Formulaire
   --------------------------------------------------------------------- */

.hb-formulaire { display: grid; gap: var(--r-5); max-width: 560px; }

.hb-champ { display: grid; gap: var(--r-2); }

.hb-champ label {
	font-size: var(--t--2);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-2);
}

.hb-champ input,
.hb-champ textarea {
	width: 100%;
	padding: var(--r-3) 0;
	border: 0;
	border-bottom: 1px solid var(--filet);
	background: none;
	font: inherit;
	font-size: var(--t-0);
	color: var(--texte);
	transition: border-color var(--vite) linear;
}

.hb-champ input:hover,
.hb-champ textarea:hover { border-bottom-color: var(--sauge-600); }

.hb-champ input:focus,
.hb-champ textarea:focus { outline: none; border-bottom-color: var(--sauge-900); border-bottom-width: 2px; padding-bottom: calc(var(--r-3) - 1px); }

.hb-champ textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

.hb-drape .hb-champ input,
.hb-drape .hb-champ textarea { color: var(--creme); border-bottom-color: color-mix(in oklab, var(--creme) 40%, transparent); }
.hb-drape .hb-champ label { color: var(--sauge-200); }
.hb-drape .hb-champ input:hover,
.hb-drape .hb-champ textarea:hover { border-bottom-color: color-mix(in oklab, var(--creme) 70%, transparent); }
.hb-drape .hb-champ input:focus,
.hb-drape .hb-champ textarea:focus { border-bottom-color: var(--creme); }

.hb-mot-eau { position: absolute; left: -9999px; }

.hb-message { padding: var(--r-4) var(--r-5); border-left: 2px solid var(--sauge-700); background: var(--planche); font-size: var(--t--1); }

/* ---------------------------------------------------------------------
   16. Pied de page
   --------------------------------------------------------------------- */

.hb-pied { background: var(--sauge-900); color: var(--creme); padding-block: var(--bloc) var(--r-7); }

.hb-pied__grille {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--r-8) var(--r-6);
}

.hb-pied__marque { font-family: 'Faustina', Georgia, serif; font-size: var(--t-3); font-weight: 500; letter-spacing: -0.02em; }
.hb-pied__marque i { font-style: italic; font-weight: 400; }

.hb-pied__mot { max-width: 34ch; margin-top: var(--r-4); font-size: var(--t--1); line-height: 1.6; color: color-mix(in oklab, var(--creme) 76%, var(--sauge-900)); }

.hb-pied h2 { font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sauge-200); margin-bottom: var(--r-4); }

.hb-pied ul { list-style: none; display: grid; gap: var(--r-3); }

.hb-pied ul a {
	font-size: var(--t--1);
	text-decoration: none;
	color: color-mix(in oklab, var(--creme) 82%, var(--sauge-900));
	border-bottom: 1px solid transparent;
	transition: color var(--vite) linear, border-color var(--vite) linear;
}

.hb-pied ul a:hover { color: var(--creme); border-bottom-color: color-mix(in oklab, var(--creme) 50%, transparent); }

.hb-pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r-3) var(--r-6);
	margin-top: var(--r-9);
	padding-top: var(--r-5);
	border-top: 1px solid color-mix(in oklab, var(--creme) 18%, transparent);
	font-size: var(--t--2);
	color: color-mix(in oklab, var(--creme) 62%, var(--sauge-900));
}

/* ---------------------------------------------------------------------
   17. Mouvement
       Le contenu est visible par defaut. C'est la classe hb-js, posee
       par le header, qui autorise l'etat cache : sans JS, sans
       IntersectionObserver ou en onglet d'arriere-plan, rien ne
       disparait.
   --------------------------------------------------------------------- */

.hb-js .hb-monte { opacity: 0; transform: translateY(14px); }

.hb-js .hb-monte.est-la {
	opacity: 1;
	transform: none;
	transition: opacity 760ms var(--sortie), transform 760ms var(--sortie);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.hb-js .hb-monte { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   18. Adaptations
       Trois paliers seulement, et ils sont ranges du plus large au plus
       etroit pour qu'on lise la degradation d'un coup d'oeil.
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.hb-corps-article { grid-template-columns: minmax(0, 1fr); }
	.hb-marge { position: static; order: -1; }
	.hb-flux { max-width: none; }
	.hb-pied__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
	:root { --bloc: clamp(48px, 8vw, 72px); }

	.hb-nav { display: none; }

	.hb-nav[data-ouvert='1'] {
		display: block;
		position: fixed;
		inset: 72px 0 auto 0;
		z-index: var(--z-menu);
		background: var(--fond);
		border-bottom: 1px solid var(--filet);
		padding: var(--r-5) var(--gouttiere) var(--r-7);
	}

	.hb-nav[data-ouvert='1'] ul { flex-direction: column; align-items: flex-start; gap: var(--r-5); }
	.hb-nav[data-ouvert='1'] a { font-size: var(--t-1); }

	.hb-brulure { display: inline-flex; }

	.hb-bandeau__rang { grid-template-columns: auto 1fr auto; }
	.hb-marque { justify-self: start; }
	.hb-outils { justify-self: end; }
	.hb-chercher input { width: 92px; }

	.hb-ouverture { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.hb-ouverture__vue { aspect-ratio: 4 / 3; }

	.hb-planche,
	.hb-carnet,
	.hb-fiche,
	.hb-drape__grille { grid-template-columns: minmax(0, 1fr); }

	.hb-drape__grille { gap: var(--r-6); align-items: start; }
	.hb-planche__vue { aspect-ratio: 3 / 2; }
	.hb-tete__titre { max-width: none; }
}

@media (max-width: 600px) {
	:root { --t-0: 1rem; }

	.hb-chercher { display: none; }
	.hb-rayon { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--r-7) var(--r-5); }
	.hb-pied__grille { grid-template-columns: minmax(0, 1fr); gap: var(--r-7); }
	.hb-filet { gap: var(--r-4); }
	.hb-filet__mot { font-size: var(--t-2); }
	.hb-meta { gap: var(--r-3); }
	.hb-partage { margin-left: 0; }
	.hb-annotations div { grid-template-columns: minmax(0, 1fr); gap: var(--r-1); }
	.hb-bouton { width: 100%; }
	.hb-aussi { grid-template-columns: minmax(0, 1fr); }
}

/* Impression : on garde le texte, on jette le decor. */
@media print {
	.hb-bandeau, .hb-pied, .hb-partage, .hb-interactif, .hb-partenaire, .hb-assistants { display: none; }
	body.hb-corps { background: #fff; color: #000; }
	.hb-corps-article { grid-template-columns: 1fr; }
}