/* Modele "Article de blog" - scope .alb uniquement. Tokens de landing.css (.alp). */
.alb { --alb-col: 720px; --alb-yellow: #fff0a6; padding-bottom: 110px; }

/* Bandeau d'apercu */
.alb-preview { background: var(--alb-yellow); border-bottom: 1px solid #e9d36a; font-size: .78rem; line-height: 1.5; padding: 10px 0; }
.alb-preview strong { font-family: var(--alp-sub); font-weight: 400; letter-spacing: .06rem; text-transform: uppercase; }

/* En-tete */
.alb-head__inner { max-width: 980px; padding-top: 50px; padding-bottom: 36px; }
.alb-kicker { display: flex; gap: 8px; font-family: var(--alp-sub); font-size: .85rem; letter-spacing: .1rem; text-transform: uppercase; color: var(--alp-accent); margin-bottom: 18px; }
.alb-kicker span[aria-hidden] { color: var(--alp-muted); }
.alb .alb-title {
  font-family: var(--alp-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: .12rem;
  text-transform: uppercase;
  text-align: left;
  max-width: 24ch;
  margin-bottom: 24px;
}
.alb-lead { font-size: 1.02rem; line-height: 1.75; max-width: 60ch; margin-bottom: 26px; }
.alb-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .75rem; color: var(--alp-muted); padding-top: 18px; border-top: 1px solid var(--alp-line); }
.alb-meta span { position: relative; }
.alb-meta span + span::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--alp-accent); }

.alb-hero { margin: 0; background: var(--alp-surface); }
.alb-hero__img { width: 100%; height: clamp(260px, 46vw, 560px); object-fit: cover; }

/* Mise en page : sommaire + article */
.alb-layout { display: grid; grid-template-columns: 250px minmax(0, var(--alb-col)); justify-content: center; gap: 70px; padding-top: 60px; }
.alb-toc { position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; }
.alb-toc__box { border-top: 2px solid var(--alp-ink); padding-top: 14px; }
.alb-toc__title { font-family: var(--alp-display); font-size: .95rem; letter-spacing: .12rem; text-transform: uppercase; cursor: pointer; list-style: none; margin-bottom: 12px; }
.alb-toc__title::-webkit-details-marker { display: none; }
.alb-toc__list { counter-reset: alb; list-style: none; margin: 0; padding: 0; }
.alb-toc__list li { counter-increment: alb; }
.alb-toc__list a { display: grid; grid-template-columns: 26px 1fr; padding: 7px 0; border-bottom: 1px solid var(--alp-line); font-size: .74rem; line-height: 1.45; text-decoration: none; color: var(--alp-muted); transition: color .15s ease; }
.alb-toc__list a::before { content: counter(alb, decimal-leading-zero); font-family: var(--alp-sub); color: var(--alp-ink); }
.alb-toc__list a:hover, .alb-toc__list a.is-active { color: var(--alp-ink); }
.alb-toc__list a.is-active::before { color: var(--alp-accent); }
.alb-toc__cta { margin-top: 22px; font-size: .8rem; }

/* Corps de l'article */
.alb-body { min-width: 0; font-size: .95rem; line-height: 1.85; }
.alb-body > * + * { margin-top: 20px; }
.alb-body p a, .alb-body li a, .alb-body td a { color: var(--alp-ink); text-decoration: underline; text-decoration-color: var(--alp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.alb-body p a:hover, .alb-body li a:hover { color: var(--alp-accent); }
.alb-body strong { font-weight: 700; }
.alb .alb-body h2 {
  font-family: var(--alp-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-align: left;
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid var(--alp-ink);
  scroll-margin-top: 110px;
}
.alb .alb-body h2:first-child { margin-top: 0; }
.alb .alb-body h3 {
  font-family: var(--alp-sub);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: .06rem;
  text-transform: uppercase;
  text-align: left;
  margin-top: 40px;
}
.alb .alb-body h3 + p, .alb .alb-body h2 + p { margin-top: 12px; }
.alb-body ul:not([class]) { padding: 0; }
.alb-body ul:not([class]) li { position: relative; padding-left: 22px; margin-top: 8px; }
.alb-body ul:not([class]) li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 8px; background: var(--alp-accent); }

/* Passages a completer */
.alb-todo { display: inline; background: var(--alb-yellow); color: var(--alp-ink); padding: 2px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.alb-todo__tag { font-family: var(--alp-sub); font-size: .72rem; letter-spacing: .06rem; text-transform: uppercase; background: var(--alp-ink); color: var(--alb-yellow); padding: 1px 6px; margin-right: 2px; }

/* Encadres */
.alb-note { background: var(--alp-surface); border-left: 4px solid var(--alp-accent); padding: 20px 24px; font-size: .88rem; line-height: 1.75; }
.alb .alb-note__title { font-family: var(--alp-sub); font-size: .9rem; letter-spacing: .08rem; text-transform: uppercase; margin-bottom: 6px; }

/* Photos */
.alb-fig { margin-top: 34px !important; }
.alb-fig__img { width: 100%; height: auto; max-height: 520px; object-fit: cover; background: var(--alp-surface); }
.alb-fig--wide { margin-left: -60px; margin-right: -60px; }
.alb-fig__cap { font-size: .72rem; color: var(--alp-muted); margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--alp-line); line-height: 1.5; }

/* Tableaux */
.alb-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--alp-ink); }
.alb-table table { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.5; margin: 0; }
.alb-table th { font-family: var(--alp-sub); font-weight: 400; font-size: .8rem; letter-spacing: .06rem; text-transform: uppercase; text-align: left; background: var(--alp-ink); color: #fff; padding: 12px 14px 10px; white-space: nowrap; }
.alb-table td { padding: 12px 14px; border-top: 1px solid var(--alp-line); vertical-align: top; }
.alb-table tbody tr:nth-child(even) td { background: #f8f8f7; }
.alb-table td:first-child { font-weight: 700; }
.alb-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.alb-table tr.is-alch td { box-shadow: inset 3px 0 0 var(--alp-accent); }
.alb-table__note { font-size: .72rem; color: var(--alp-muted); margin-top: 10px !important; line-height: 1.5; }

/* Echelle de prix */
.alb-ladder { border: 1px solid var(--alp-ink); padding: 26px 24px 20px; }
.alb .alb-ladder__title { font-family: var(--alp-sub); font-size: .95rem; letter-spacing: .06rem; text-transform: uppercase; margin-bottom: 18px; }
.alb-ladder__row { display: grid; grid-template-columns: 210px 1fr 100px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--alp-line); }
.alb-ladder__name { font-size: .78rem; line-height: 1.35; }
.alb-ladder__name small { display: block; color: var(--alp-accent); font-size: .68rem; letter-spacing: .04rem; text-transform: uppercase; font-family: var(--alp-sub); }
.alb-ladder__track { position: relative; height: 14px; background: var(--alp-surface); }
.alb-ladder__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); background: #b9b7b4; }
.alb-ladder__row.is-alch .alb-ladder__track i { background: var(--alp-accent); }
.alb-ladder__price { font-family: var(--alp-display); font-size: .95rem; letter-spacing: .04rem; text-align: right; white-space: nowrap; }
.alb-ladder__axis { display: grid; grid-template-columns: 210px 1fr 100px; gap: 14px; padding-top: 8px; border-top: 1px solid var(--alp-line); font-size: .66rem; color: var(--alp-muted); }
.alb-ladder__axis span:nth-child(2) { display: flex; justify-content: space-between; }
.alb-ladder__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .7rem; color: var(--alp-muted); }
.alb-ladder__legend span::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 6px; background: #b9b7b4; }
.alb-ladder__legend span.is-alch::before { background: var(--alp-accent); }

/* Chiffres cles */
.alb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--alp-ink); border: 1px solid var(--alp-ink); }
.alb-stat { background: var(--alp-bg); padding: 22px 18px 18px; }
.alb-stat__value { display: block; font-family: var(--alp-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; letter-spacing: .04rem; }
.alb-stat__label { display: block; font-size: .74rem; line-height: 1.45; color: var(--alp-muted); margin-top: 10px; }
.alb-stat.is-accent .alb-stat__value { color: var(--alp-accent); }

/* Produits achetables */
.alb-products { margin-top: 40px !important; background: var(--alp-surface); padding: 30px 26px; }
.alb .alb-products__title { font-family: var(--alp-display); font-size: 1.2rem; letter-spacing: .1rem; text-transform: uppercase; margin-bottom: 22px; }
.alb-products__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
.alb-card { display: flex; flex-direction: column; background: var(--alp-bg); padding: 16px; }
.alb-card .alp-card__link { height: auto; }
.alb-card .alp-card__media { aspect-ratio: 1 / 1; }
.alb-card .alp-card__notes { font-size: .8rem; }

/* Appel a l'action */
.alb-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--alp-ink); color: #fff; padding: 28px 30px; margin-top: 44px !important; }
.alb .alb-cta__title { font-family: var(--alp-display); font-size: 1.25rem; letter-spacing: .1rem; text-transform: uppercase; line-height: 1.1; }
.alb .alb-cta__desc { font-size: .8rem; line-height: 1.6; color: #d9d8d6; margin-top: 8px; }
.alb-cta .alp-btn { background: #fff; color: var(--alp-ink); border-color: #fff; flex-shrink: 0; }
.alb-cta .alp-btn:hover { background: var(--alp-accent); border-color: var(--alp-accent); color: #fff; }

/* FAQ */
.alb-faq { border-top: 1px solid var(--alp-ink); margin-top: 24px !important; }
.alb-faq__item { border-bottom: 1px solid var(--alp-line); }
.alb-faq__item summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 16px 0; font-family: var(--alp-sub); font-size: 1rem; letter-spacing: .04rem; line-height: 1.35; text-transform: uppercase; }
.alb-faq__item summary::-webkit-details-marker { display: none; }
.alb-faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-family: var(--alp-display); font-size: 1.6rem; color: var(--alp-accent); transition: transform .2s ease; }
.alb-faq__item[open] summary::after { transform: rotate(45deg); }
.alb-faq__a { padding: 0 0 20px; font-size: .88rem; line-height: 1.8; }

/* Auteur */
.alb-author { margin-top: 70px !important; border: 1px solid var(--alp-ink); padding: 26px 28px; font-size: .84rem; line-height: 1.75; }
.alb .alb-author__title { font-family: var(--alp-display); font-size: 1.05rem; letter-spacing: .1rem; text-transform: uppercase; margin-bottom: 10px; }
.alb-author__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px !important; }
.alb-author__links a { font-family: var(--alp-sub); letter-spacing: .06rem; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }

/* Tablette */
@media (max-width: 1100px) {
  .alb-layout { grid-template-columns: minmax(0, var(--alb-col)); gap: 0; padding-top: 34px; }
  .alb-toc { position: static; max-height: none; margin-bottom: 40px; }
  .alb-toc__title { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .alb-toc__title::after { content: " +"; color: var(--alp-accent); margin-left: 6px; }
  .alb-toc__box[open] .alb-toc__title::after { content: " –"; }
  .alb-toc__cta { display: none; }
  .alb-fig--wide { margin-left: 0; margin-right: 0; }
}

/* Mobile */
@media (max-width: 640px) {
  .alb-head__inner { padding-top: 30px; padding-bottom: 26px; }
  .alb-lead { font-size: .92rem; }
  .alb-meta { flex-direction: column; gap: 2px; }
  .alb-meta span + span::before { display: none; }
  .alb-body { font-size: .9rem; }
  .alb-products { padding: 22px 16px; margin-left: -20px !important; margin-right: -20px !important; }
  .alb-products__grid { grid-template-columns: 1fr; }
  .alb-stats { grid-template-columns: 1fr; }
  .alb-cta { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .alb-ladder { padding: 20px 14px 16px; }
  .alb-ladder__row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .alb-ladder__track { grid-column: 1 / -1; grid-row: 2; }
  .alb-ladder__axis { grid-template-columns: 1fr; }
  .alb-ladder__axis span:first-child, .alb-ladder__axis span:last-child { display: none; }
  .alb-table th, .alb-table td { padding: 10px; }
}