.hh, .hh *, .hh *::before, .hh *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── COULEURS, toutes en dur, jamais en héritage ── */
:root {
  --bg:    #faf8f2;
  --bg2:   #f1ebdc;
  --teal:  #8f6100;
  --fire:  #8f6100;
  --gold:  #8f6100;       /* légèrement assombri pour contraste */
  --text:  #232323;
  --text2: #5c5c5c;
  --white: #141414;
}
/* ── BASE ── */
.hh {
  background-color: #faf8f2 !important;
  color: #232323 !important;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 17px;
  line-height:1.9;
  scroll-behavior: smooth;
}
/* Toutes les sections héritent du fond sombre */
.hh section, .hh div, .hh article, .hh main, .hh footer, .hh header {
  color: inherit;
}
/* ── TYPOGRAPHY ── */
.hh h1, .hh h2, .hh h3, .hh h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: #141414 !important;   /* forcé, jamais noir sur blanc */
  line-height:1.0;
}
.hh h1 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); font-weight:700; margin-bottom: 24px; }
.hh h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight:700; margin-bottom: 22px; }
.hh h3 { font-size: clamp(1.06rem, 2.2vw, 1.5rem); font-weight:700; margin-bottom: 12px; }
.hh h4 { font-size:1.06rem; font-weight:700; margin-bottom: 8px; }
.hh .gold { color: #8f6100 !important; font-style: italic; }
.hh .teal { color: #8f6100 !important; }
.hh .hi { color: #141414 !important; font-weight:600; }
.hh p { color: #232323 !important; margin-bottom: 20px; line-height:1.9; font-size:1.06rem; }
.hh p.big { font-size:1.06rem; line-height:1.9; }
.hh p.dim { color: #5c5c5c !important; font-size:0.88rem; }
.hh strong { color: #141414 !important; font-weight:600; }
.hh .eyebrow {
  display: block;
  font-family: 'Karla', system-ui, sans-serif;
  font-size:0.88rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #8f6100 !important;
  margin-bottom: 16px;
}
/* ── LAYOUT ── */
.hh .wrap { max-width: 720px; margin: 0 auto; padding: 80px 24px; background-color: #faf8f2; }
.hh .wrap.wide { max-width: 980px; }
.hh .wrap.ctr { text-align: center; }
.hh hr.line { border: none; height: 1px; background: rgba(191,144,0,0.3); max-width: 460px; margin: 0 auto; }
.hh .orn { text-align: center; color: #8f6100 !important; opacity: .4; padding: 10px 0; font-size:1.06rem; }
/* ── BUTTON ── */
.hh .btn {
  display: inline-block;
  background: linear-gradient(135deg, #BF9000, #8f6100);
  color: #fff;
  font-family: 'Karla', system-ui, sans-serif;
  font-size:0.88rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 19px 52px;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 5px 30px rgba(191,144,0,0.266);
  transition: transform .18s, box-shadow .18s;
}
.hh .btn:hover { transform: translateY(-2px); box-shadow: 0 9px 40px rgba(191,144,0,0.364); }
.hh .btn-sub { display: block; margin-top: 12px; font-size:0.88rem; color: #5c5c5c !important; }
/* ── BARRE URGENCE ── */
.hh .urgency-bar {
  background-color: #BF9000 !important;
  padding: 14px 24px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.hh .urgency-bar p {
  color: #fff !important;
  font-size:0.88rem;
  font-weight:600;
  margin: 0;
  letter-spacing: .03em;
}
.hh .urgency-bar strong { color: #faf8f2 !important; }
/* ── POUR QUI / PAS POUR QUI ── */
.hh .forqui-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; }
@media(max-width:580px) {
.hh .forqui-grid { grid-template-columns:1fr; }
}
.hh .forqui-card {
  background-color: #ffffff !important;
  border-radius: 3px;
  padding: 28px 24px;
}
.hh .forqui-card.oui { border-left: 3px solid #8f6100; }
.hh .forqui-card.non { border-left: 3px solid #8f6100; }
.hh .forqui-card h4 { font-size:1.06rem; margin-bottom: 16px; }
.hh .forqui-card h4.oui { color: #8f6100 !important; }
.hh .forqui-card h4.non { color: #8f6100 !important; }
.hh .forqui-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.hh .forqui-list li { font-size:0.88rem; color:#232323 !important; padding-left:20px; position:relative; line-height:1.5; }
.hh .forqui-list li::before { position:absolute; left:0; font-size:0.88rem; }
.hh .forqui-card.oui .forqui-list li::before { content:'✓'; color:#8f6100; }
.hh .forqui-card.non .forqui-list li::before { content:'✗'; color:#8f6100; }
/* ── OBJECTIONS ── */
.hh .objection { margin-bottom:24px; border-bottom:1px solid rgba(20,20,20,0.14); padding-bottom:24px; }
.hh .objection:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.hh .objection h4 { color:#8f6100 !important; font-size:1.06rem; margin-bottom:10px; }
.hh .objection p { font-size:0.88rem; color:#232323 !important; margin:0; line-height:1.75; }
/* ── ANCRAGE VALEUR ── */
.hh .value-table {
  background-color: #ffffff !important;
  border: 1px solid rgba(191,144,0,0.27);
  border-radius: 4px;
  overflow: hidden;
  margin: 32px 0;
  width: 100%;
}
.hh .value-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(20,20,20,0.12);
  align-items: center;
}
.hh .value-row:last-child { border-bottom: none; }
.hh .value-row.total {
  background-color: #f6f1e5 !important;
  border-top: 1px solid rgba(191,144,0,0.45);
  padding: 18px 20px;
}
.hh .value-row .label { font-size:0.88rem; color:#232323 !important; }
.hh .value-row .price { font-size:0.88rem; color:#5c5c5c !important; text-decoration:line-through; white-space:nowrap; }
.hh .value-row.total .label { font-weight:600; color:#141414 !important; font-size:1.06rem; }
.hh .value-row.total .price { color:#8f6100 !important; text-decoration:none; font-weight:700; font-size:1.06rem; }
.hh .value-row.yours .price { color:#8f6100 !important; text-decoration:none; font-weight:700; font-size:1.5rem; }
/* ── ORDER BUMP ── */
.hh .order-bump {
  background-color: #f6f1e5 !important;
  border: 2px dashed #8f6100;
  border-radius: 4px;
  padding: 24px 28px;
  margin: 24px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.hh .bump-check {
  width: 24px; height: 24px;
  border: 2px solid #8f6100;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,138,99,0.36);
}
.hh .bump-check span { color:#8f6100; font-size:1.06rem; font-weight:700; }
.hh .bump-body h4 { color:#141414 !important; font-size:1.06rem; margin-bottom:6px; }
.hh .bump-body p { font-size:0.88rem; color:#5c5c5c !important; margin:0; }
.hh .bump-price { color:#8f6100 !important; font-weight:700; font-size:1.06rem; }
@media(max-width:500px) {
.hh .order-bump { flex-direction:column; }
}
/* ── OTO COACHING ── */
.hh .oto-box {
  background: linear-gradient(135deg, #f6f1e5, #f1ebdc) !important;
  border: 1px solid rgba(191,144,0,0.375);
  border-radius: 4px;
  padding: 36px;
  margin: 24px 0;
  text-align: center;
}
.hh .oto-badge {
  display: inline-block;
  background-color: #BF9000;
  color: #fff !important;
  font-family: 'Karla', system-ui, sans-serif;
  font-size:0.88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.hh .oto-box h3 { font-size:1.5rem; margin-bottom:8px; }
.hh .oto-box .oto-sub { font-size:0.88rem; color:#5c5c5c !important; margin-bottom:20px; }
.hh .oto-old { font-size:0.88rem; color:#5c5c5c !important; text-decoration:line-through; margin-bottom:4px; }
.hh .oto-price { font-family:'Fraunces',Georgia,serif; font-size:2.4rem; font-weight:700; color:#141414 !important; line-height:1.0; margin-bottom:6px; }
.hh .oto-note { font-size:0.88rem; color:#8f6100 !important; margin-bottom:20px; }
.hh .oto-list { list-style:none; text-align:left; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.hh .oto-list li { font-size:0.88rem; color:#232323 !important; padding-left:18px; position:relative; }
.hh .oto-list li::before { content:'✦'; position:absolute; left:0; color:#8f6100; font-size:0.88rem; top:7px; }
@media(max-width:500px) {
.hh .oto-box { padding:24px 18px; }
}
/* ── FUTURE PACING ── */
.hh .future-box {
  background-color: #ffffff !important;
  border-left: 3px solid #8f6100;
  border-radius: 0 4px 4px 0;
  padding: 36px 32px;
  margin: 36px 0;
}
.hh .future-box h3 { color:#8f6100 !important; margin-bottom:20px; font-size:1.24rem; }
.hh .timeline { display:flex; flex-direction:column; gap:18px; }
.hh .tl-item { display:flex; gap:18px; align-items:flex-start; }
.hh .tl-dot { width:10px; height:10px; border-radius:50%; background:#8f6100; flex-shrink:0; margin-top:7px; }
.hh .tl-item p { font-size:1.06rem; color:#232323 !important; margin:0; line-height:1.75; }
.hh .tl-item .month { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; color:#232323 !important; display:block; margin-bottom:5px; }
/* ── HERO ── */
.hh .hero {
  min-height: 62vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 24px 60px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, #efe6d2 0%, #faf8f2 68%),
    radial-gradient(circle 320px at 12% 75%, rgba(14,138,99,0.144), transparent),
    radial-gradient(circle 260px at 88% 28%, rgba(138,106,58,0.105), transparent);
}
.hh .koru { width: 96px; height: 96px; margin-bottom: 32px; animation: rot 22s linear infinite; opacity: .72; }
@keyframes rot { to { transform: rotate(360deg); } }
.hh .hero-names { font-family:'Karla',system-ui,sans-serif; font-size: 0.88rem; color:#8f6100; letter-spacing:.12em; margin-bottom:36px; }
.hh .hero-deck { max-width:620px; font-size: 1.06rem; color:#5c5c5c; line-height:1.9; margin:0 auto 48px; }
/* ── PULL QUOTE, always dark ── */
.hh .pq {
  background: #f6f1e5 !important;   /* forced, never light */
  border-left: 3px solid #8f6100;
  border-radius: 0 3px 3px 0;
  padding: 24px 28px;
  margin: 32px 0;
}
.hh .pq p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size:1.06rem;
  line-height:1.75;
  color: #141414 !important;   /* forced white */
  margin-bottom: 10px;
}
.hh .pq cite {
  font-size:0.88rem;
  font-style: normal;
  color: #5c5c5c !important;
  font-family: 'Karla', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* ── CHECKLIST ── */
.hh .checks { list-style:none; margin:28px 0; display:flex; flex-direction:column; gap:14px; }
.hh .checks li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  background: rgba(138,106,58,0.105);
  border-left: 3px solid #8f6100;
  border-radius: 0 3px 3px 0;
  font-size:1.06rem;
  color: #232323 !important;
  line-height:1.5;
}
.hh .checks li .ic { flex-shrink:0; margin-top:3px; color:#8f6100; opacity:.7; }
/* ── BIG IDEA BOX ── */
.hh .big-idea {
  background: #f6f1e5 !important;
  border: 1px solid rgba(191,144,0,0.33);
  border-radius: 4px;
  padding: 48px 44px;
  margin: 36px 0;
  text-align: center;
}
.hh .big-idea h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); color:#141414 !important; margin-bottom: 0; }
@media(max-width:580px) {
.hh .big-idea { padding:32px 20px; }
}
/* ── PROGRAM INTRO BOX ── */
.hh .prog-intro {
  background: #f6f1e5;
  border: 1px solid rgba(14,138,99,0.396);
  border-radius: 4px;
  padding: 36px 40px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 24px;
  text-align: center;
}
.hh .prog-stat .num {
  font-family: 'Fraunces', Georgia, serif;
  font-size:3.1rem;
  font-weight:700;
  color: #8f6100 !important;
  line-height:1.0;
  display: block;
}
.hh .prog-stat .lbl {
  font-family: 'Karla', system-ui, sans-serif;
  font-size:0.88rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8f6100 !important;
  display: block;
  margin-top: 6px;
}
@media(max-width:480px) {
.hh .prog-intro { padding:28px 20px; }
}
/* ── HA/KA ── */
.hh .haka-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:36px 0; }
@media(max-width:500px) {
.hh .haka-row { grid-template-columns:1fr; }
}
.hh .haka-card {
  background-color:#f6f1e5 !important;
  border:1px solid rgba(191,144,0,0.3);
  border-radius:3px;
  padding:28px 22px;
  text-align:center;
}
.hh .haka-ltr { font-family:'Fraunces',Georgia,serif; font-size:3.1rem; font-weight:700; color:#8f6100; line-height:1.0; margin-bottom:8px; }
.hh .haka-sub { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.22em; text-transform:uppercase; color:#8f6100; margin-bottom:10px; display:block; }
.hh .haka-card p { font-size:0.88rem; color:#5c5c5c; margin:0; }
/* ── MECH BOX ── */
.hh .mech {
  background-color:#ffffff !important;
  border:1px solid rgba(14,138,99,0.36);
  border-radius:4px;
  padding:32px 36px;
  margin:28px 0;
}
.hh .mech h3 { color:#8f6100; font-size:1.06rem; margin-bottom:10px; }
.hh .mech p { font-size:0.88rem; color:#232323; margin:0; }
@media(max-width:500px) {
.hh .mech { padding:24px 18px; }
}
/* ── ABOUT ── */
.hh .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:36px 0; }
@media(max-width:600px) {
.hh .about-grid { grid-template-columns:1fr; }
}
.hh .about-card {
  padding:28px 24px;
  background-color:#ffffff !important;
  border:1px solid rgba(20,20,20,0.14);
  border-radius:3px;
  position:relative;
}
.hh .about-card::before {
  content:''; position:absolute;
  left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;
}
.hh .about-card.oj::before { background:#8f6100; }
.hh .about-card.wa::before { background:#8f6100; }
.hh .about-card h3 { font-size:1.06rem; margin-bottom:3px; }
.hh .role-tag { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.18em; text-transform:uppercase; color:#8f6100; margin-bottom:12px; display:block; }
.hh .about-card p { font-size:0.88rem; color:#5c5c5c; margin:0; line-height:1.75; }
/* ── CREDS ── */
.hh .cred-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.hh .cred-pill {
  background-color: transparent !important;
  border: 1px solid rgba(20,20,20,0.36);
  border-radius: 3px;
  padding: 5px 14px;
  font-size:0.88rem;
  color: #232323 !important;
  font-family: 'Karla', system-ui, sans-serif;
  letter-spacing: .06em;
}
/* ── SARAH BOX ── */
.hh .sarah {
  background-color:#ffffff !important;
  border:1px solid rgba(191,144,0,0.27);
  border-radius:4px;
  padding:32px 36px;
  margin:32px 0;
}
.hh .sarah-tag { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.22em; text-transform:uppercase; color:#8f6100; margin-bottom:12px; display:block; }
.hh .sarah p { font-style:italic; font-size:1.06rem; color:#232323; margin:0; }
@media(max-width:500px) {
.hh .sarah { padding:24px 18px; }
}
/* ── PHOTO PLACEHOLDER ── */
.hh .photo-ph {
  background-color:#f6f1e5 !important;
  border:1px dashed rgba(191,144,0,0.45);
  border-radius:4px;
  padding:48px 24px;
  text-align:center;
  margin:24px 0;
}
.hh .photo-ph .ph-icon { font-size:2.4rem; margin-bottom:12px; opacity:.5; }
.hh .photo-ph p { color:#5c5c5c; font-size:0.88rem; margin:0; }
/* ── SESSIONS LIVES ── */
.hh .sessions-bg { background:#f1ebdc; }
.hh .sessions-list { display:flex; flex-direction:column; gap:18px; margin-top:44px; }
.hh .session {
  display:grid; grid-template-columns:68px 1fr;
  gap:24px; align-items:start;
  padding:28px 28px 28px 24px;
  background-color:#ffffff !important;
  border:1px solid rgba(20,20,20,0.14);
  border-radius:3px;
  position:relative;
  transition:border-color .22s;
}
.hh .session:hover { border-color:rgba(191,144,0,0.3); }
.hh .session::before { content:''; position:absolute; left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px; }
.hh .s1::before { background:#8f6100; }
.hh .s2::before { background:#8f6100; }
.hh .s3::before { background:#8f6100; }
.hh .s4::before { background:#5c5c5c; }
.hh .s5::before { background:linear-gradient(180deg,#8f6100,#8f6100); }
.hh .s-num { text-align:center; padding-top:2px; }
.hh .s-rom { font-family:'Karla',system-ui,sans-serif; font-size:1.5rem; font-weight:600; color:#8f6100; line-height:1.0; display:block; }
.hh .s-dir { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.16em; text-transform:uppercase; color:#5c5c5c; display:block; margin-top:4px; }
.hh .s-body h3 { font-size:1.24rem; margin-bottom:4px; color:#141414; }
.hh .s-maori { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.12em; line-height:1.5; text-transform:uppercase; color:#8f6100; margin-bottom:10px; display:block; }
.hh .s-body p { font-size:1.06rem; color:#232323; margin:0; line-height:1.75; }
.hh .s-tag { display:inline-block; margin-top:12px; font-size:0.88rem; letter-spacing:.08em; text-transform:uppercase; color:#8f6100; border:1px solid rgba(191,144,0,0.42); padding:2px 10px; border-radius:2px; }
@media(max-width:540px) {
.hh .session { grid-template-columns:50px 1fr; gap:14px; padding:20px 16px; }
}
/* ── TEMOIGNAGES ── */
.hh .testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:28px; }
@media(max-width:600px) {
.hh .testi-grid { grid-template-columns:1fr; }
}
.hh .testi {
  background-color:#ffffff !important;
  border:1px solid rgba(20,20,20,0.14);
  border-radius:3px;
  padding:24px 22px;
}
.hh .testi-stars { color:#8f6100; font-size:0.88rem; margin-bottom:10px; }
.hh .testi p { font-size:1.06rem; color:#232323; font-style:italic; margin-bottom:12px; line-height:1.75; }
.hh .testi-name { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.12em; line-height:1.5; text-transform:uppercase; color:#232323; }
/* ── ALAIN RIOU PLACEHOLDER ── */
.hh .alain-ph {
  background-color:#ffffff !important;
  border:2px dashed rgba(191,144,0,0.45);
  border-radius:4px;
  padding:36px;
  text-align:center;
  margin:32px 0;
}
.hh .alain-ph h4 { color:#8f6100; font-size:1.06rem; margin-bottom:8px; }
.hh .alain-ph p { font-size:0.88rem; color:#5c5c5c; margin:0; }
/* ── BONUS ── */
.hh .bonus-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:32px; }
.hh .bonus-card {
  padding:24px 20px;
  background-color:#ffffff !important;
  border:1px solid rgba(14,138,99,0.324);
  border-radius:3px;
  text-align:center;
}
.hh .bonus-icon { font-size:1.9rem; margin-bottom:8px; display:block; }
.hh .bonus-card h4 { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.16em; text-transform:uppercase; color:#8f6100; margin-bottom:8px; }
.hh .bonus-card p { font-size:0.88rem; color:#5c5c5c; margin:0; line-height:1.75; }
/* ── PRICING ── */
.hh .pricing-bg { background:#f1ebdc; padding:80px 24px; }
.hh .pricing-wrap { max-width:760px; margin:0 auto; text-align:center; }
.hh .offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0; }
@media(max-width:540px) {
.hh .offer-grid { grid-template-columns:1fr; }
}
.hh .offer {
  padding:32px 24px;
  background-color:#ffffff !important;
  border:1px solid rgba(20,20,20,0.18);
  border-radius:3px;
  text-align:left;
}
.hh .offer.star {
  border-color:#8f6100;
  background:rgba(191,144,0,0.06);
  position:relative;
}
.hh .star-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:#8f6100; color:#faf8f2;
  font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.2em; text-transform:uppercase;
  padding:3px 16px; border-radius:2px; white-space:nowrap;
}
.hh .offer-name { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.2em; text-transform:uppercase; color:#8f6100; margin-bottom:14px; display:block; }
.hh .offer-price { font-family:'Fraunces',Georgia,serif; font-size:3.1rem; font-weight:700; color:#141414; line-height:1.0; margin-bottom:5px; }
.hh .offer-split { font-size:0.88rem; color:#8f6100; margin-bottom:20px; }
.hh .offer-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.hh .offer-list li { font-size:0.88rem; color:#232323; padding-left:18px; position:relative; line-height:1.5; }
.hh .offer-list li::before { content:'✦'; position:absolute; left:0; color:#8f6100; font-size:0.88rem; top:7px; }
.hh .coaching-box {
  background-color:#ffffff !important;
  border:1px solid rgba(191,144,0,0.3);
  border-radius:4px;
  padding:40px 36px;
  margin:20px 0;
  text-align:left;
}
.hh .coaching-box h3 { font-size:1.5rem; margin-bottom:18px; }
.hh .coaching-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.hh .coaching-list li { display:flex; align-items:flex-start; gap:12px; font-size:0.88rem; color:#232323; }
.hh .coaching-list li .dot { color:#8f6100; flex-shrink:0; margin-top:3px; }
.hh .price-box { background:rgba(138,106,58,0.135); border:1px solid rgba(138,106,58,0.3); border-radius:3px; padding:26px; text-align:center; }
.hh .price-box .big { font-family:'Fraunces',Georgia,serif; font-size:3.1rem; font-weight:700; color:#141414; line-height:1.0; }
.hh .price-box .sub { font-size:0.88rem; color:#5c5c5c; margin-top:7px; }
.hh .price-box .split { font-size:0.88rem; color:#8f6100; margin-top:7px; }
@media(max-width:500px) {
.hh .coaching-box { padding:28px 18px; }
}
/* ── FINAL ── */
.hh .final-bg { background:linear-gradient(180deg,#f1ebdc 0%,#e9dcc2 100%); padding:96px 24px; text-align:center; }
.hh .final-inner { max-width:660px; margin:0 auto; }
/* ── FOOTER ── */
@media(max-width:580px) {
.hh .eb-grid { grid-template-columns: 1fr !important; }
.hh .eb-photo { height: 200px !important; width: 100% !important; }
}
.hh footer { border-top:1px solid rgba(20,20,20,0.12); padding:28px 24px; text-align:center; font-size:0.88rem; color:rgba(92,92,92,0.64); letter-spacing:.05em; line-height:1.9; }
/* PHOTOS */
.hh .photo-round {
  width: 80px; height: 80px;
  border-radius: 50%;
  background-color: #f6f1e5 !important;
  border: 2px solid rgba(191,144,0,0.45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size:1.9rem;
  overflow: hidden;
}
.hh .photo-rect {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #f6f1e5 !important;
  border: 1px dashed rgba(191,144,0,0.45);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}
.hh .photo-rect span { font-size:0.88rem; color: #5c5c5c; font-style: italic; }
.hh .photo-square {
  width: 120px; height: 120px;
  background-color: #f6f1e5 !important;
  border: 1px dashed rgba(191,144,0,0.45);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.hh .photo-square span { font-size:0.88rem; color: #5c5c5c; text-align: center; }

/* ── conteneur ── */
.hh { isolation: isolate; max-width: 100%; }
html { scroll-behavior: smooth; }


/* ── CHOIX DE PAIEMENT ── */
.hh .pay { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 4px; }
@media(max-width:480px){ .hh .pay { grid-template-columns:1fr; } }
.hh .pay-opt { background-color:#f6f1e5 !important; border:1px solid rgba(191,144,0,0.42); border-radius:4px; padding:16px 18px; text-align:center; }
.hh .pay-label { display:block; font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.16em; text-transform:uppercase; color:#8f6100 !important; margin-bottom:8px; }
.hh .pay-amount { display:block; font-family:'Fraunces',Georgia,serif; font-size:1.5rem; font-weight:700; color:#141414 !important; line-height:1.0; }
.hh .pay-note { display:block; font-size:0.88rem; color:#5c5c5c !important; margin-top:6px; }

.hh .tl-mao { display:block; font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.09em; text-transform:uppercase; color:#8f6100 !important; margin-top:3px; line-height:1.3; }
.hh .tl-item p strong { color:#141414 !important; font-weight:600; }

/* ── MOUVEMENT RÉDUIT ── */
@media (prefers-reduced-motion: reduce) {
  .hh *, .hh *::before, .hh *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LEXIQUE MAORI ── */
.hh .lexique { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2px 26px; margin:22px 0 0; }
.hh .lex { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid rgba(20,20,20,0.14); }
.hh .lex b { font-family:'Karla',system-ui,sans-serif; font-size:0.88rem; letter-spacing:.08em; text-transform:uppercase; color:#8f6100; font-weight:600; white-space:nowrap; }
.hh .lex span { font-size:0.88rem; color:#232323; line-height:1.5; }
.hh .urgency-bar a { display: block; color: inherit; text-decoration: none; }
.hh .urgency-bar a:hover { background-color: rgba(0,0,0,.12); }

/* ══ LISTE DU BLOC DE TARIF ══
   Elle énumère ce que l'on achète, juste au-dessus du prix : elle relève
   du bloc encadré, pas de la mention. ══ */
.hh .offer-list li { font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 22px !important; }
.hh .offer-list li::before { font-size: 1.06rem !important; top: 4px !important; }
.hh .offer-list { gap: 13px !important; }

/* la note sous les cinq rendez-vous reste une mention, pas du texte courant */
.hh .note-rdv { font-size: 0.88rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ══ CLOTURE ══
   La dernière section descend d'un barreau : après 5 000 mots, le lecteur
   n'a plus besoin d'être happé, seulement accompagné jusqu'au bouton. ══ */
.hh .final-inner p {
  font-size: 1.06rem !important; line-height: 1.9 !important;
  max-width: 34em !important; margin-left: auto !important; margin-right: auto !important;
}

/* ══ CE QUE COMPREND LE PARCOURS ══
   La liste de l'offre est ce que le lecteur relit avant de payer :
   elle passe au corps du texte courant. ══ */
.hh .inclus li { font-size: 1.24rem !important; line-height: 1.75 !important; gap: 16px !important; }
.hh .inclus { gap: 18px !important; }
.hh .inclus-fin { font-size: 1.06rem !important; }

.hh .scene > span:first-child { font-size: 1.06rem !important; }

/* ══ SCENE DE VIE ══
   Cinq paragraphes dans un encadré déjà en retrait : ils descendent
   d'un barreau et sortent de la colonne de 34 em. ══ */
.hh .scene p {
  font-size: 1.06rem !important; line-height: 1.9 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}

/* ══ FRISE MOIS PAR MOIS ══
   La frise est déjà en retrait derrière ses pastilles : ses paragraphes
   descendent d'un barreau et sortent de la colonne de 34 em, qui les
   réduisait à quelques mots par ligne. ══ */
.hh .tl-item p, .hh .tl-text {
  font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.hh .tl-item .month { font-size: 1.06rem !important; }
/* le terme maori se détache de la ligne de date, sinon les deux se touchent */
.hh .tl-mao { font-size: 0.88rem !important; margin-top: 5px; }
.hh .timeline, .hh .tl-item { gap: 16px !important; }

/* ══ POUR QUI ══
   Les critères d'auto-sélection sont l'un des passages les plus lus :
   ils passent au corps du texte courant. ══ */
.hh .forqui-card h4 { font-size: 1.24rem !important; margin-bottom: 18px !important; }
.hh .forqui-list li { font-size: 1.06rem !important; line-height: 1.75 !important;
  padding-left: 24px !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important; }
.hh .forqui-list { gap: 14px !important; }
.hh .forqui-card { padding: 30px 26px !important; }

/* ══ CINQ RENDEZ-VOUS ══
   La règle de colonne posait margin-left:auto sur les <span>, ce qui écrasait
   la gouttière de la grille : direction et date se touchaient. ══ */
.hh .lex b, .hh .lex span {
  font-size: 1.06rem !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.hh .lex { gap: 16px !important; padding: 10px 0 !important; }
.hh .lexique { gap: 4px 32px !important; }

/* ══ BLOC COACHING ══
   Tout le bloc montait au barreau le plus bas de l'échelle : sur une offre
   à 140 €, les arguments méritent le corps du texte courant. ══ */
.hh .oto-sub { font-size: 1.06rem !important; line-height: 1.75 !important; max-width: none;
  margin-left: 0 !important; margin-right: 0 !important; }
.hh .oto-old { font-size: 1.06rem !important; }
.hh .oto-note { font-size: 1.06rem !important; }
.hh .oto-list li { font-size: 1.06rem !important; line-height: 1.75 !important; padding-left: 22px !important; }
.hh .oto-list { gap: 14px !important; }
.hh .oto-price { font-size: 3.1rem !important; }

/* ══ RESPIRATION DES FICHES ══
   Les fiches montent d'un barreau. Pour que les lignes ne se cassent pas
   dans une colonne étroite, la marge intérieure se réduit et l'espace
   entre les deux colonnes aussi : la mesure utile gagne une trentaine de pixels. ══ */
.hh .about-card { padding: 26px 18px !important; }
.hh .about-grid { gap: 14px !important; }
.hh .about-card p { font-size: 1.06rem !important; max-width: none;
  margin-left: 0 !important; margin-right: 0 !important; line-height: 1.75 !important; }

/* ══ GRAISSES ══
   Trois seulement : 400 pour le texte, 600 pour les titres et les libellés,
   700 pour le H1. Le 900 de Fraunces écrasait la page. ══ */
.hh, .hh p, .hh li, .hh span, .hh div, .hh cite { font-weight: 400; }
.hh h2, .hh h3, .hh h4, .hh .eyebrow, .hh strong, .hh b,
.hh .num, .hh .s-rom, .hh .offer-price, .hh .pay-amount { font-weight: 600 !important; }
.hh h1 { font-weight: 700 !important; }
.hh .big-idea h2 { font-weight: 400 !important; }
.hh .haka-ltr, .hh .oto-price, .hh .price-box .big, .hh .prog-stat .num { font-weight: 600 !important; }

/* ══ ECHELLE TYPOGRAPHIQUE ══
   Deux familles seulement : Fraunces pour les titres, Karla pour tout le reste.
   Space Grotesk est retiré — une troisième famille ne se justifiait pas. ══ */
.hh, .hh p, .hh li, .hh span, .hh div, .hh cite, .hh a, .hh strong, .hh em {
  font-family: 'Karla', system-ui, sans-serif;
}
.hh h1, .hh h2, .hh h3, .hh h4, .hh .big-idea h2, .hh .offer-price, .hh .pay-amount,
.hh .num, .hh .s-rom {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* ══ COLONNE DE LECTURE ══
   Tous les paragraphes de contenu partagent la même mesure, le même corps
   et la même couleur. Sans cela, un <p class="big"> voisinait avec des
   <p> gris de largeur libre, et l'écart se voyait. ══ */
/* indépendant de la profondeur d'imbrication : certains paragraphes sont
   enfouis sous deux niveaux de div et échappaient à la règle */
.hh p, .hh .big {
  max-width: 34em; margin-left: auto !important; margin-right: auto !important;
  font-size: 1.24rem !important; line-height: 1.75 !important;
  color: #232323 !important;
}
/* les blocs encadrés gardent leur pleine largeur : ils ont déjà leur cadre */
.hh .mech p, .hh .pq p, .hh .session p, .hh .testi p, .hh .tst p,
.hh .offer p, .hh .bump p, .hh .scarce p, .hh .early p, .hh .arnaud p,
.hh .nathalie p, .hh .big-idea p, .hh .logi-card p, .hh .prog-intro p,
.hh .forqui-card p, .hh .objection p {
  max-width: none; margin-left: 0 !important; margin-right: 0 !important;
  font-size: 1.06rem !important; line-height: 1.75 !important;
}
.hh .btn-sub, .hh .pay-note, .hh figcaption, .hh cite, .hh .s-tag,
.hh .lbl, .hh .sc-ritual p {
  font-size: 0.88rem !important; max-width: none; margin-left: 0 !important; margin-right: 0 !important;
}
@media (max-width: 620px) {
  .hh .wrap > p, .hh .wrap > div > p, .hh .big { font-size: 1.06rem !important; }
}

/* ══ TITRES ALLEGES ══
   Fraunces en graisse 700 à 2,9 rem écrasait la page. La graisse descend
   à 600 et la taille d'un demi-rem : le titre reste dominant sans peser. ══ */
.hh h2 { font-weight: 600 !important; font-size: clamp(1.5rem, 3.6vw, 2.4rem) !important; }
.hh h1 { font-weight: 700 !important; font-size: clamp(1.9rem, 4.8vw, 3.1rem) !important; }
.hh h3 { font-weight: 600 !important; }
/* la big idea vit de sa taille et de son cadre, pas de sa graisse */
.hh .big-idea h2 { font-weight: 400 !important; line-height: 1.5 !important;
  font-size: clamp(1.24rem, 2.6vw, 1.9rem) !important; }

/* ══ MARQUE ══ */
.hh .marque { display: block; width: clamp(130px, 18vw, 170px); height: auto;
  margin: 0 auto 22px; box-shadow: none !important; }
.hh .hero { padding-top: 34px !important; }
.hh .hero-koru { display: none !important; }

/* le caractère ✦ d'origine est masqué : seule l'icône subsiste */
.hh .orn { font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  opacity: 1 !important; padding: 26px 0 !important; }
.hh .orn::after {
  content: ""; display: block; width: min(160px, 36%); height: 62px; margin: 0 auto;
  background: url("assets/img-206c3898.png") center/contain no-repeat; opacity: .55;
}
@media (max-width: 620px) { .hh .marque { width: 118px; } .hh .hero { padding-top: 24px !important; } }

/* l'or de marque est trop clair pour du texte blanc : encre foncée */
.hh .urgency-bar, .hh .urgency, .hh .urgency-bar *, .hh .urgency * { color: #1a1300 !important; }
.hh .urgency-bar p, .hh .urgency p { font-size: 1.06rem !important; max-width: none;
  margin-left: 0 !important; margin-right: 0 !important; line-height: 1.5 !important; }

/* ── BANDE « LE PARCOURS » : plus claire, pour trancher avec ce qui précède ── */
.hh #parcours {
  background: #fbfcfa !important;
  border-top: 1px solid rgba(20,20,20,.10);
  border-bottom: 1px solid rgba(20,20,20,.10);
  margin: 10px 0;
}
.hh #parcours .sc-item {
  border: 1px solid rgba(20,20,20,.14) !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.07), 0 10px 26px rgba(20,20,20,.08);
}

/* ── 1. UN SEUL TON CHAUD, RÉSERVÉ À L'URGENCE ── */
.hh .forqui-card, .hh .forqui-card.non, .hh .checks li, .hh .s2::before, .hh .s5::before {
  border-left-color: #8f6100 !important;
}
.hh .checks li { background: rgba(143,100,22,.07) !important; }
.hh .checks li .ic { color: #8f6100 !important; }

/* ── 2. NETTOYAGE DU DÉGRADÉ FANTÔME ── */
.hh .btn, .hh .btn:link, .hh .btn:visited { background-image: none; }

/* ── 4. SÉPARATEURS VISIBLES ── */
.hh .orn { color: #8f6100 !important; opacity: .9 !important; }

/* ── 5. TROISIÈME NIVEAU TYPOGRAPHIQUE ── */
.hh .eyebrow, .hh .s-maori, .hh .sc-month, .hh .tl-mao, .hh .tl-when, .hh .role-tag,
.hh .offer-name, .hh .pay-label, .hh .testi-name, .hh .tst-name, .hh .cred-pill,
.hh .s-tag, .hh .btn, .hh .logi-card strong, .hh .sc-ritual strong, .hh .s-rom, .hh .s-dir,
.hh .sc-num, .hh .prog-stat .lbl, .hh .bonus-card h4, .hh .sarah-tag, .hh .tl-item .month {
  font-family: 'Karla', system-ui, sans-serif !important;
}

/* ── FOND SOUS-BOIS ── */
.hh {
  background-color: #faf8f2;
  background-image:
    radial-gradient(circle 620px at 84% 6%,  rgba(191,144,0,.12), transparent 66%),
    radial-gradient(circle 560px at 8% 40%,  rgba(128,128,128,.08), transparent 68%),
    radial-gradient(circle 700px at 72% 90%, rgba(191,144,0,.07), transparent 70%),
    url("assets/img-e488301c.svg"), url("assets/img-1cc75816.svg");
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-position: 84% 6%, 8% 40%, 72% 90%, right -60px bottom -40px, left -80px top 60px;
  background-size: auto, auto, auto, 46vmin auto, 34vmin auto;
}
@media (max-width: 780px) {
  .hh { background-attachment: scroll; background-size: auto, auto, auto, 70vmin auto, 55vmin auto; }
}
.hh .wrap { background-color: transparent !important; }
.hh .sessions-bg, .hh .pricing-bg { background: #f1ebdc !important; }
.hh .hero { background: radial-gradient(ellipse 82% 58% at 50% 16%, #efe6d2 0%, rgba(241,246,241,0) 68%) !important; }

/* ── RELIEF : les cartes se détachent réellement ── */
.hh .testi, .hh .tst, .hh .session, .hh .about-card, .hh .offer, .hh .bump, .hh .logi-card, .hh .haka-card, .hh .mech, .hh .future-box, .hh .sarah, .hh .offer-box, .hh .scarce, .hh .early, .hh .arnaud, .hh .nathalie, .hh .sc-item, .hh .cred-pill, .hh [style*="#ffffff"] {
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 8px 22px rgba(20,20,20,.07);
}

/* ── SIGNATURE NACRE : dégradé paua ── */
.hh .urgency { background: linear-gradient(100deg, #BF9000 0%, #b08400 42%, #8f6100 100%) !important; }
.hh .btn {
  background: linear-gradient(100deg, #7a5300 0%, #8f6100 45%, #a67d00 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(20,20,20,.12), 0 10px 26px rgba(14,122,88,.28);
}
.hh .btn:hover { background: linear-gradient(100deg, #7a5300 0%, #7a5300 45%, #7a5300 100%) !important; }
.hh .eyebrow { position: relative; font-weight: 700; letter-spacing: .2em; padding-bottom: 10px; }
.hh .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #8f6100, #8f6100);
}
.hh .wrap.ctr .eyebrow::after, .hh .pricing-wrap .eyebrow::after { left: 50%; transform: translateX(-50%); }

/* ── LISIBILITÉ EN DIAGONALE ── */
.hh { -webkit-font-smoothing: antialiased; }
.hh h1, .hh h2, .hh h3, .hh h4 { font-weight: 700; letter-spacing: -.015em; }
.hh h1 { font-weight: 700 !important; }
.hh h2 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }
.hh strong, .hh .hi { color: #141414 !important; font-weight: 700; }
.hh .gold { font-style: italic; color: #8f6100 !important; }
.hh .pq { border-left-width: 5px; background: #f6f1e5 !important; }
.hh .offer-price, .hh .pay-amount, .hh .price-box .big, .hh .prog-stat .num { color: #BF9000 !important; }
.hh img { box-shadow: 0 2px 16px rgba(20,20,20,.12); }
.hh hr.line, .hh hr.d { background: linear-gradient(90deg, transparent, rgba(191,144,0,.5), transparent) !important; height: 2px !important; }
.hh .orn { color: #8f6100 !important; opacity: .85 !important; }

/* ══ dernier mot : le caractère ✦ d'origine ne doit plus paraître ══ */
.hh .orn { font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  opacity: 1 !important; padding: 52px 0 !important; }
.hh .orn::after { opacity: .55 !important; }
/* les filets qui encadrent le séparateur s'écartent, sinon ils frôlent l'icône */
.hh hr.line, .hh hr.d { margin: 30px auto !important; }
/* ══ PETITS TEXTES ══
   Les 64 sélecteurs à 0,88 rem partageaient 11 espacements et 5 interlignes.
   Deux registres seulement désormais : les capitales espacées, qui servent
   d'étiquettes, et les mentions courantes, sans espacement. ══ */
.hh .eyebrow, .hh .role-tag, .hh .s-dir, .hh .s-maori, .hh .s-tag, .hh .sarah-tag,
.hh .offer-name, .hh .oto-badge, .hh .pay-label, .hh .prog-stat .lbl,
.hh .testi-name, .hh .tl-item .month, .hh .tl-mao, .hh .lex b, .hh .haka-sub,
.hh .bonus-card h4, .hh .star-badge, .hh .pq cite, .hh .btn {
  letter-spacing: .14em !important;
  line-height: 1.5 !important;
}
.hh .btn-sub, .hh .pay-note, .hh figcaption, .hh cite, .hh .lbl, .hh .oto-note,
.hh .oto-old, .hh .oto-sub, .hh .note-rdv, .hh .hero-names, .hh .cred-pill,
.hh .urgency-bar p, .hh .lex span, .hh .sc-ritual p, .hh p.dim {
  letter-spacing: 0 !important;
  line-height: 1.75 !important;
}
/* l'accroche de section garde son écart large : c'est sa fonction */
.hh .eyebrow { letter-spacing: .28em !important; }

/* ══ OPTION MP3 ══
   Le descriptif des albums relève du bloc encadré, comme la liste du tarif. ══ */
.hh .bump-body p { font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }


/* la garantie relève du bloc encadré : elle lève le dernier doute avant l'achat */
.hh .garantie-txt { font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ══ BIG IDEA SOMBRE ══
   Seule rupture de valeur de la page : après quatorze sections claires,
   le pivot de l'argumentation change de registre. ══ */
.hh .big-idea {
  background: #141414 !important;
  border: 1px solid rgba(191,144,0,.34) !important;
  box-shadow: 0 2px 6px rgba(20,20,20,.14), 0 18px 44px rgba(20,20,20,.16) !important;
  padding: 54px 44px !important;
  margin: 44px 0 !important;
}
.hh .big-idea h2 { color: #faf8f2 !important; }
.hh .big-idea .gold { color: #d9a72a !important; }
@media (max-width: 620px) { .hh .big-idea { padding: 36px 22px !important; } }

/* ══ FORMES ══
   Quatre rayons et huit ombres devenaient flottants : trois valeurs suffisent. ══ */
.hh .testi, .hh .tst, .hh .session, .hh .about-card, .hh .offer, .hh .bump,
.hh .logi-card, .hh .haka-card, .hh .mech, .hh .future-box, .hh .offer-box,
.hh .scarce, .hh .early, .hh .arnaud, .hh .nathalie, .hh .sc-item,
.hh .forqui-card, .hh .prog-intro, .hh .oto-box, .hh img, .hh figure img {
  border-radius: 3px !important;
}
.hh .btn { border-radius: 2px !important; }
/* posé */
.hh .about-card, .hh .forqui-card, .hh .mech, .hh .prog-intro {
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.05) !important;
}
/* surélevé */
.hh .testi, .hh .tst, .hh .session, .hh .arnaud, .hh .nathalie, .hh .sc-item,
.hh .future-box, .hh .bump, .hh img {
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07) !important;
}
/* flottant : ce qui porte la décision */
.hh .offer, .hh .offer-box, .hh .oto-box, .hh .early, .hh .btn {
  box-shadow: 0 2px 5px rgba(20,20,20,.10), 0 16px 38px rgba(20,20,20,.12) !important;
}


/* le héros respire : le titre et la ligne qui le suit se détachent */
.hh .hero h1 { margin-bottom: 34px !important; }
.hh .hero h1 + p, .hh .hero .hero-deck { margin-top: 0 !important; }
@media (max-width: 620px) { .hh .hero h1 { margin-bottom: 26px !important; } }

/* ══ INTERLIGNE DES TITRES ══
   La normalisation avait ramené 1,15 à 1,0, trop serré dès qu'un titre
   passe sur deux ou trois lignes. ══ */
.hh h1 { line-height: 1.3 !important; }
.hh h2 { line-height: 1.3 !important; }
.hh h3, .hh h4 { line-height: 1.3 !important; }

/* ══ OPTIONS DE PAIEMENT ══
   Libellé, montant et note se détachent : ils se touchaient faute de marge,
   et le montant monte d'un barreau — c'est lui qu'on vient lire. ══ */
.hh .pay-label { display: block !important; margin-bottom: 8px !important; }
.hh .pay-amount { display: block !important; font-size: 1.9rem !important;
  line-height: 1.3 !important; color: #8f6100 !important; }
.hh .pay-note { display: block !important; margin-top: 8px !important;
  font-size: 0.88rem !important; line-height: 1.5 !important; }
.hh .pay-opt { padding: 20px 18px !important; }

/* ══ CARTES DE SESSION DE LA POST-WEBINAIRE ══
   Sa carte était décalée d'un cran vers le bas par rapport à la page abonnés :
   chaque élément retrouve le barreau de son équivalent. ══ */
.hh .sc-num { font-size: 1.5rem !important; }
.hh .sc-title { font-size: 1.24rem !important; line-height: 1.3 !important; }
.hh .sc-lead { font-size: 1.06rem !important; }
.hh .sc-desc { font-size: 1.06rem !important; line-height: 1.75 !important; }
.hh .sc-month { font-size: 0.88rem !important; }
.hh .sc-ritual { font-size: 1.06rem !important; }
.hh .sc-ritual strong { font-size: 0.88rem !important; }
/* le prix de l'option s'aligne sur celui de la page abonnés */
.hh .bump-price { font-size: 1.06rem !important; }
.hh .tl-mao { color: #8f6100 !important; }

/* la colonne du chiffre romain était figée à 36 px : le texte des sessions
   s'étranglait d'autant. Elle s'ajuste à son contenu. */
.hh .sc-item { grid-template-columns: auto 1fr !important; gap: 16px !important;
  padding: 20px 22px !important; }
.hh .sc-num { min-width: 30px; text-align: center; }

/* ══ CE QUE VOUS EMPORTEZ ══
   Écrite en style direct sans classe, cette section échappait aux règles
   et restait au barreau des mentions. ══ */
.hh .benefices strong { font-size: 1.24rem !important; line-height: 1.3 !important;
  margin-bottom: 8px !important; }
.hh .benefices span { font-size: 1.06rem !important; line-height: 1.75 !important; }
.hh .benefices > div { padding: 22px 24px !important; }
.hh .benefices { gap: 16px !important; }

/* ══ FILET DE SÉCURITÉ ══
   Les éléments qui portaient leur taille en style direct n'en ont plus :
   ils héritent désormais du système par leur rôle. ══ */
.hh { font-size: 1.06rem; }
.hh strong { font-size: inherit; }
.hh .benefices > div > div > strong { font-size: 1.24rem !important; line-height: 1.3 !important;
  display: block; margin-bottom: 8px !important; }
.hh .benefices > div > div > span { font-size: 1.06rem !important; line-height: 1.75 !important; }
.hh .logi-card strong { font-size: 1.06rem !important; }
.hh .logi-card span { font-size: 1.06rem !important; line-height: 1.75 !important; }
.hh figcaption, .hh .btn-sub, .hh .pay-note, .hh cite, .hh .note-rdv { font-size: 0.88rem !important; }

/* ══ EQUIVALENCES PAGE 2 ══
   La post-webinaire a été construite sur un autre vocabulaire de classes.
   Chacune reçoit ici le gabarit de son équivalent sur la page abonnés,
   afin que les deux pages se ressemblent réellement à l'écran. ══ */

/* cartes de session : .sc-item ≡ .session */
.hh .sc-item {
  background-color: #ffffff !important;
  border: 1px solid rgba(20,20,20,0.14) !important;
  border-left: 1px solid rgba(20,20,20,0.14) !important;
  border-radius: 3px !important;
  padding: 20px 16px !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07) !important;
}
.hh .sessions-compact { display: flex; flex-direction: column; gap: 18px !important; }
.hh .sc-num { color: #8f6100 !important; font-family: 'Fraunces', Georgia, serif !important; }
.hh .sc-title { color: #141414 !important; }
.hh .sc-month { color: #8f6100 !important; }
.hh .sc-ritual { background: #f6f1e5 !important; border-left: 3px solid #BF9000 !important;
  border-radius: 0 3px 3px 0; padding: 16px 18px !important; margin-top: 16px !important; }

/* témoignages : .tst ≡ .testi */
.hh .tst {
  background-color: #ffffff !important;
  border: 1px solid rgba(20,20,20,0.14) !important;
  border-radius: 3px !important;
  padding: 24px 22px !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07) !important;
}
.hh .tst-grid { gap: 18px !important; }

/* cadre pratique : .logi-card ≡ .mech */
.hh .logi-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(191,144,0,0.28) !important;
  border-radius: 3px !important;
  padding: 24px 18px !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.05) !important;
}
.hh .logi { gap: 16px !important; }

/* offre : .offer-box ≡ .offer */
.hh .offer-box {
  background-color: #ffffff !important;
  border: 1px solid rgba(20,20,20,0.18) !important;
  border-radius: 3px !important;
  padding: 32px 24px !important;
  box-shadow: 0 2px 5px rgba(20,20,20,.10), 0 16px 38px rgba(20,20,20,.12) !important;
}

/* bénéfices : même gabarit que les cartes posées */
.hh .benefices > div {
  border: 1px solid rgba(20,20,20,0.14) !important;
  border-left: 3px solid #BF9000 !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.05) !important;
}

/* frise : .tl ≡ .timeline */
.hh .tl { gap: 16px !important; }
.hh .tl-when { color: #8f6100 !important; }

/* ══ LARGEUR DES COLONNES ══
   La page 2 bornait certains paragraphes à 540 px en style direct, soit
   nettement moins que les 34 em de la page abonnés. La règle reprend la main. ══ */
.hh p, .hh .big { max-width: 34em !important; }
.hh .mech p, .hh .pq p, .hh .session p, .hh .testi p, .hh .tst p, .hh .offer p,
.hh .bump p, .hh .bump-body p, .hh .scarce p, .hh .early p, .hh .arnaud p,
.hh .nathalie p, .hh .big-idea p, .hh .logi-card p, .hh .prog-intro p,
.hh .forqui-card p, .hh .objection p, .hh .sc-item p, .hh .offer-box p,
.hh .about-card p, .hh .tl-item p, .hh .scene p, .hh .benefices p,
.hh .urgency-bar p, .hh .note-rdv, .hh figcaption, .hh .btn-sub {
  max-width: none !important;
}

/* ══ HABILLAGE UNIFIE ══
   Le HTML ne porte plus que la structure. Toute l'apparence est décrite ici,
   une seule fois, pour les trois pages. Les blocs sans classe reçoivent leur
   habillage par leur contexte. ══ */

/* toute carte posée dans une section : fond blanc, filet, ombre légère */
.hh .benefices > div, .hh .logi > div, .hh .tst-grid > div,
.hh .sessions-compact > div, .hh .testi-grid > div, .hh .forqui-grid > div,
.hh .about-grid > div {
  background-color: #ffffff;
  border: 1px solid rgba(20,20,20,.14);
  border-radius: 3px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.05);
}
/* les cartes qui portent un accent doré gardent leur filet à gauche */
.hh .benefices > div, .hh .sc-item, .hh .sessions-compact > div {
  border-left: 3px solid #BF9000;
}

/* encadrés ivoire : rituel du mois, citations, blocs de rappel */
.hh .sc-ritual, .hh .pq, .hh .mech, .hh .prog-intro {
  background: #f6f1e5;
  border-left: 4px solid #BF9000;
  border-radius: 0 3px 3px 0;
  padding: 20px 24px;
}

/* bandeaux pleine largeur */
.hh .urgency, .hh .urgency-bar { background-color: #BF9000; }
.hh .urgency *, .hh .urgency-bar * { color: #1a1300; }

/* la big idea conserve sa rupture de valeur */
.hh .big-idea { background: #141414; border: 1px solid rgba(191,144,0,.34); border-radius: 3px; }
.hh .big-idea h2 { color: #faf8f2; }
.hh .big-idea .gold { color: #d9a72a; }

/* couleurs de texte par rôle, puisque le HTML ne les porte plus */
.hh { color: #232323; }
.hh h1, .hh h2, .hh h3, .hh h4, .hh strong, .hh b { color: #141414; }
.hh .gold, .hh .eyebrow, .hh .s-maori, .hh .sc-month, .hh .tl-mao, .hh .tl-when,
.hh .role-tag, .hh .pay-amount, .hh .offer-price, .hh .oto-price, .hh .num,
.hh .s-rom, .hh .sc-num, .hh .bump-price, .hh .lex b { color: #8f6100; }
.hh cite, .hh figcaption, .hh .btn-sub, .hh .pay-note, .hh .oto-old,
.hh .note-rdv, .hh .tst-name, .hh .testi-name, .hh .arnaud-role { color: #5c5c5c; }
.hh .btn { color: #fff; }

/* ══ BONUS ET GARANTIE ══
   Ces deux encadrés portaient tout leur habillage dans le HTML : l'épuration
   les avait laissés nus. Ils le retrouvent ici. ══ */
.hh .early {
  border: 2px solid #BF9000;
  border-radius: 3px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 2px 5px rgba(20,20,20,.10), 0 16px 38px rgba(191,144,0,.16);
}
.hh .early-head { background-color: #BF9000; }
.hh .early-head * { color: #1a1300; }
.hh .early-badge {
  background-color: #BF9000; color: #1a1300;
  border-radius: 2px; font-weight: 600;
}
.hh .early-rappel {
  background: #f6f1e5;
  border-left: 3px solid #BF9000;
  border-radius: 0 3px 3px 0;
}
.hh .early-rappel p { color: #8f6100; font-weight: 600; }

.hh .garantie {
  background: #f6f1e5;
  border: 1px solid rgba(191,144,0,.34);
  border-left: 4px solid #BF9000;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.05);
}
.hh .garantie h4 { color: #8f6100; }

/* ══ APRES VOTRE INSCRIPTION ══
   Ce bloc annonce l'offre qui suit le paiement : il devient un encart à part
   entière, sinon on ne comprend pas qu'on change d'étape. ══ */
.hh .apres {
  background: #f6f1e5;
  border: 1px dashed rgba(191,144,0,.55);
  border-radius: 3px;
  padding: 30px 32px;
  margin: 48px 0 28px;
}
.hh .apres .eyebrow { font-size: 0.88rem !important; margin-bottom: 12px; }
.hh .apres h3 { font-size: 1.5rem !important; line-height: 1.3 !important;
  margin-bottom: 12px !important; }
.hh .apres p { font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin: 0 !important; color: #232323; }
@media (max-width: 620px) { .hh .apres { padding: 24px 20px; } }

/* ══ BLOCS SANS CLASSE ══
   Dix-huit <div> portaient leur habillage en style direct sans jamais avoir
   de classe : l'épuration les laissait nus. Ils le retrouvent par leur
   contexte, sans qu'il faille les marquer un par un. ══ */

/* toute boîte directement sous .wrap qui contient un titre ou une citation */
.hh .wrap > div:not([class]),
.hh .wrap > div > div:not([class]) {
  border-radius: 3px;
}
/* le bloc d'Arnaud Riou : photo pleine largeur puis citation */
.hh .arnaud, .hh .nathalie {
  background-color: #ffffff;
  border: 1px solid rgba(20,20,20,.14);
  border-radius: 3px;
  padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07);
}
/* bandeau de rareté */
.hh .scarce {
  background: #f6f1e5;
  border: 1px solid rgba(192,71,42,.45);
  border-radius: 3px;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.hh .scarce p { color: #232323; font-weight: 600; }

/* ══ TROIS FAMILLES DE CARTES ══
   Les blocs qui portaient leur habillage en style direct sont désormais
   marqués à la source et relèvent de trois familles. ══ */
.hh .carte {
  background-color: #ffffff;
  border: 1px solid rgba(20,20,20,.14);
  border-radius: 3px;
  padding: 26px 24px;
  margin: 26px 0;
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07);
}
.hh .carte-accent {
  background: #f6f1e5;
  border-left: 4px solid #BF9000;
  border-radius: 0 3px 3px 0;
  padding: 22px 26px;
  margin: 24px 0;
}
.hh .carte-plate {
  background: #f6f1e5;
  border-radius: 3px;
  padding: 24px 26px;
  margin: 24px 0;
}
.hh .carte p, .hh .carte-accent p, .hh .carte-plate p {
  max-width: none; margin-left: 0; margin-right: 0;
}

/* ══ BLOC ARNAUD RIOU ══
   L'introduction, les deux citations et l'attribution partagent le corps
   des blocs encadrés. ══ */
.hh .arnaud p, .hh .arnaud span, .hh .arnaud strong {
  font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
.hh .arnaud strong { font-size: 1.24rem !important; line-height: 1.3 !important; }
.hh .arnaud-role, .hh .arnaud span:not([class]) { font-size: 0.88rem !important; color: #5c5c5c; }

/* ══ CLOTURE — dernier mot ══
   La règle générale des paragraphes était déclarée après celle de la clôture
   et l'écrasait : elle est reprise ici, en fin de feuille. ══ */
.hh .final-inner p {
  font-size: 1.06rem !important; line-height: 1.9 !important;
  max-width: 34em !important; margin-left: auto !important; margin-right: auto !important;
}

/* ══ LARGEUR DES CITATIONS ══
   Une citation occupant toute la largeur du bloc se lit mal : elle se
   resserre en colonne, plus étroite que le texte courant. ══ */
.hh .pq { padding: 28px 34px !important;
  max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.hh .pq p {
  max-width: 30em !important;
  margin-left: auto !important; margin-right: auto !important;
}
.hh .pq cite { display: block; max-width: 30em; margin-left: auto; margin-right: auto; }
@media (max-width: 620px) {
  .hh .pq { padding: 22px 20px !important; max-width: none; }
  .hh .pq p, .hh .pq cite { max-width: none !important; }
}

/* ══ LARGEUR DE LA BIG IDEA ══
   L'encadré occupait toute la largeur de la section : il se resserre pour
   concentrer le regard sur la phrase. ══ */
.hh .big-idea {
  max-width: 720px;
  margin-left: auto !important; margin-right: auto !important;
  padding: 52px 46px !important;
}
.hh .big-idea h2 { max-width: 24em; margin-left: auto; margin-right: auto; }
@media (max-width: 620px) {
  .hh .big-idea { max-width: none; padding: 34px 22px !important; }
}

/* ══ NOTE DES RENDEZ-VOUS ══
   Elle porte l'horaire et la garantie de rattrapage : elle relève du bloc
   encadré, pas de la mention. ══ */
.hh .note-rdv { font-size: 1.06rem !important; line-height: 1.75 !important;
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* la section « Une porte qui n'existait pas » : corps des blocs encadrés */
.hh .porte p { font-size: 1.24rem !important; line-height: 1.75 !important; }

/* ══ ESPACEMENT DES TARIFS ══
   Les blocs de cette section se succédaient sans respiration : chacun porte
   une décision distincte et mérite d'être isolé du suivant. ══ */
.hh .pricing-wrap > * { margin-top: 0; }
.hh .carte, .hh .offer, .hh .scarce, .hh .bump, .hh .early,
.hh .garantie, .hh .oto-box, .hh .apres {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.hh .pay { margin-top: 26px !important; gap: 18px !important; }
.hh .btn-sub { display: block; margin-top: 14px; }
.hh .pricing-wrap .btn { margin-top: 30px; }
@media (max-width: 620px) {
  .hh .carte, .hh .offer, .hh .scarce, .hh .bump, .hh .early,
  .hh .garantie, .hh .oto-box, .hh .apres {
    margin-top: 26px !important; margin-bottom: 26px !important;
  }
}

/* ══ MONTANTS AGRANDIS ══
   Les deux options de paiement portent le choix d'achat : leurs montants
   montent au barreau supérieur. ══ */
.hh .pay-amount { font-size: 2.4rem !important; line-height: 1.3 !important; }
.hh .pay-opt { padding: 24px 20px !important; }
.hh .pay-label { margin-bottom: 10px !important; }
.hh .pay-note { margin-top: 10px !important; }
@media (max-width: 620px) { .hh .pay-amount { font-size: 1.9rem !important; } }

/* ══ SANS FILET GAUCHE ══
   Les barres dorées qui bordaient les encadrés à gauche sont retirées :
   le fond et l'ombre suffisent à délimiter chaque bloc. ══ */
.hh .pq, .hh .mech, .hh .prog-intro, .hh .sc-ritual, .hh .sc-item,
.hh .garantie, .hh .carte-accent, .hh .early-rappel, .hh .checks li,
.hh .forqui-card.oui, .hh .forqui-card.non, .hh .sessions-compact > div,
.hh .benefices > div, .hh .session {
  border-left: none !important;
  border-radius: 3px !important;
}
/* les blocs ivoire gardent un filet complet, discret */
.hh .pq, .hh .mech, .hh .prog-intro, .hh .sc-ritual,
.hh .garantie, .hh .carte-accent, .hh .early-rappel {
  border: 1px solid rgba(191,144,0,.24) !important;
}
.hh .benefices > div, .hh .sessions-compact > div, .hh .session,
.hh .forqui-card.oui, .hh .forqui-card.non {
  border: 1px solid rgba(20,20,20,.14) !important;
}
.hh .checks li { border: none !important; }

/* la carte d'Arnaud Riou reprend l'habillage des cartes blanches */
.hh .arnaud, .hh .nathalie {
  background-color: #ffffff !important;
  border: 1px solid rgba(20,20,20,.14) !important;
  border-radius: 3px !important;
  padding: 26px 24px !important;
  margin: 32px 0 !important;
  box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 10px 26px rgba(20,20,20,.07) !important;
}
/* ══════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE  (ajout, version 15/08/26)
   ══════════════════════════════════════════════════ */
.lang-switch {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 999;
}
.lang-switch a {
  display: inline-block;
  padding: 7px 16px;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #BF9000 !important;
  background: rgba(250, 248, 242, .94);
  border: 1px solid #BF9000;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  transition: background .18s ease, color .18s ease;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  background: #BF9000;
  color: #faf8f2 !important;
}
@media (max-width: 640px) {
  .lang-switch { top: 10px; right: 10px; }
  .lang-switch a { padding: 6px 12px; font-size: .74rem; }
}

/* Grille du bloc early bird, version bureau */
.hh .eb-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  align-items: stretch;
}
.hh .eb-photo { overflow: hidden; }
@media (max-width: 640px) {
  .hh .eb-photo img { height: 260px !important; }
}

/* Réserver la place du sélecteur de langue dans le bandeau d'urgence */
.hh .urgency-bar { padding-right: 132px; padding-left: 132px; }
@media (max-width: 640px) {
  .hh .urgency-bar { padding-right: 96px; padding-left: 16px; text-align: left; }
}
@media (max-width: 640px) {
  .hh .urgency-bar { padding-top: 10px; padding-bottom: 10px; }
  .hh .urgency-bar p { font-size: .76rem; line-height: 1.5; letter-spacing: .01em; }
}

/* ══════════════════════════════════════════════════
   TÉMOIGNAGES SUR UNE SEULE COLONNE
   ══════════════════════════════════════════════════ */
.hh .testi-grid { grid-template-columns: 1fr !important; }

/* ══════════════════════════════════════════════════
   BANDEAU REFERMABLE
   ══════════════════════════════════════════════════ */
.hh .urgency-bar { position: relative; }
.hh .urgency-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  line-height: 1;
  font-size: 1.35rem;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
}
.hh .urgency-close:hover,
.hh .urgency-close:focus-visible { background: rgba(255, 255, 255, .34); }

/* laisser la place au bouton de fermeture ET au sélecteur de langue */
.hh .urgency-bar { padding-right: 176px; }
@media (max-width: 640px) {
  .hh .urgency-bar { padding-right: 136px; }
  .hh .urgency-close { width: 26px; height: 26px; font-size: 1.15rem; right: 8px; }
}

/* le sélecteur de langue occupe le coin, on décale la croix à sa gauche */
.hh .urgency-close { right: 138px; }
.hh .urgency-bar { padding-right: 182px; }
@media (max-width: 640px) {
  .hh .urgency-close { right: 104px; }
  .hh .urgency-bar { padding-right: 140px; }
}

/* Mobile : boutons dans une bande haute, texte sur toute la largeur dessous.
   Réserver la colonne de droite allongeait le bandeau au lieu de l'alléger. */
@media (max-width: 640px) {
  .hh .urgency-bar { padding: 46px 16px 12px !important; }
  .hh .urgency-close {
    top: 12px; right: 100px; transform: none;
    width: 26px; height: 26px; font-size: 1.1rem;
  }
  .hh .urgency-bar p { font-size: .74rem; line-height: 1.45; }
}

/* ══════════════════════════════════════════════════
   REDIFFUSION, vignette cliquable
   Le lecteur YouTube n'est chargé qu'au clic : la page
   reste légère et rien n'est déposé avant la lecture.
   ══════════════════════════════════════════════════ */
.hh .video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, .14);
  border-radius: 3px;
  background: #141414;
  cursor: pointer;
}
.hh .video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}
.hh .video-facade:hover img { opacity: .82; }
.hh .video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  color: #faf8f2;
  background: rgba(191, 144, 0, .92);
  border-radius: 50%;
  padding-left: 6px;
  transition: transform .18s ease;
}
.hh .video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.07); }
.hh .video-facade:focus-visible { outline: 2px solid #BF9000; outline-offset: 3px; }
.hh .video-facade.is-loaded { cursor: default; }
.hh .video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }