/*
 * Onglizy — ZONE FORMATIONS — annuaire, fiche et tarifs des formations, éditeur de fiche formation
 * Vues : training/*
 * Préfixe obligatoire des classes de ce fichier : .trn-
 * Ne redéfinissez pas les composants du socle (public/app.css, public/mobile.css) : voir CLASSES.md.
 * Inclusion automatique par les layouts app et pro, version ?v= calculée automatiquement (@asset).
 *
 * SOMMAIRE
 *  1. Annuaire : hero, recherche, filtres, résultats, carte d'organisme, pages locales, bandeau
 *  2. Fiche formation : aperçu privé, en-tête, formations, pédagogie, galerie, infos, aside contact
 *  3. Référencer mes formations (tarifs)
 *  4. Éditeur de fiche formation (espace pro)
 *  5. Téléphone, mouvement réduit
 */

/* 1. ANNUAIRE ------------------------------------------------------------ */
.trn-hero { padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px); }
.trn-hero-inner { display: flex; flex-direction: column; gap: 20px; }
.trn-hero-heading { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.trn-hero-heading .lead { font-size: 17px; max-width: 620px; }

.trn-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-search);
}
.trn-search-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
}
.trn-search-field:focus-within { box-shadow: 0 0 0 2px var(--plum-700); }
.trn-search-city { flex: 2 1 300px; }
.trn-search-topic { flex: 2 1 240px; border-left: 1px solid var(--line); border-radius: 0 16px 16px 0; }
.trn-search-label { font-size: 13px; font-weight: 600; color: var(--plum-900); }
.trn-search-control { display: flex; align-items: center; gap: 8px; }
.trn-search-control .icon { flex-shrink: 0; }
.trn-search-field input,
.trn-search-field select {
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
}
.trn-search-field select { padding-right: 32px; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
.trn-search-field input:focus,
.trn-search-field select:focus { box-shadow: none; }
.trn-search-city .suggestions { top: calc(100% + 8px); }
.trn-search-submit { flex: 1 0 auto; min-height: 60px; border-radius: 18px; }

.trn-hero-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.trn-hero-note .icon { flex-shrink: 0; margin-top: 2px; color: var(--plum-700); }
.trn-hero-note strong { color: var(--plum-900); font-weight: 600; }

.trn-results { padding-bottom: var(--section-y); }
.trn-filters { gap: 14px; padding: 20px 24px; }
.trn-filters-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--plum-900); }
.trn-filters-title .icon { color: var(--plum-700); }
.trn-results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.trn-results-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 420px; }
.trn-results-title { font-size: 32px; line-height: 1.15; }
.trn-empty-actions { justify-content: center; margin-top: 4px; }

.trn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 20px;
}
.trn-card-grid > li { display: flex; min-width: 0; }
.trn-card-grid .listing-card { flex: 1; }
.trn-card .trn-card-media { aspect-ratio: 16 / 9; }
.trn-card .listing-card-badges { right: 12px; }
.trn-badge-type { background: var(--white); color: var(--plum-700); }
.trn-card-courses {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.trn-card-course {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0 -10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.trn-card-course.is-highlighted { background: var(--blush-50); }
.trn-card-course-name { min-width: 0; font-weight: 600; color: var(--plum-900); }
.trn-card-course.is-highlighted .trn-card-course-name { color: var(--plum-700); }
.trn-card-course-detail { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trn-card-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--plum-700); }

.trn-transparency { display: flex; align-items: flex-start; gap: 8px; max-width: 860px; font-size: 13px; color: var(--muted); }
.trn-transparency .icon { flex-shrink: 0; margin-top: 2px; }
.trn-map { padding-bottom: var(--section-y); }

.trn-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}
.trn-link-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--plum-900);
  font-size: 15px;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}
.trn-link-tile:hover { background: var(--blush-100); color: var(--plum-900); }
.trn-link-tile-meta { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.trn-link-tile-meta .icon { color: var(--plum-700); }
.trn-chip-count { font-weight: 400; color: var(--muted); }
.chip[aria-current] .trn-chip-count { color: inherit; }

.trn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 56px); }
.trn-cta-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.trn-cta-text { max-width: 540px; font-size: 16px; color: var(--on-dark-muted); }
.trn-cta-offer {
  flex: 0 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .07);
}
.trn-cta-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; color: var(--on-dark-muted); }
.trn-cta-amount { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--white); }

/* 2. FICHE FORMATION ----------------------------------------------------- */
.trn-preview { background: var(--dark-plum); }
.trn-preview-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 16px; }
.trn-preview-body { flex: 1 1 520px; min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
.trn-preview-body strong { color: var(--white); font-weight: 600; }
.trn-preview-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(241, 204, 210, .16);
  color: var(--on-dark-accent);
}
.trn-preview-list { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: var(--on-dark-muted); }
.trn-preview-list li { display: inline-flex; align-items: center; gap: 6px; }

.trn-profile-crumbs { padding-top: 12px; padding-bottom: 8px; }
.trn-profile-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
  padding-top: 16px;
  padding-bottom: var(--section-y);
}
.trn-profile-main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.trn-profile-head { display: flex; flex-direction: column; gap: 20px; }
.trn-profile-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.trn-profile-identity > .stack-sm { flex: 1 1 320px; min-width: 0; }
.trn-profile-avatar { width: 96px; height: 96px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; object-fit: cover; }
.trn-profile-lead { max-width: 680px; font-size: 18px; line-height: 1.6; text-wrap: pretty; }

.trn-tip { position: relative; display: inline-flex; }
.trn-tip-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: help;
}
.trn-tip-trigger .badge { font-size: 13px; padding: 5px 12px; }
.trn-tip-bubble {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--dark-plum);
  color: var(--on-dark);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.trn-tip:hover .trn-tip-bubble,
.trn-tip:focus-within .trn-tip-bubble { opacity: 1; visibility: visible; transform: none; }
.trn-profile-head .tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 14px; }

.trn-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 0;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.trn-fact { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trn-fact dt,
.trn-course-facts dt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.trn-fact dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--plum-900); }

.trn-anchors {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  margin-top: -8px;
  padding: 2px 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.trn-anchors-list { display: flex; gap: 4px; margin: 0 -6px; padding: 6px; overflow-x: auto; }
.trn-anchors li { flex-shrink: 0; }
.trn-anchors a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--plum-900);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.trn-anchors a:hover { background: var(--blush-100); color: var(--plum-700); }
.trn-anchors a:focus-visible { outline-offset: -3px; }

.trn-profile-section { scroll-margin-top: calc(var(--header-h) + 76px); display: flex; flex-direction: column; gap: 20px; }
.trn-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.trn-courses { display: flex; flex-direction: column; gap: 16px; }
.trn-course { display: flex; flex-direction: column; gap: 16px; }
.trn-course-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.trn-course-head h3 { flex: 1 1 260px; min-width: 0; }
.trn-course-price { font-size: 15px; color: var(--muted); white-space: nowrap; }
.trn-course-price strong { font-size: 20px; font-weight: 600; color: var(--plum-900); font-variant-numeric: tabular-nums; }
.trn-course-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.trn-course-facts > div { display: flex; flex-direction: column; gap: 2px; }
.trn-course-facts dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--plum-900); }
.trn-program { border-top: 1px solid var(--line); }
.trn-program-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin: 0 -12px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--plum-700);
}
.trn-program-toggle:hover { background: var(--blush-100); }
.trn-program-steps { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; font-size: 15px; line-height: 1.5; }
.trn-program-steps li { display: flex; align-items: flex-start; gap: 12px; }
.trn-step-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--blush-100);
  color: var(--plum-700);
  font-size: 13px;
  font-weight: 600;
}
.trn-program-text { padding: 4px 0 8px; font-size: 15px; white-space: pre-line; }
.trn-course-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.trn-course-foot p { display: flex; align-items: center; gap: 8px; }
.trn-course-foot .link-action { font-size: 14px; }

.trn-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.trn-note .icon { flex-shrink: 0; margin-top: 1px; }

.trn-pedagogy { font-size: 16px; line-height: 1.7; }
.trn-more > summary { cursor: pointer; }
.trn-more[open] > summary { margin-bottom: 8px; }
.trn-more .trn-more-open,
.trn-more[open] .trn-more-closed { display: none; }
.trn-more[open] .trn-more-open { display: inline; }
.trn-info-cards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.trn-info-card { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.trn-info-title { display: flex; align-items: center; gap: 12px; }
.trn-info-icon,
.trn-contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--blush-100);
  color: var(--plum-700);
}
.trn-check-items, .trn-dot-items { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; }
.trn-check-items li { display: flex; align-items: flex-start; gap: 10px; }
.trn-check-items .icon { flex-shrink: 0; margin-top: 2px; color: var(--sage-700); }
.trn-dot-items li { position: relative; padding-left: 16px; }
.trn-dot-items li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--mauve-600);
}
.trn-declared { margin-top: auto; background: var(--blush-50); }

.trn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; }
.trn-gallery-link { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: var(--blush-100); }
.trn-gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s ease; }
.trn-gallery-link:hover img { filter: brightness(.95); }

.trn-infos-subtitle { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.trn-address { font-style: normal; font-size: 16px; line-height: 1.6; }
.trn-self-start { align-self: flex-start; }
.trn-infos-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.trn-infos-list li { display: flex; align-items: flex-start; gap: 10px; }
.trn-infos-list .icon { flex-shrink: 0; margin-top: 2px; }
.trn-strong-text { color: var(--plum-900); }

.trn-contact {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trn-contact-card { display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-card); }
.trn-contact-title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.trn-phone { justify-content: center; }
.trn-contact-list { border-top: 1px solid var(--line); }
.trn-contact-list li { border-bottom: 1px solid var(--line); }
.trn-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--plum-900);
  text-decoration: none;
}
.trn-contact-link:hover { background: var(--blush-100); color: var(--plum-900); }
.trn-contact-link .trn-contact-icon,
.trn-contact-place .trn-contact-icon { width: 36px; height: 36px; }
.trn-contact-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-style: normal; overflow-wrap: anywhere; }
.trn-contact-place { display: flex; align-items: flex-start; gap: 12px; }
.trn-contact-note { padding-top: 14px; border-top: 1px solid var(--line); }
.trn-paid-note { padding: 0 8px; }

/* 3. RÉFÉRENCER MES FORMATIONS ------------------------------------------- */
.trn-pricing-hero { padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 56px); }
.trn-pricing-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.trn-pricing-hero-inner h1 { max-width: 900px; }
.trn-pricing-hero-inner .lead { max-width: 640px; }
.trn-center { justify-content: center; margin-top: 4px; }
.trn-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.trn-trust li { display: flex; align-items: center; gap: 6px; }
.trn-trust .icon { color: var(--sage-700); }

.trn-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-lg);
}
.trn-offer-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.trn-offer-copy > .muted { max-width: 540px; }
.trn-eyebrow-icon { display: inline-flex; align-items: center; gap: 8px; }
.trn-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.trn-steps li { display: flex; align-items: flex-start; gap: 14px; }
.trn-step-index {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--blush-100);
  color: var(--plum-700);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}
.trn-step-text { display: flex; flex-direction: column; gap: 2px; }
.trn-plan {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--blush-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.trn-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; }
.trn-plan-amount { font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--plum-900); font-variant-numeric: tabular-nums; }
.trn-plan-features { padding-top: 20px; border-top: 1px solid var(--line); }

.trn-price-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.trn-price-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.trn-price-figure { font-family: var(--font-display); font-size: 40px; line-height: 1.05; color: var(--plum-900); font-variant-numeric: tabular-nums; }

/* 4. ÉDITEUR DE FICHE FORMATION ------------------------------------------ */
.trn-ed-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.trn-ed-title .page-title { margin-right: 4px; }
.trn-editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.trn-editor-main { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.trn-editor-form { display: flex; flex-direction: column; gap: 24px; }
.trn-editor-aside { flex: 1 1 300px; min-width: 0; }
.trn-ed-section { gap: 20px; scroll-margin-top: 84px; }
.trn-ed-head { display: flex; flex-direction: column; gap: 4px; }
.trn-ed-section .panel-text { font-size: 14px; line-height: 1.5; }

.trn-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.trn-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.trn-choice:hover { border-color: var(--mauve-500); }
.trn-choice:has(input:checked) { border-color: var(--plum-700); background: var(--blush-50); box-shadow: inset 0 0 0 1px var(--plum-700); }
.trn-choice-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.trn-hint-icon { display: flex; align-items: flex-start; gap: 6px; }
.trn-hint-icon .icon { flex-shrink: 0; margin-top: 1px; }

.trn-topics { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.trn-topic { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.trn-topic:has(.trn-topic-check input:checked) { border-color: var(--line-strong); background: var(--blush-50); }
.trn-topic-check { min-height: 52px; padding: 8px 16px; }
.trn-topic-fields { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-top: 1px solid var(--line); background: var(--white); }
@supports selector(:has(*)) {
  .trn-topic:not(:has(.trn-topic-check input:checked)) .trn-topic-fields { display: none; }
}
.trn-unit { font-size: 15px; font-weight: 600; }

.trn-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 16px 14px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}

.trn-publication { gap: 20px; box-shadow: var(--shadow-card); scroll-margin-top: 84px; }
.trn-pub-steps { display: flex; flex-direction: column; gap: 16px; }
.trn-pub-steps > li { display: flex; align-items: flex-start; gap: 12px; }
.trn-pub-marker {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--plum-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.trn-pub-steps > li.is-done .trn-pub-marker { border-color: var(--sage-100); background: var(--sage-100); color: var(--sage-700); }
.trn-pub-steps > li.is-current .trn-pub-marker { border-color: var(--amber-50); background: var(--amber-50); color: var(--amber-700); }
.trn-pub-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trn-pub-text .link-action { align-self: flex-start; font-size: 14px; }
.trn-gate { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--amber-50); color: var(--amber-700); font-size: 14px; line-height: 1.5; }
.trn-gate .icon { flex-shrink: 0; margin-top: 2px; }
.trn-visibility { gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.trn-visibility .button { margin-top: 8px; }
.trn-reassurance { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); }
.trn-reassurance li { display: flex; align-items: flex-start; gap: 8px; }
.trn-reassurance .icon { flex-shrink: 0; margin-top: 1px; }

/* 5. TÉLÉPHONE, MOUVEMENT RÉDUIT ----------------------------------------- */
/* Colonnes collantes seulement quand elles tiennent dans la hauteur de l'écran. */
@media (min-width: 861px) and (min-height: 640px) {
  .trn-contact { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 861px) and (min-height: 980px) {
  .trn-editor-aside { position: sticky; top: 24px; }
}
@media (max-width: 860px) {
  .trn-search { border-radius: 20px; }
  .trn-search-field { flex-basis: 100%; }
  .trn-search-topic { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
  .trn-search-submit { flex-basis: 100%; min-height: 52px; }
  .trn-results-title { font-size: 28px; }
  .trn-profile-layout { gap: 32px; }
  .trn-anchors { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .trn-savebar { position: static; box-shadow: none; }
  .trn-cta-offer { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .trn-tip-bubble, .trn-gallery-link img, .trn-link-tile, .trn-choice { transition: none; }
}