/* ─────────────────────────────────────────────────────────────────────────────
   LE KIT MATÉRIEL PROFESSIONNEL DE L'ÉLITE (ordre du 15/10/2026)
   Bloc engendré par scripts/kit-materiel.mjs. Dépli natif <details> : clavier,
   lecteur d'écran (état « réduit / développé ») et aucun script.
   Grille premium mobile : pas de 4 px, cibles 48 px, une seule verticale.
   ───────────────────────────────────────────────────────────────────────────── */
.hb-kit {
  --hb-kit-or: var(--hb-gold, #CDAF76);
  --hb-kit-or-clair: #E0C896;
  margin: 0 0 24px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(205, 175, 118, 0.45);
  background: rgba(205, 175, 118, 0.08);
  text-align: start;
  color: #FFFFFF;
}
.hb-kit-tete { display: flex; align-items: center; gap: 12px; }
.hb-kit-pastille {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hb-kit-or);
  background: rgba(205, 175, 118, 0.16);
}
.hb-kit-intitule { min-width: 0; }
.hb-kit p { margin: 0; }
.hb-kit-surtitre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hb-kit-or);
  margin-bottom: 4px !important;
}
.hb-kit-titre { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: #FFFFFF; }
.hb-kit-valeur { margin-top: 4px !important; font-size: 0.8125rem; line-height: 1.4; color: var(--hb-kit-or-clair); }

.hb-kit-details { margin-top: 12px; }
.hb-kit-bouton {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(205, 175, 118, 0.5);
  color: var(--hb-kit-or-clair);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.hb-kit-bouton::-webkit-details-marker { display: none; }
.hb-kit-bouton::marker { content: ''; }
.hb-kit-bouton:hover { background: rgba(205, 175, 118, 0.12); border-color: var(--hb-kit-or); }
.hb-kit-bouton:active { background: rgba(205, 175, 118, 0.2); }
.hb-kit-bouton:focus-visible { outline: 2px solid var(--hb-kit-or); outline-offset: 2px; }
.hb-kit-chevron { flex: 0 0 20px; transition: transform 220ms ease; }
.hb-kit-details[open] .hb-kit-chevron { transform: rotate(180deg); }
.hb-kit-details[open] .hb-kit-ouvrir,
.hb-kit-details:not([open]) .hb-kit-fermer { display: none; }

.hb-kit-contenu { display: grid; gap: 16px; padding-top: 16px; }
.hb-kit-famille-titre {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--hb-kit-or);
  margin-bottom: 8px !important;
}
.hb-kit .hb-kit-liste { list-style: none; margin: 0; padding: 0; }
.hb-kit .hb-kit-liste li {
  position: relative;
  margin: 0;
  padding: 4px 0;
  padding-inline-start: 16px;
  border: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.hb-kit .hb-kit-liste li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hb-kit-or);
}
.hb-kit-art-titre { display: block; font-weight: 600; color: #FFFFFF; }
.hb-kit-art-detail { display: block; }
.hb-kit-note { font-size: 0.75rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.hb-kit-note a { color: var(--hb-kit-or-clair); text-decoration: underline; text-underline-offset: 2px; }
.hb-kit-note a:focus-visible { outline: 2px solid var(--hb-kit-or); outline-offset: 2px; border-radius: 2px; }

/* L'encart de /formations : sous les trois cartes, plus large, deux colonnes sur grand écran. */
/* La section des prix de /formations est sur fond crème : l'encart porte son propre
   navy de marque (#2A2A41), si bien que le texte clair reste lisible partout. */
.hb-kit--encart {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 20px;
  background: #2A2A41;
  border-color: rgba(205, 175, 118, 0.6);
  box-shadow: 0 16px 40px rgba(42, 42, 65, 0.18);
}
@media (min-width: 768px) {
  .hb-kit--encart .hb-kit-contenu { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .hb-kit--encart .hb-kit-note { grid-column: 1 / -1; }
}

/* Carte ouverte : les cartes voisines ne s'étirent pas sur toute la hauteur dépliée. */
.hb-pricing-grid:has(.hb-kit-details[open]) { align-items: start; }

@media (prefers-reduced-motion: reduce) {
  .hb-kit-bouton, .hb-kit-chevron { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LISTES D'AVANTAGES DES CARTES DE PRIX : UNE SEULE LIGNE DE TEXTE QUI COULE
   (15/10/2026). Le `display: flex` de la page faisait du début en gras et de la
   suite deux colonnes (« Maîtrise Totale / : »). Le <li> redevient un bloc ;
   la coche est posée dans la gouttière, côté début de ligne (gauche, ou droite
   en arabe), si bien que le texte coule d'un seul tenant, mots longs compris.
   ───────────────────────────────────────────────────────────────────────────── */
ul.hb-pricing-features li {
  display: block;
  position: relative;
  padding-inline-start: 28px;
  overflow-wrap: anywhere;
  hyphens: auto;
}
ul.hb-pricing-features li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLOTTANTS : JAMAIS SUR LE CONTENU (15/10/2026), voir js/hb-flottants.js
   ───────────────────────────────────────────────────────────────────────────── */
.capsule-wrap { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
.capsule-wrap.hb-flot-retiree { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.capsule-wrap.hb-flot-retiree * { pointer-events: none !important; }

/* Marge de sécurité en bas de page : la pastille (48 px + 16 px + zone sûre)
   ne recouvre jamais le dernier élément ni le pied de page. */
@media (max-width: 767px) { body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* Sur ces pages, au téléphone, la pastille est un rond de 44 px posé dans la
   marge (6 px du bord), et les listes réservent la même marge côté fin de
   ligne : aucune ligne de texte ne passe dessous. Le texte « Rappelez-moi »
   reste porté par son aria-label. */
@media (max-width: 767px) {
html.hb-flot .hb-parler-pastille {
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;
  gap: 0;
  inset-inline-end: 6px;
  overflow: hidden;
}
html.hb-flot .hb-parler-pastille::before {
  content: '';
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
}
@media (max-width: 767px) {
  .hb-kit { margin-inline-end: 0; }
  .hb-kit .hb-kit-liste { padding-inline-end: 8px; }
  ul.hb-pricing-features li { padding-inline-end: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .capsule-wrap { transition: none; }
}