/* ==========================================================================
   Houblia, feuille de style unique
   Vocabulaire des classes: devanture, vitrine, montant, plinthe, cerclage,
   etiquette, ruban, registre, jauge, cuve, brassin, soutirage, foudre.
   ========================================================================== */

:root {
  --fond: #EEF3F9;
  --fond-alt: #E3EBF4;
  --surface: #FBFCFE;
  --texte: #1B1636;
  --texte-doux: #4F4A73;
  --accent: #5636B4;
  --accent-texte: #FBF9FF;
  --cuivre: #945418;
  --bordure: #C3D2E2;

  /* Encre marine violacee diluee: elle remplace les voiles blancs du regime
     sombre. Sur un fond clair, un voile se fabrique en assombrissant. */
  --encre-05: rgba(27, 22, 54, 0.05);
  --encre-14: rgba(27, 22, 54, 0.14);
  --encre-22: rgba(27, 22, 54, 0.22);

  --titre: "Arvo", Georgia, "Times New Roman", serif;
  --courant: "Heebo", "Segoe UI", Helvetica, Arial, sans-serif;
  --etiquette: "Lobster", "Brush Script MT", cursive;

  --montant: 10px;
  --vitre: 1180px;
  --gouttiere: 26px;
  --respiration: clamp(64px, 8vw, 108px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 0.6em;
  text-transform: none;
}

h1 { font-size: 3.1rem; font-weight: 700; }
h2 { font-size: 2.1rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 400; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cuivre); }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: 0.45em; }

strong { font-weight: 700; color: var(--texte); }

:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px rgba(148, 84, 24, 0.20);
}

::selection { background: var(--accent); color: var(--accent-texte); }

html { scrollbar-color: var(--accent) var(--fond-alt); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fond-alt); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 3px solid var(--fond-alt);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cuivre); }

.hb-invisible {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.hb-evitement {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 90;
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 2px;
  transition: top 140ms ease;
}
.hb-evitement:focus { top: 12px; color: var(--accent-texte); }

/* --------------------------------------------------------------------------
   1. Cerclage de vitrine, forme signature
   -------------------------------------------------------------------------- */

.hb-cerclage {
  position: relative;
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-radius: 2px;
}

.hb-cerclage::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) 10px 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 10px 100% / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 0 10px / 1px calc(100% - 20px) no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 100% 10px / 1px calc(100% - 20px) no-repeat;
  opacity: 0.8;
  transition: opacity 200ms ease;
}

.hb-cerclage:hover::before { opacity: 1; }

.hb-cerclage--sourd::before { opacity: 0.5; }

/* --------------------------------------------------------------------------
   2. Ruban adhesif translucide, motif signature
   -------------------------------------------------------------------------- */

.hb-ruban { position: relative; }

.hb-ruban::after,
.hb-bande {
  content: "";
  position: absolute;
  width: 132px;
  height: 30px;
  transform: rotate(4deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--encre-05) 3px 6px),
    linear-gradient(var(--encre-05), var(--encre-05));
  border-top: 1px solid var(--encre-14);
  border-bottom: 1px solid var(--encre-14);
  pointer-events: none;
  z-index: 3;
}

.hb-ruban::after {
  top: -14px;
  right: -26px;
}

.hb-ruban--gauche::after { right: auto; left: -30px; transform: rotate(-4deg); }
.hb-ruban--bas::after { top: auto; bottom: -13px; right: 24px; transform: rotate(-3deg); }

.hb-bande--longue {
  width: 320px;
  position: relative;
  display: block;
  margin: 0 auto;
  transform: translateY(-15px) rotate(-2deg);
}

.hb-separateur {
  border: 0;
  height: 1px;
  background: var(--bordure);
  margin: 0;
  max-width: var(--vitre);
}

.hb-separateur-cale {
  position: relative;
  max-width: var(--vitre);
  margin: 0 auto;
  padding: 0 40px;
}

/* --------------------------------------------------------------------------
   3. Balayage de lumiere sur le fond des sections
   -------------------------------------------------------------------------- */

.hb-scene {
  position: relative;
  overflow: hidden;
  padding: var(--respiration) 0;
}

.hb-scene::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(86, 54, 180, 0) 0%,
    rgba(86, 54, 180, 0.10) 36%,
    rgba(148, 84, 24, 0.08) 58%,
    rgba(148, 84, 24, 0) 100%);
  opacity: 0;
  transform: translateX(-100%);
}

.hb-scene.est-eclairee::before {
  animation: hb-balayage 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes hb-balayage {
  0%   { opacity: 1; transform: translateX(-100%); }
  72%  { opacity: 1; }
  100% { opacity: 0.33; transform: translateX(0); }
}

.hb-scene.est-eclairee .hb-cerclage::before {
  animation: hb-reflet 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
}

@keyframes hb-reflet {
  0%   { opacity: 0.35; }
  45%  { opacity: 1; }
  100% { opacity: 0.8; }
}

.hb-scene--alt { background: var(--fond-alt); }

.hb-monte {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hb-monte.est-posee { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   4. Trame generale
   -------------------------------------------------------------------------- */

.hb-trame {
  width: 100%;
  max-width: var(--vitre);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.hb-douze {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
}

.hb-surtitre {
  font-family: var(--etiquette);
  font-size: 1.25rem;
  color: var(--cuivre);
  margin: 0 0 10px;
  display: inline-block;
  padding: 0 12px 0 0;
  background: transparent;
}

.hb-intitule {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  margin: 0 0 8px;
}

.hb-chapeau {
  color: var(--texte-doux);
  font-size: 1.12rem;
  max-width: 66ch;
}

.hb-menu-tete {
  max-width: 62ch;
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   5. En tete fixe
   -------------------------------------------------------------------------- */

.hb-barre {
  position: fixed;
  inset: 0 0 auto 0;
  height: 68px;
  z-index: 60;
  background: rgba(238, 243, 249, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  transition: height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.hb-barre.est-defile {
  height: 58px;
  background: rgba(238, 243, 249, 0.96);
  box-shadow: 0 2px 0 0 var(--cuivre), 0 6px 14px -12px var(--encre-22);
}

.hb-barre__interieur {
  height: 100%;
  max-width: var(--vitre);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hb-logotype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--texte);
  text-decoration: none;
  letter-spacing: -0.015em;
}
.hb-logotype:hover { color: var(--texte); }
.hb-logotype svg { flex: 0 0 auto; }
.hb-logotype__point { color: var(--cuivre); }

.hb-navigation {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hb-navigation a {
  color: var(--texte-doux);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.hb-navigation a:hover,
.hb-navigation a.est-active {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.hb-bouton-menu {
  display: none;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  color: var(--texte);
  width: 44px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hb-bouton-menu span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--texte);
  box-shadow: 0 -6px 0 0 var(--texte), 0 6px 0 0 var(--texte);
}

/* --------------------------------------------------------------------------
   6. Boutons tampons
   -------------------------------------------------------------------------- */

.hb-tampon {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--accent-texte);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease;
}

.hb-tampon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 2px;
  z-index: -1;
}

.hb-tampon::after {
  content: "";
  position: absolute;
  inset: 3px -3px -3px 3px;
  border: 1px solid var(--cuivre);
  border-radius: 2px;
  z-index: -2;
  transition: inset 140ms ease;
}

.hb-tampon:hover {
  transform: translate(2px, 2px);
  color: var(--accent-texte);
}
.hb-tampon:hover::after { inset: 0; }

.hb-tampon--creux {
  color: var(--texte);
  border: 1px solid var(--bordure);
}
.hb-tampon--creux::before { background: transparent; }
.hb-tampon--creux::after {
  inset: 4px;
  border-color: var(--bordure);
}
.hb-tampon--creux:hover {
  transform: none;
  color: var(--texte);
}
.hb-tampon--creux:hover::after { inset: 4px; border-color: var(--cuivre); }

.hb-tampon--petit { height: 42px; padding: 0 18px; font-size: 0.78rem; }

.hb-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
  margin: 28px 0 20px;
}

/* --------------------------------------------------------------------------
   7. Hero en devanture
   -------------------------------------------------------------------------- */

.hb-devanture {
  padding: 108px 40px 0;
}

.hb-vitrine {
  max-width: var(--vitre);
  margin: 0 auto;
  border: var(--montant) solid var(--surface);
  border-radius: 2px;
  background: var(--fond-alt);
  position: relative;
  box-shadow: 0 0 0 1px var(--bordure), 0 8px 18px -14px var(--encre-22);
  overflow: hidden;
}

.hb-vitrine::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) 14px 0 / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 14px 100% / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 0 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 100% 14px / 1px calc(100% - 28px) no-repeat;
  opacity: 0.85;
}

.hb-vitrine__haut {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 34px;
  padding: 54px 44px 40px;
}

.hb-vitrine__dire { grid-column: span 7; }
.hb-vitrine__jauge { grid-column: span 5; position: relative; }

.hb-vitrine__dire h1 { margin-bottom: 18px; }

.hb-accroche {
  color: var(--texte-doux);
  font-size: 1.16rem;
  max-width: 54ch;
}

.hb-rassurance {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--texte-doux);
  border-left: 2px solid var(--cuivre);
  padding-left: 14px;
  margin-top: 6px;
  max-width: 52ch;
}
.hb-rassurance b { color: var(--texte); font-weight: 700; }

/* panneau d apercu et compte a rebours */

.hb-panneau {
  position: relative;
  padding: 22px 20px 20px;
  z-index: 1;
}

.hb-panneau__nappe {
  position: absolute;
  inset: -10px -6px auto;
  height: 120px;
  z-index: 0;
  pointer-events: none;
}
.hb-panneau__nappe .hb-bande { position: absolute; }
.hb-panneau__nappe .hb-bande:nth-child(1) { top: 6px; right: 10px; }
.hb-panneau__nappe .hb-bande:nth-child(2) { top: 34px; right: 46px; transform: rotate(-4deg); }
.hb-panneau__nappe .hb-bande:nth-child(3) { top: 62px; right: 2px; transform: rotate(3deg); }

.hb-decompte {
  text-align: center;
  border-bottom: 1px dashed var(--bordure);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.hb-decompte__mot {
  font-family: var(--etiquette);
  font-size: 1.25rem;
  color: var(--cuivre);
  display: block;
  line-height: 1.2;
}
.hb-decompte__chiffre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 0.9;
  color: var(--accent);
  display: block;
  letter-spacing: -0.04em;
}
.hb-decompte__laisse {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   8. Registres, tableaux denses
   -------------------------------------------------------------------------- */

.hb-registre {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.hb-registre caption {
  caption-side: top;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  padding-bottom: 8px;
}

.hb-registre th,
.hb-registre td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
}

.hb-registre thead th {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--cuivre);
}

.hb-registre td.hb-nombre,
.hb-registre th.hb-nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
}

.hb-registre tfoot td {
  font-weight: 700;
  color: var(--accent);
  border-bottom: 0;
  border-top: 1px solid var(--cuivre);
  font-size: 1.05rem;
}

.hb-unite {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--texte-doux);
  margin-left: 3px;
  text-transform: uppercase;
}

.hb-defilant { overflow-x: auto; }

/* plinthe de devanture */

.hb-plinthe {
  border-top: 1px solid var(--bordure);
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.hb-plinthe > div {
  padding: 20px 24px;
  border-left: 1px solid var(--bordure);
}
.hb-plinthe > div:first-child { border-left: 0; }

.hb-plinthe__valeur {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.55rem;
  color: var(--cuivre);
  display: block;
  line-height: 1.1;
}
.hb-plinthe__note {
  font-size: 0.82rem;
  color: var(--texte-doux);
  display: block;
  margin-top: 4px;
}

.hb-vitrine__cliche { position: relative; margin: 0; }
.hb-vitrine__cliche img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.85) contrast(1.05);
  border-radius: 0;
}
.hb-vitrine__cliche::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--fond-alt) 0%, rgba(227, 235, 244, 0.45) 46%, rgba(238, 243, 249, 0.18) 100%),
    linear-gradient(rgba(238, 243, 249, 0.22), rgba(238, 243, 249, 0.22));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Cliches encastres dans la page
   -------------------------------------------------------------------------- */

.hb-cliche {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  overflow: visible;
  margin: 0 0 26px;
}
.hb-cliche--bandeau { margin-bottom: 44px; }
.hb-cliche img {
  width: 100%;
  border-radius: 0;
  filter: saturate(0.85) contrast(1.04);
  display: block;
}
.hb-cliche__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--fond) 0%, rgba(238, 243, 249, 0.22) 55%, rgba(148, 84, 24, 0.06) 100%),
    linear-gradient(rgba(238, 243, 249, 0.22), rgba(238, 243, 249, 0.22));
}
.hb-cliche figcaption {
  font-size: 0.82rem;
  color: var(--texte-doux);
  padding: 10px 12px 12px;
  border-top: 1px solid var(--bordure);
  background: var(--surface);
}

.hb-etiquette-lot {
  position: absolute;
  top: -14px;
  left: 18px;
  z-index: 4;
  background: var(--surface);
  box-shadow: 0 3px 7px -5px var(--encre-22);
  border: 1px solid var(--cuivre);
  border-radius: 2px;
  color: var(--texte);
  font-family: var(--etiquette);
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 12px 7px;
}

/* --------------------------------------------------------------------------
   10. Probleme
   -------------------------------------------------------------------------- */

.hb-classeur { align-items: start; }
.hb-classeur__colonne { grid-column: span 6; }
.hb-classeur__aparte { grid-column: span 5; grid-column-start: 8; }

.hb-fissure {
  border-left: 2px solid var(--cuivre);
  padding: 4px 0 4px 18px;
  margin: 0 0 22px;
}
.hb-fissure h3 { margin-bottom: 4px; font-weight: 700; font-size: 1.08rem; }
.hb-fissure p { margin: 0; color: var(--texte-doux); font-size: 0.98rem; }

.hb-ardoise {
  padding: 24px 22px;
  margin-top: 8px;
}
.hb-ardoise h3 { font-size: 1.12rem; font-weight: 700; }
.hb-ardoise p { font-size: 0.95rem; color: var(--texte-doux); margin-bottom: 0.7em; }
.hb-ardoise p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Solution, quatre operations
   -------------------------------------------------------------------------- */

.hb-soutirage { row-gap: 34px; }
.hb-operation { grid-column: span 3; position: relative; padding: 26px 20px 22px; }
.hb-operation__rang {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.hb-operation h3 { font-weight: 700; font-size: 1.08rem; margin-bottom: 8px; }
.hb-operation p { font-size: 0.95rem; color: var(--texte-doux); margin: 0; }

/* --------------------------------------------------------------------------
   12. Fonctionnalites
   -------------------------------------------------------------------------- */

.hb-atelier { row-gap: 30px; }
.hb-cuve { grid-column: span 4; padding: 26px 22px 24px; }
.hb-cuve h3 { font-weight: 700; font-size: 1.1rem; }
.hb-cuve p { font-size: 0.95rem; color: var(--texte-doux); margin-bottom: 0; }
.hb-cuve__pictogramme { margin-bottom: 14px; display: block; }

/* --------------------------------------------------------------------------
   13. Avantages en bandes
   -------------------------------------------------------------------------- */

.hb-rendement { row-gap: 0; }
.hb-bande-gain {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--bordure);
}
.hb-bande-gain:first-of-type { border-top: 1px solid var(--bordure); }
.hb-bande-gain__chiffre {
  grid-column: span 3;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1;
  color: var(--cuivre);
}
.hb-bande-gain__chiffre small {
  display: block;
  font-family: var(--courant);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: 6px;
}
.hb-bande-gain__dit { grid-column: span 9; }
.hb-bande-gain__dit h3 { margin-bottom: 4px; font-weight: 700; font-size: 1.1rem; }
.hb-bande-gain__dit p { margin: 0; color: var(--texte-doux); font-size: 0.97rem; max-width: 74ch; }

/* --------------------------------------------------------------------------
   14. Preuve sociale
   -------------------------------------------------------------------------- */

.hb-jauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bordure);
  border-radius: 2px;
  background: var(--surface);
  margin-bottom: 42px;
}
.hb-jauges > div { padding: 22px 20px; border-left: 1px solid var(--bordure); }
.hb-jauges > div:first-child { border-left: 0; }
.hb-jauges dt {
  font-family: var(--etiquette);
  font-size: 1.2rem;
  color: var(--cuivre);
  margin-bottom: 2px;
}
.hb-jauges dd {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--texte);
  line-height: 1.15;
}
.hb-jauges span {
  display: block;
  font-family: var(--courant);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--texte-doux);
  margin-top: 4px;
}

.hb-paroles { row-gap: 30px; }
.hb-parole { grid-column: span 4; padding: 26px 22px 22px; }
.hb-parole blockquote { margin: 0 0 16px; }
.hb-parole blockquote p { font-size: 0.99rem; margin-bottom: 0.8em; }
.hb-parole blockquote p:last-child { margin-bottom: 0; }
.hb-parole figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
  font-size: 0.87rem;
  color: var(--texte-doux);
}
.hb-parole figcaption b {
  display: block;
  font-family: var(--etiquette);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--texte);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   15. Tarifs
   -------------------------------------------------------------------------- */

.hb-foudres { align-items: stretch; row-gap: 30px; }
.hb-formule {
  grid-column: span 4;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
}
.hb-formule--phare {
  transform: translateY(-16px);
  border-color: var(--cuivre);
}
.hb-formule--phare.hb-cerclage::before { opacity: 1; }
.hb-formule__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 4px;
}
.hb-formule__marque {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-texte);
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.hb-formule__prix {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--cuivre);
  margin: 10px 0 2px;
}
.hb-formule__unite {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 14px;
  display: block;
}
.hb-formule__cible {
  font-size: 0.92rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
}
.hb-formule ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 22px;
  flex: 1 1 auto;
}
.hb-formule li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--texte);
  margin-bottom: 10px;
  line-height: 1.55;
}
.hb-formule li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 2px;
  background: var(--cuivre);
}
.hb-formule .hb-tampon { width: 100%; }

.hb-note-tarif {
  grid-column: span 12;
  font-size: 0.9rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 18px;
  margin-top: 26px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.hb-questions { grid-column: 3 / span 8; }

.hb-question {
  border: 1px solid var(--bordure);
  border-radius: 2px;
  background: var(--surface);
  margin-bottom: 12px;
}
.hb-question summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 20px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  position: relative;
  color: var(--texte);
}
.hb-question summary::-webkit-details-marker { display: none; }
.hb-question summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 24px;
  width: 12px; height: 2px;
  background: var(--cuivre);
  transition: transform 180ms ease;
}
.hb-question summary::before {
  content: "";
  position: absolute;
  right: 25px; top: 19px;
  width: 2px; height: 12px;
  background: var(--cuivre);
  transition: opacity 180ms ease, transform 180ms ease;
}
.hb-question[open] summary::before { opacity: 0; transform: scaleY(0); }
.hb-question__corps { padding: 0 20px 18px; }
.hb-question__corps p { font-size: 0.96rem; color: var(--texte-doux); margin-bottom: 0.7em; }
.hb-question__corps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Formulaire
   -------------------------------------------------------------------------- */

.hb-quai { row-gap: 34px; }
.hb-quai__formulaire { grid-column: span 7; }
.hb-quai__cote { grid-column: span 4; grid-column-start: 9; }

.hb-champ { margin-bottom: 18px; }
.hb-champ label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.hb-champ input[type="text"],
.hb-champ input[type="email"],
.hb-champ select,
.hb-champ textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 2px;
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.hb-champ textarea { resize: vertical; min-height: 130px; }
.hb-champ input:focus,
.hb-champ select:focus,
.hb-champ textarea:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.hb-champ--paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 0;
}

.hb-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin: 6px 0 22px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.hb-consentement input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }

.hb-apres-envoi {
  font-size: 0.9rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
  padding-top: 14px;
}

.hb-cote-bloc { padding: 24px 22px; }
.hb-cote-bloc h3 { font-weight: 700; font-size: 1.08rem; }
.hb-cote-bloc ul { padding-left: 18px; }
.hb-cote-bloc li { font-size: 0.93rem; color: var(--texte-doux); }
.hb-cote-bloc p { font-size: 0.93rem; color: var(--texte-doux); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */

.hb-quai-bas {
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 62px 0 0;
  margin-top: 0;
}
.hb-quai-bas__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.hb-quai-bas h2 {
  font-size: 0.8rem;
  font-family: var(--courant);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: 14px;
}
.hb-quai-bas ul { list-style: none; padding: 0; margin: 0; }
.hb-quai-bas li { margin-bottom: 8px; }
.hb-quai-bas a { color: var(--texte-doux); text-decoration: none; font-size: 0.93rem; }
.hb-quai-bas a:hover { color: var(--cuivre); text-decoration: underline; }
.hb-quai-bas p { font-size: 0.9rem; color: var(--texte-doux); }

.hb-reseaux { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; }
.hb-reseaux a {
  border: 1px solid var(--bordure);
  border-radius: 2px;
  padding: 5px 10px;
  font-size: 0.8rem;
}

.hb-ourlet {
  border-top: 1px solid var(--bordure);
  margin-top: 48px;
  padding: 20px 0 26px;
  font-size: 0.85rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.hb-ourlet p { margin: 0; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   19. Pages internes
   -------------------------------------------------------------------------- */

.hb-page {
  padding: 128px 0 var(--respiration);
}
.hb-page__entete { max-width: 68ch; margin-bottom: 40px; }
.hb-page__entete h1 { font-size: 2.5rem; }

.hb-fil {
  font-size: 0.82rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
}
.hb-fil a { color: var(--texte-doux); text-decoration: none; }
.hb-fil a:hover { color: var(--cuivre); }

.hb-texte-long { max-width: 74ch; }
.hb-texte-long h2 {
  font-size: 1.55rem;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--bordure);
}
.hb-texte-long h3 { font-size: 1.14rem; font-weight: 700; margin-top: 28px; }
.hb-texte-long ul { padding-left: 20px; }
.hb-texte-long li { color: var(--texte); }

.hb-fiche-identite {
  list-style: none;
  padding: 22px;
  margin: 0 0 24px;
}
.hb-fiche-identite li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  border-bottom: 1px solid var(--bordure);
  padding: 8px 0;
  font-size: 0.94rem;
}
.hb-fiche-identite li:last-child { border-bottom: 0; }
.hb-fiche-identite b {
  min-width: 220px;
  font-weight: 600;
  color: var(--texte-doux);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 3px;
}

.hb-portrait {
  float: right;
  margin: 0 0 22px 28px;
  width: 220px;
  padding: 8px;
}
.hb-portrait img { border-radius: 2px; }
.hb-portrait figcaption {
  font-size: 0.8rem;
  color: var(--texte-doux);
  padding-top: 8px;
  text-align: left;
}

.hb-plan-liste { list-style: none; padding: 0; }
.hb-plan-liste > li {
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  background: var(--surface);
}
.hb-plan-liste a { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.hb-plan-liste p { margin: 4px 0 0; font-size: 0.93rem; color: var(--texte-doux); }

.hb-centre-court {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  padding: 34px 30px;
}
.hb-centre-court h1 { font-size: 2.3rem; }

/* --------------------------------------------------------------------------
   20. Panneau mobile
   -------------------------------------------------------------------------- */

.hb-panneau-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--fond-alt);
  border-left: 1px solid var(--bordure);
  z-index: 80;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 240ms ease;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.hb-panneau-mobile.est-ouvert { transform: translateX(0); visibility: visible; }
.hb-panneau-mobile a {
  color: var(--texte);
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.1rem;
  padding: 12px 0;
  border-bottom: 1px solid var(--bordure);
}
.hb-panneau-mobile a:hover { color: var(--cuivre); }
.hb-panneau-mobile .hb-tampon {
  margin-top: 20px;
  font-family: var(--courant);
  font-size: 0.86rem;
  border-bottom: 0;
  color: var(--accent-texte);
  padding: 0 26px;
}
.hb-panneau-mobile .hb-tampon:hover { color: var(--accent-texte); }

.hb-fermer {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  color: var(--texte);
  font-size: 1.1rem;
  width: 40px; height: 40px;
  cursor: pointer;
  margin-bottom: 10px;
}

.hb-voile-mobile {
  position: fixed;
  inset: 0;
  background: rgba(27, 22, 54, 0.55);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.hb-voile-mobile.est-ouvert { opacity: 1; visibility: visible; }

body.est-bloque { overflow: hidden; }

/* --------------------------------------------------------------------------
   21. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hb-vitrine__haut { padding: 42px 30px 34px; }
  .hb-operation { grid-column: span 6; }
  .hb-cuve { grid-column: span 6; }
  .hb-questions { grid-column: span 12; }
  .hb-quai__formulaire { grid-column: span 12; }
  .hb-quai__cote { grid-column: span 12; grid-column-start: auto; }
  .hb-classeur__colonne { grid-column: span 12; }
  .hb-classeur__aparte { grid-column: span 12; grid-column-start: auto; }
}

@media (max-width: 900px) {
  .hb-navigation { display: none; }
  .hb-barre__interieur .hb-tampon { display: none; }
  .hb-bouton-menu { display: inline-flex; }
  .hb-vitrine__haut { grid-template-columns: 1fr; }
  .hb-vitrine__dire, .hb-vitrine__jauge { grid-column: span 1; }
  .hb-formule { grid-column: span 12; }
  .hb-formule--phare { transform: none; }
  .hb-parole { grid-column: span 12; }
  .hb-plinthe { grid-template-columns: repeat(2, 1fr); }
  .hb-plinthe > div:nth-child(3) { border-left: 0; }
  .hb-plinthe > div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .hb-jauges { grid-template-columns: repeat(2, 1fr); }
  .hb-jauges > div:nth-child(3) { border-left: 0; }
  .hb-jauges > div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .hb-quai-bas__grille { grid-template-columns: repeat(2, 1fr); }
  .hb-portrait { float: none; width: 100%; max-width: 280px; margin: 0 0 24px; }
}

@media (max-width: 720px) {
  :root { --gouttiere: 18px; }
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.6rem; }
  .hb-page__entete h1 { font-size: 1.9rem; }
  .hb-trame, .hb-barre__interieur { padding: 0 20px; }
  .hb-devanture { padding: 92px 16px 0; }
  .hb-vitrine { border-width: 6px; }
  .hb-vitrine__haut { padding: 30px 20px 26px; }
  .hb-operation, .hb-cuve { grid-column: span 12; }
  .hb-bande-gain__chiffre { grid-column: span 12; }
  .hb-bande-gain__dit { grid-column: span 12; }
  .hb-decompte__chiffre { font-size: 4.2rem; }
  .hb-plinthe { grid-template-columns: 1fr; }
  .hb-plinthe > div { border-left: 0; border-top: 1px solid var(--bordure); }
  .hb-plinthe > div:first-child { border-top: 0; }
  .hb-jauges { grid-template-columns: 1fr; }
  .hb-jauges > div { border-left: 0; border-top: 1px solid var(--bordure); }
  .hb-jauges > div:first-child { border-top: 0; }
  .hb-quai-bas__grille { grid-template-columns: 1fr; }
  .hb-champ--paire { grid-template-columns: 1fr; }
  .hb-fiche-identite b { min-width: 100%; }
  .hb-vitrine__cliche img { height: 190px; }
}

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

@media print {
  .hb-barre, .hb-panneau-mobile, .hb-voile-mobile, .hb-tampon { display: none !important; }
  body { background: #FFFFFF; color: var(--texte); }
}

/* ==========================================================================
   22. Le Registre du Brasseur, section magazine
   Ajoute en fin de feuille, aucune regle precedente n est touchee.
   Memes variables, meme cerclage de vitrine en double filet, meme ruban
   adhesif translucide et meme balayage de lumiere que le reste du site:
   le magazine est une piece de la devanture, pas un module rapporte.
   Vocabulaire: sommaire, billet, article, corps, signature, voisin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Intitule de colonne du pied de page, variante sans balise de titre
   Une page d article ne porte qu une seule hierarchie de titres, celle du
   corps redactionnel: le pied de page y emploie donc un paragraphe.
   -------------------------------------------------------------------------- */

.hb-quai-bas__intitule {
  font-size: 0.8rem;
  font-family: var(--courant);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuivre);
  margin: 0 0 14px;
  line-height: 1.18;
}

/* --------------------------------------------------------------------------
   22.2 Sommaire du magazine, grille de cartes d article
   -------------------------------------------------------------------------- */

.hb-sommaire {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px var(--gouttiere);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-billet {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  transition: transform 160ms ease, border-color 160ms ease;
}

.hb-billet:hover {
  transform: translateY(-3px);
  border-color: var(--cuivre);
  box-shadow: 0 6px 14px -10px var(--encre-22);
}

.hb-billet__cliche {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}

.hb-billet__cliche img {
  width: 100%;
  height: 188px;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.85) contrast(1.04);
  border-radius: 0;
}

.hb-billet__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--surface) 0%, rgba(251, 252, 254, 0.42) 52%, rgba(148, 84, 24, 0.07) 100%),
    linear-gradient(rgba(238, 243, 249, 0.22), rgba(238, 243, 249, 0.22));
}

.hb-billet__angle {
  position: absolute;
  left: 16px;
  bottom: -13px;
  z-index: 4;
  background: var(--surface);
  box-shadow: 0 3px 7px -5px var(--encre-22);
  border: 1px solid var(--cuivre);
  border-radius: 2px;
  color: var(--texte);
  font-family: var(--etiquette);
  font-size: 1.02rem;
  line-height: 1;
  padding: 6px 12px 7px;
}

.hb-billet__dire {
  padding: 30px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.hb-billet__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.hb-billet__titre a { color: var(--texte); text-decoration: none; }
.hb-billet__titre a:hover { color: var(--cuivre); text-decoration: underline; text-underline-offset: 4px; }

.hb-billet__extrait {
  font-size: 0.95rem;
  color: var(--texte-doux);
  margin: 0 0 18px;
  max-width: none;
}

.hb-billet__pied {
  margin-top: auto;
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  margin-bottom: 0;
  max-width: none;
}
.hb-billet__pied b { color: var(--cuivre); font-weight: 600; }

/* --------------------------------------------------------------------------
   22.3 Derniers articles sur la page d accueil
   -------------------------------------------------------------------------- */

.hb-derniers .hb-sommaire { margin-bottom: 34px; }

.hb-derniers__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  border-top: 1px solid var(--bordure);
  padding-top: 26px;
}
.hb-derniers__suite p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   22.4 Entete d une page d article
   -------------------------------------------------------------------------- */

.hb-article { padding: 128px 0 var(--respiration); }

.hb-article__entete {
  max-width: 72ch;
  margin-bottom: 34px;
}
.hb-article__entete h1 {
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.hb-article__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: baseline;
  margin: 0 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--bordure);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  max-width: none;
}
.hb-article__reperes b { color: var(--cuivre); font-weight: 600; }

.hb-article__chapo {
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--texte);
  border-left: 2px solid var(--cuivre);
  padding: 4px 0 4px 20px;
  margin: 0 0 34px;
  max-width: 68ch;
}

.hb-article__cliche {
  position: relative;
  margin: 0 0 44px;
  border: 1px solid var(--bordure);
  border-radius: 2px;
}
.hb-article__cliche img {
  width: 100%;
  filter: saturate(0.85) contrast(1.04);
  border-radius: 0;
}
.hb-article__cliche .hb-cliche__voile { z-index: 1; }

/* --------------------------------------------------------------------------
   22.5 Corps redactionnel, balises nues
   Le texte des articles ne porte aucune classe: tout se met en forme ici,
   en tant que descendant du conteneur de corps.
   -------------------------------------------------------------------------- */

.hb-article__corps {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.72;
}

.hb-article__corps > :first-child { margin-top: 0; }

.hb-article__corps h2 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.72rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--texte);
  margin: 52px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  position: relative;
}
.hb-article__corps h2::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--cuivre);
}

.hb-article__corps h3 {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--texte);
  margin: 34px 0 12px;
}

.hb-article__corps p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

.hb-article__corps a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hb-article__corps a:hover {
  color: var(--cuivre);
  text-decoration-color: var(--cuivre);
}

.hb-article__corps strong { font-weight: 700; color: var(--texte); }
.hb-article__corps em { font-style: italic; color: var(--texte); }

.hb-article__corps ul,
.hb-article__corps ol {
  margin: 0 0 1.4em;
  max-width: 68ch;
}

.hb-article__corps ul { list-style: none; padding-left: 2px; }
.hb-article__corps ul > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 0.55em;
}
.hb-article__corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--cuivre);
}

.hb-article__corps ol { padding-left: 1.4em; }
.hb-article__corps ol > li { margin-bottom: 0.55em; padding-left: 4px; }
.hb-article__corps ol > li::marker {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hb-article__corps li > ul,
.hb-article__corps li > ol { margin: 0.5em 0 0.2em; }

/* tableau recapitulatif, tenu comme un registre encadre de vitrine */

.hb-article__corps table {
  width: 100%;
  margin: 8px 0 2em;
  border-collapse: separate;
  border-spacing: 0;
  padding: 9px;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) 14px 4px / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 14px calc(100% - 5px) / calc(100% - 28px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 4px 14px / 1px calc(100% - 28px) no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) calc(100% - 5px) 14px / 1px calc(100% - 28px) no-repeat,
    var(--surface);
}

.hb-article__corps caption {
  caption-side: top;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  padding: 4px 6px 12px;
}

.hb-article__corps th,
.hb-article__corps td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure);
}

.hb-article__corps thead th {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--cuivre);
}

.hb-article__corps tbody th {
  font-weight: 600;
  color: var(--texte);
}

.hb-article__corps tbody tr:last-child th,
.hb-article__corps tbody tr:last-child td { border-bottom: 0; }

.hb-article__corps tbody tr:hover td,
.hb-article__corps tbody tr:hover th { background: rgba(86, 54, 180, 0.07); }

/* citation */

.hb-article__corps blockquote {
  margin: 30px 0;
  padding: 20px 22px 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 2px;
  color: var(--texte);
  font-size: 1.06rem;
}
.hb-article__corps blockquote p { margin-bottom: 0.8em; }
.hb-article__corps blockquote p:last-child { margin-bottom: 0; }

/* encadre, traite au double filet de vitrine avec sa bande de ruban */

.hb-article__corps aside {
  position: relative;
  margin: 34px 0;
  padding: 26px 24px 22px;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  background: var(--fond-alt);
  font-size: 0.98rem;
}
.hb-article__corps aside::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) 10px 0 / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 10px 100% / calc(100% - 20px) 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 0 10px / 1px calc(100% - 20px) no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 100% 10px / 1px calc(100% - 20px) no-repeat;
  opacity: 0.8;
}
.hb-article__corps aside::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -22px;
  width: 132px;
  height: 30px;
  transform: rotate(4deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--encre-05) 3px 6px),
    linear-gradient(var(--encre-05), var(--encre-05));
  border-top: 1px solid var(--encre-14);
  border-bottom: 1px solid var(--encre-14);
  pointer-events: none;
  z-index: 3;
}
.hb-article__corps aside p:last-child { margin-bottom: 0; }
.hb-article__corps aside ul:last-child,
.hb-article__corps aside ol:last-child { margin-bottom: 0; }

/* figure de corps */

.hb-article__corps figure {
  margin: 30px 0;
  border: 1px solid var(--bordure);
  border-radius: 2px;
  background: var(--surface);
}
.hb-article__corps figure img { width: 100%; border-radius: 0; }
.hb-article__corps figcaption {
  font-size: 0.82rem;
  color: var(--texte-doux);
  padding: 10px 14px 12px;
  border-top: 1px solid var(--bordure);
}

/* --------------------------------------------------------------------------
   22.6 Relance de fin d article
   -------------------------------------------------------------------------- */

.hb-article__relance {
  max-width: 72ch;
  margin: 46px 0 0;
  padding: 28px 26px 24px;
}
.hb-article__relance .hb-billet__titre { font-size: 1.24rem; margin-bottom: 10px; }
.hb-article__relance p {
  color: var(--texte-doux);
  font-size: 0.98rem;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   22.7 Encart auteur
   -------------------------------------------------------------------------- */

.hb-signature {
  max-width: 72ch;
  margin: 44px 0 0;
  padding: 26px 24px 22px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
}
.hb-signature img {
  width: 96px;
  height: 96px;
  border-radius: 2px;
  border: 1px solid var(--bordure);
  object-fit: cover;
}
.hb-signature__nom {
  font-family: var(--etiquette);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--texte);
  margin: 0 0 2px;
}
.hb-signature__role {
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cuivre);
  margin: 0 0 12px;
}
.hb-signature p {
  font-size: 0.96rem;
  color: var(--texte-doux);
  margin-bottom: 0.7em;
}
.hb-signature p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   22.8 Bloc A lire aussi
   -------------------------------------------------------------------------- */

.hb-lire-aussi {
  margin-top: var(--respiration);
  border-top: 1px solid var(--bordure);
  padding-top: 40px;
}
.hb-lire-aussi__intitule {
  font-family: var(--etiquette);
  font-size: 1.25rem;
  color: var(--cuivre);
  margin: 0 0 22px;
  line-height: 1.2;
}

.hb-lire-aussi__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: stretch;
}

.hb-voisin {
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: transform 160ms ease, border-color 160ms ease;
}
.hb-voisin:hover {
  transform: translateY(-3px);
  border-color: var(--cuivre);
  box-shadow: 0 6px 14px -10px var(--encre-22);
}

.hb-voisin__cliche {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--bordure);
}
.hb-voisin__cliche img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.85) contrast(1.04);
  border-radius: 0;
}
.hb-voisin__dire { padding: 18px 18px 16px; }
.hb-voisin__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.hb-voisin__titre a { color: var(--texte); text-decoration: none; }
.hb-voisin__titre a:hover { color: var(--cuivre); text-decoration: underline; text-underline-offset: 4px; }
.hb-voisin__accroche {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   22.9 Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hb-billet { grid-column: span 6; }
  .hb-lire-aussi__grille { grid-template-columns: repeat(2, 1fr); }
  .hb-voisin:last-child { grid-column: span 2; }
  .hb-voisin:last-child .hb-voisin__cliche img { height: 168px; }
}

@media (max-width: 900px) {
  .hb-article__entete h1 { font-size: 2.05rem; }
}

@media (max-width: 720px) {
  .hb-billet { grid-column: span 12; }
  .hb-billet__cliche img { height: 208px; }
  .hb-article { padding-top: 104px; }
  .hb-article__entete h1 { font-size: 1.9rem; }
  .hb-article__corps h2 { font-size: 1.45rem; margin-top: 40px; }
  .hb-article__corps table { display: block; overflow-x: auto; }
  .hb-lire-aussi__grille { grid-template-columns: 1fr; }
  .hb-voisin:last-child { grid-column: span 1; }
  .hb-signature { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Correction: colonnes laterales reduites a une seule colonne de grille
   La regle ecrivait grid-column: span 5 puis grid-column-start: 8. La propriete
   longue ecrase la portee posee par le raccourci: il restait un debut a la
   colonne 8 et une fin automatique, donc une seule colonne au lieu de cinq.
   Meme defaut sur le cote du formulaire de contact. On ecrit desormais le
   debut et la portee dans une seule declaration.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  .hb-classeur__aparte { grid-column: 8 / span 5; }
  .hb-quai__cote { grid-column: 9 / span 4; }
}
@media (max-width: 1080px) {
  .hb-classeur__aparte,
  .hb-quai__cote { grid-column: 1 / -1; }
}