/* ==========================================================================
   ATELIBOX — PAGES PUBLIQUES (accueil, fonctionnalités, tarifs, blog, contact, support, légales)
   Classes ab-pub-*, jetons de theme.css, mobile-first. À charger après components.css et layout.css.
   ========================================================================== */

.ab-pub {
  --ab-pub-max: 1120px;
  --ab-pub-gutter: 20px;
}
.ab-pub-wrap {
  max-width: var(--ab-pub-max, 1120px);
  margin: 0 auto;
  padding: 0 var(--ab-pub-gutter, 20px);
}
.ab-pub-wrap--narrow { max-width: 760px; }
.ab-pub-wrap--form { max-width: 640px; }

.ab-pub-section { padding: var(--space-12) 0; }
.ab-pub-section--alt {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.ab-pub-section__head { max-width: 640px; margin: 0 auto var(--space-8); text-align: center; }
.ab-pub-section__title { margin: 0 0 var(--space-3); font-size: var(--font-size-h2); }
.ab-pub-section__lead { margin: 0; color: var(--text-muted); font-size: var(--font-size-body-lg); }

.ab-pub-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-pub-center { text-align: center; }
.ab-pub-more { margin: var(--space-8) 0 0; text-align: center; }
.ab-pub-section__lead--gap { margin-bottom: var(--space-6); }

/* ---------- Hero ---------- */
.ab-pub-hero { padding: var(--space-12) 0 var(--space-8); }
.ab-pub-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.ab-pub-hero__title {
  margin: 0 0 var(--space-4);
  font-size: 1.875rem;
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
}
.ab-pub-hero__lead { margin: 0 0 var(--space-6); color: var(--text-body); font-size: var(--font-size-body-lg); }
.ab-pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ab-pub-hero__note { margin: var(--space-4) 0 0; color: var(--text-muted); font-size: var(--font-size-body-sm); }
.ab-pub-hero__art { justify-self: center; width: 100%; max-width: 480px; }
.ab-pub-hero__art .ab-illus { width: 100%; height: auto; }

/* ---------- Métiers ---------- */
.ab-pub-trades { padding: var(--space-6) 0 var(--space-8); text-align: center; }
.ab-pub-trades__title { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); }
.ab-pub-trades__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ab-pub-trades__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
}
.ab-pub-trades__item .ab-icon { color: var(--ab-nav-active-fg); }

/* ---------- Grilles de cartes ---------- */
.ab-pub-grid { display: grid; gap: var(--space-4); }
.ab-pub-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.ab-pub-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--ab-nav-active-fg);
}
[data-theme='dark'] .ab-pub-feature__icon { background: rgba(223, 128, 83, 0.14); }
.ab-pub-feature__icon .ab-icon { width: 24px; height: 24px; }
.ab-pub-feature__title { margin: 0; font-size: var(--font-size-h4); }
.ab-pub-feature__text { margin: 0; color: var(--text-body); }

/* ---------- Bloc bêta ---------- */
.ab-pub-beta {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}
.ab-pub-beta__title { margin: 0 0 var(--space-3); font-size: var(--font-size-h3); }
.ab-pub-beta__list { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.ab-pub-beta__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.ab-pub-beta__list .ab-icon { flex: none; margin-top: 2px; color: var(--color-success-dark); }
[data-theme='dark'] .ab-pub-beta__list .ab-icon { color: var(--color-success-base); }
.ab-pub-beta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Fonctionnalités (page) ---------- */
.ab-pub-pagehead { padding: var(--space-12) 0 var(--space-6); text-align: center; }
.ab-pub-pagehead__title { margin: 0 0 var(--space-3); font-size: 1.875rem; letter-spacing: -0.025em; }
.ab-pub-pagehead__lead { max-width: 680px; margin: 0 auto; color: var(--text-body); font-size: var(--font-size-body-lg); }

.ab-pub-cta {
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.ab-pub-cta__title { margin: 0 0 var(--space-3); font-size: var(--font-size-h3); }
.ab-pub-cta__text { max-width: 560px; margin: 0 auto var(--space-6); color: var(--text-body); }

/* ---------- Tarifs ---------- */
.ab-pub-plan { padding: var(--space-6); gap: var(--space-3); }
.ab-pub-plan--featured { border-color: var(--ab-nav-active-fg); box-shadow: var(--shadow-md); }
.ab-pub-plan__name { margin: 0; font-size: var(--font-size-h4); }
.ab-pub-plan__price {
  margin: 0;
  font-family: var(--font-numbers);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-heading);
}
.ab-pub-plan__price small { margin-left: 4px; color: var(--text-muted); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); }
.ab-pub-plan__tag {
  align-self: flex-start;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-100);
  color: var(--color-brand-800);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}
[data-theme='dark'] .ab-pub-plan__tag { background: rgba(223, 128, 83, 0.18); color: #F2B898; }
.ab-pub-plan__text { margin: 0 0 var(--space-3); color: var(--text-body); flex: 1; }

.ab-pub-compare th,
.ab-pub-compare td { text-align: center; }
.ab-pub-compare th:first-child,
.ab-pub-compare td:first-child { text-align: left; min-width: 180px; }
.ab-pub-compare__group th {
  background: var(--ab-th-bg);
  color: var(--text-heading);
  font-size: var(--font-size-body);
}
.ab-pub-compare .ab-icon { vertical-align: middle; }
.ab-pub-yes { color: var(--color-success-dark); }
[data-theme='dark'] .ab-pub-yes { color: var(--color-success-base); }
.ab-pub-no { color: var(--text-muted); }

/* ---------- FAQ (details natif) ---------- */
.ab-pub-faq { display: grid; gap: var(--space-3); max-width: 760px; margin: 0 auto; }
.ab-pub-faq__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.ab-pub-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}
.ab-pub-faq__q::-webkit-details-marker { display: none; }
.ab-pub-faq__q .ab-icon { flex: none; transition: transform var(--duration-fast) var(--ease-out); }
.ab-pub-faq__item[open] > .ab-pub-faq__q .ab-icon { transform: rotate(180deg); }
.ab-pub-faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--text-body); }
.ab-pub-faq__a p { margin: 0; }

/* ---------- Blog ---------- */
.ab-pub-post { position: relative; overflow: hidden; height: 100%; }
.ab-pub-post__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  background: var(--color-brand-50);
}
[data-theme='dark'] .ab-pub-post__art { background: var(--bg-app); }
.ab-pub-post__art .ab-illus { width: auto; height: 130px; }
.ab-pub-post__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); }
.ab-pub-post__title { margin: 0; font-size: var(--font-size-h4); }
.ab-pub-post__title a { color: var(--text-heading); text-decoration: none; }
.ab-pub-post__title a::after { content: ''; position: absolute; inset: 0; }
.ab-pub-post__title a:focus-visible { outline: none; }
.ab-pub-post:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ab-pub-post__excerpt { margin: 0; flex: 1; color: var(--text-body); }
.ab-pub-post__date { margin: 0; color: var(--text-muted); font-size: var(--font-size-body-sm); }

.ab-pub-article__title { margin: 0 0 var(--space-2); font-size: 1.875rem; letter-spacing: -0.025em; }
.ab-pub-article__meta { margin: 0 0 var(--space-8); color: var(--text-muted); font-size: var(--font-size-body-sm); }
.ab-pub-blogfilter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.ab-pub-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-body);
  text-decoration: none;
}
.ab-pub-chip.is-active { background: var(--color-brand-600); border-color: var(--color-brand-600); color: #fff; }
.ab-pub-post__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-pub-post__cat { margin: 0; color: var(--text-muted); font-size: var(--font-size-body-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.ab-pub-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); color: var(--text-muted); }
.ab-pub-article__lead { margin: 0 0 var(--space-3); color: var(--text-body); font-size: 1.125rem; }
.ab-pub-article__cover { margin: 0 0 var(--space-8); }
.ab-pub-article__cover img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.ab-pub-article__cover figcaption { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-body-sm); }
.ab-pub-toc { margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.ab-pub-toc__title { margin: 0 0 var(--space-2); font-weight: 600; color: var(--text-heading); }
.ab-pub-toc ol { margin: 0; padding-left: var(--space-6); }
.ab-pub-toc a { display: inline-block; padding: var(--space-1) 0; }
.ab-pub-prose h2 { scroll-margin-top: var(--space-8); }
.ab-pub-cta { margin-top: var(--space-8); padding: var(--space-6); }
.ab-pub-cta__title { margin: 0 0 var(--space-2); font-size: var(--font-size-h3); }
.ab-pub-related { margin-top: var(--space-8); }
.ab-pub-related__title { font-size: var(--font-size-h3); }
.ab-pub-related ul { padding-left: var(--space-6); }
.ab-pub-related a { display: inline-block; padding: var(--space-1) 0; }
.ab-pub-article__back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-8); }

/* ---------- Texte long (articles, pages légales) ---------- */
.ab-pub-prose { color: var(--text-body); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.ab-pub-prose h1 { margin: 0 0 var(--space-3); font-size: 1.875rem; letter-spacing: -0.025em; }
.ab-pub-prose h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--font-size-h3); }
.ab-pub-prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-h4); }
.ab-pub-prose p,
.ab-pub-prose ul,
.ab-pub-prose ol { margin: 0 0 var(--space-4); }
.ab-pub-prose ul,
.ab-pub-prose ol { padding-left: 1.4em; }
.ab-pub-prose li + li { margin-top: var(--space-1); }
.ab-pub-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.ab-pub-prose hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--border-subtle); }
.ab-pub-prose a { color: var(--ab-nav-active-fg); text-underline-offset: 2px; }
.ab-pub-prose .ab-table-wrap { margin-bottom: var(--space-4); }
.ab-pub-prose__meta { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--font-size-body-sm); }

/* ---------- Formulaires publics ---------- */
.ab-pub-form { padding: var(--space-6); }
.ab-pub-form__head { margin-bottom: var(--space-6); text-align: center; }
.ab-pub-form__title { margin: 0 0 var(--space-2); font-size: var(--font-size-h2); }
.ab-pub-form__lead { margin: 0; color: var(--text-muted); }
.ab-pub-form .ab-field { margin-bottom: var(--space-4); }
.ab-pub-form__hint { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--font-size-body-sm); }
.ab-pub-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Support ---------- */
.ab-pub-support { display: grid; gap: var(--space-6); }
.ab-pub-side { display: grid; gap: var(--space-4); align-content: start; }
.ab-pub-side__card { padding: var(--space-6); gap: var(--space-3); align-items: flex-start; }
.ab-pub-side__title { margin: 0; font-size: var(--font-size-h4); }
.ab-pub-side__text { margin: 0; color: var(--text-body); }

@media (min-width: 768px) {
  .ab-pub-hero__title,
  .ab-pub-pagehead__title,
  .ab-pub-article__title { font-size: var(--font-size-display, 2.25rem); }
  .ab-pub-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ab-pub-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ab-pub-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ab-pub-beta { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-8); }
}
@media (min-width: 1024px) {
  .ab-pub-hero { padding: var(--space-16) 0 var(--space-12); }
  .ab-pub-hero__grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); }
  .ab-pub-hero__title { font-size: 2.75rem; }
  .ab-pub-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ab-pub-support { grid-template-columns: 2fr 1fr; align-items: start; }
  .ab-pub-section { padding: var(--space-16) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-pub-faq__q .ab-icon { transition: none; }
}

/* ---------- Tableaux larges : défilement horizontal signalé par des ombres de bord ---------- */
.ab-pub .ab-table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--bg-surface) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--bg-surface) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(46, 40, 34, 0.22), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(46, 40, 34, 0.22), transparent) right center / 10px 100% no-repeat scroll;
}
.ab-pub .ab-table-wrap .ab-table { min-width: 640px; }
.ab-pub-compare { min-width: 680px; }
.ab-pub-compare th:first-child,
.ab-pub-compare td:first-child { min-width: 200px; }
.ab-pub-scrollhint { display: none; margin: 0 0 var(--space-2); color: var(--text-body); font-size: var(--font-size-body-sm); }
@media (max-width: 767px) {
  .ab-pub-scrollhint { display: block; }
  .ab-pub-prose .ab-table-wrap .ab-table { min-width: 720px; }
}
.ab-pub-plan__note { margin: calc(-1 * var(--space-2)) 0 0; color: var(--text-body); font-size: var(--font-size-body-sm); }
.ab-pub-hero__note,
.ab-pub-prose__meta { color: var(--text-body); }

/* Cellules de tableau : jamais de mot coupé en pleine syllabe, largeur minimale par colonne */
.ab-pub-prose .ab-table th,
.ab-pub-prose .ab-table td { min-width: 150px; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ab-pub-scrollhint { font-size: var(--font-size-body); }
@media (max-width: 767px) {
  .ab-pub-compare th:first-child,
  .ab-pub-compare td:first-child { min-width: 150px; }
}
[data-theme='dark'] .ab-pub .ab-table-wrap {
  background:
    linear-gradient(to right, var(--bg-surface) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--bg-surface) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.28), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.28), transparent) right center / 10px 100% no-repeat scroll;
}
[data-theme='dark'] .ab-pub-yes { color: #6FD3A0; }