/* ============================================================
   article.css — le socle ÉDITORIAL, partagé par toutes les pages
   d'article du site. S'ajoute à main.css, qui porte les tokens,
   le reset, l'en-tête et le pied de page.

   Une page d'article n'invente aucune couleur ni aucune graisse :
   tout vient des tokens de marque. Ce qui lui est propre, c'est
   la LARGEUR DE LIGNE — le corps de texte est ramené à ~68 signes
   (--measure), la seule mesure qui rende un texte long lisible,
   pendant que les blocs pleine largeur (tableaux, encadrés)
   débordent volontairement de cette colonne.

   Où corriger quoi. Le rythme vertical, les titres et la mesure :
   ici, une fois, pour tous les articles. Un article qui a besoin
   d'un bloc unique ne crée PAS sa propre feuille : il ajoute son
   bloc ici, nommé, et tous les suivants en héritent.
   ============================================================ */

.article{
  --measure: 720px;          /* ~68 signes à 18px : la colonne de lecture */
  --measure-wide: 920px;     /* tableaux et encadrés, volontairement plus larges */
}

/* ── Hero d'article ────────────────────────────────────────── */
.article-hero{
  padding-block: 96px 56px;
  position: relative;
}
.article-hero__inner{
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-gutter, 120px);
}
.article-hero__eyebrow{ margin: 0 0 var(--space-8, 32px); }

.article-hero__title{
  margin: 0;
  max-width: var(--measure-wide);
  font-family: var(--font-sans);
  font-size: var(--text-h1, 64px);
  line-height: var(--text-h1-lh, 72px);
  letter-spacing: var(--text-h1-ls, -0.02em);
  font-weight: 600;          /* même arbitrage que le manifeste : le bold pèse trop */
  color: var(--color-title);
  text-wrap: balance;
}
/* Le geste signature : un SEUL fragment du titre porte le dégradé. */
.article-hero__accent{
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.article-hero__lead{
  margin: var(--space-8, 32px) 0 0;
  max-width: var(--measure);
  font-size: 21px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--color-ink-soft);
}
.article-hero__lead strong{ color: var(--color-ink); font-weight: 600; }

/* Ligne de service : date, temps de lecture, signature. */
.article-hero__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px) var(--space-6, 24px);
  margin: var(--space-8, 32px) 0 0;
  padding-top: var(--space-6, 24px);
  border-top: 1px solid var(--color-border);
  max-width: var(--measure);
  font-size: var(--text-caption, 13px);
  line-height: var(--text-caption-lh, 20px);
  font-weight: var(--text-caption-w, 500);
  color: var(--color-ink-soft);
}
.article-hero__meta > * { margin: 0; }
.article-hero__author{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.article-hero__avatar{
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.article-hero__sep{ color: var(--color-border-strong); }

/* ── Corps de l'article ────────────────────────────────────── */
.article__body{
  border-top: 1px solid var(--color-border);
  padding-block: 64px 96px;
}
.article__inner{
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-gutter, 120px);
}

/* Toute la prose tient dans la colonne de lecture. Les blocs qui
   doivent respirer plus large la débordent explicitement, plus bas. */
.article__body p,
.article__body ul,
.article__body ol,
.article__body h2,
.article__body h3,
.article__body h4{
  max-width: var(--measure);
}

.article__body h2{
  margin: 72px 0 var(--space-6, 24px);
  font-size: var(--text-h3, 32px);
  line-height: var(--text-h3-lh, 44px);
  letter-spacing: var(--text-h3-ls, -0.02em);
  font-weight: 600;
  color: var(--color-title);
  text-wrap: balance;
}
.article__body h2:first-child{ margin-top: 0; }

.article__body h3{
  margin: 48px 0 var(--space-3, 12px);
  font-size: var(--text-h5, 21px);
  line-height: var(--text-h5-lh, 32px);
  letter-spacing: var(--text-h5-ls, -0.02em);
  font-weight: 600;
  color: var(--color-title);
}

.article__body p{
  margin: 0 0 var(--space-6, 24px);
  font-size: var(--text-body-lg, 18px);
  line-height: 30px;
  color: var(--color-ink-soft);
}
.article__body strong{ color: var(--color-ink); font-weight: 600; }

.article__body a{
  color: var(--color-primary-vivid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-primary-vivid) 35%, transparent);
  transition: text-decoration-color var(--motion-quick, 180ms) var(--ease-signature);
}
.article__body a:hover{ text-decoration-color: currentColor; }

.article__body ul,
.article__body ol{
  margin: 0 0 var(--space-6, 24px);
  padding-left: 22px;
}
.article__body li{
  margin-bottom: var(--space-3, 12px);
  font-size: var(--text-body-lg, 18px);
  line-height: 30px;
  color: var(--color-ink-soft);
}
.article__body li::marker{ color: var(--color-primary); }

/* Le chapô d'une section : une phrase qui porte, sans devenir un titre. */
.article__stand{
  margin: 0 0 var(--space-8, 32px);
  font-size: 21px !important;
  line-height: 34px !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.01em;
}

/* ── Sommaire ──────────────────────────────────────────────── */
.article-toc{
  margin: 0 0 64px;
  padding: var(--space-6, 24px) var(--space-8, 32px);
  max-width: var(--measure);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
}
.article-toc__title{
  margin: 0 0 var(--space-3, 12px) !important;
  font-size: var(--text-eyebrow, 14px) !important;
  line-height: var(--text-eyebrow-lh, 24px) !important;
  letter-spacing: var(--text-eyebrow-ls, 0.04em);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink) !important;
}
.article-toc ol{
  margin: 0 !important;
  padding-left: 20px;
  counter-reset: none;
}
.article-toc li{
  margin-bottom: var(--space-2, 8px);
  font-size: var(--text-body, 16px);
  line-height: 26px;
}

/* ── Encadré ───────────────────────────────────────────────── */
.article-note{
  margin: 48px 0;
  max-width: var(--measure-wide);
  padding: var(--space-8, 32px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-pill);
}
.article-note__label{
  margin: 0 0 var(--space-3, 12px) !important;
  font-size: var(--text-eyebrow, 14px) !important;
  line-height: var(--text-eyebrow-lh, 24px) !important;
  letter-spacing: var(--text-eyebrow-ls, 0.04em);
  font-weight: 600;
  text-transform: uppercase;
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.article-note p{ margin-bottom: var(--space-4, 16px); }
.article-note p:last-child{ margin-bottom: 0; }

/* ── Citation ──────────────────────────────────────────────── */
.article-quote{
  margin: 48px 0;
  padding: 0 0 0 var(--space-8, 32px);
  max-width: var(--measure);
  border-left: 2px solid var(--color-primary);
}
.article-quote p{
  margin: 0 0 var(--space-3, 12px);
  font-size: 24px !important;
  line-height: 36px !important;
  letter-spacing: -0.01em;
  color: var(--color-title) !important;
  font-weight: 500;
}
.article-quote footer{
  font-size: var(--text-caption, 13px);
  line-height: var(--text-caption-lh, 20px);
  font-weight: var(--text-caption-w, 500);
  color: var(--color-ink-soft);
}

/* ── Liste « symptômes » : des constats numérotés ──────────── */
.article-tells{
  margin: 40px 0 !important;
  padding: 0 !important;
  max-width: var(--measure-wide) !important;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.article-tells li{
  margin: 0;
  padding: var(--space-6, 24px) var(--space-8, 32px);
  background: var(--color-white);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4, 16px);
  align-items: baseline;
  font-size: var(--text-body, 16px);
  line-height: 26px;
}
.article-tells b{
  font-family: var(--font-sans);
  font-size: var(--text-caption, 13px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.article-tells strong{ display: block; color: var(--color-ink); }

/* ── Tableau comparatif ────────────────────────────────────── */
.article-table{
  margin: 40px 0;
  max-width: var(--measure-wide);
  overflow-x: auto;                 /* le corps de page ne défile JAMAIS latéralement */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  /* Ombres de défilement (fonds `local` + `scroll` superposés) : les deux
     voiles blancs suivent le contenu, les deux ombres restent collées aux
     bords. Résultat, une ombre n'apparaît que du côté où il reste quelque
     chose à voir — et disparaît en bout de course. Sans ce repère, on
     lisait « Brand Book » et on croyait le tableau à deux colonnes : sur
     mobile, deux des quatre colonnes étaient hors champ sans un signe. */
  background:
    linear-gradient(to right, var(--color-white) 40%, rgba(255, 255, 255, 0)) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--color-white) 40%, rgba(255, 255, 255, 0)) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(38, 41, 46, 0.13), rgba(38, 41, 46, 0)) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(38, 41, 46, 0.13), rgba(38, 41, 46, 0)) 100% 0 / 14px 100% no-repeat scroll;
  background-color: var(--color-white);
}
.article-table table{
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: var(--text-body-sm, 15px);
  line-height: 24px;
}
.article-table th,
.article-table td{
  text-align: left;
  padding: var(--space-4, 16px) var(--space-6, 24px);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-ink-soft);
}
.article-table thead th{
  background: var(--color-surface);
  font-size: var(--text-caption, 13px);
  line-height: var(--text-caption-lh, 20px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink);
}
.article-table tbody th{
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td{ border-bottom: none; }
.article-table td em{
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary-vivid);
}

/* ── Étapes numérotées ─────────────────────────────────────── */
.article-steps{
  margin: 40px 0 !important;
  padding: 0 !important;
  max-width: var(--measure-wide) !important;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--space-6, 24px);
}
.article-steps > li{
  margin: 0;
  padding-left: 60px;
  position: relative;
  counter-increment: step;
}
.article-steps > li::before{
  content: counter(step);
  position: absolute;
  left: 0; top: 2px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-badge);
  border: 1px solid var(--color-border-soft);
  font-size: var(--text-body-sm, 15px);
  font-weight: 600;
  color: var(--color-primary-vivid);
  font-variant-numeric: tabular-nums;
}
.article-steps strong{ display: block; margin-bottom: 4px; color: var(--color-ink); }

/* ── Bloc de code / extrait technique ──────────────────────── */
.article-code{
  margin: 32px 0;
  max-width: var(--measure-wide);
  padding: var(--space-6, 24px);
  background: var(--color-neutral-950);
  border-radius: var(--radius-md, 12px);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 24px;
  color: #D8D8E4;
}
.article-code b{ color: #9C8FFF; font-weight: 500; }
.article-code i{ color: #8A8A9C; font-style: normal; }

/* ── FAQ d'article : réutilise les <details> natifs ────────── */
.article-faq{
  margin: 48px 0 0;
  max-width: var(--measure-wide);
  border-top: 1px solid var(--color-border);
}
.article-faq__item{
  border-bottom: 1px solid var(--color-border);
}
.article-faq__q{
  list-style: none;
  cursor: pointer;
  padding: var(--space-6, 24px) 44px var(--space-6, 24px) 0;
  position: relative;
  font-size: var(--text-h5, 21px);
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--color-title);
}
.article-faq__q::-webkit-details-marker{ display: none; }
.article-faq__q::after{
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 12px; height: 2px;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 transparent;
  transform: translateY(-50%);
}
.article-faq__q::before{
  content: "";
  position: absolute;
  right: 13px; top: 50%;
  width: 2px; height: 12px;
  background: var(--color-primary);
  transform: translateY(-50%);
  transition: opacity var(--motion-quick, 180ms) var(--ease-signature);
}
.article-faq__item[open] .article-faq__q::before{ opacity: 0; }
.article-faq__a{ padding: 0 0 var(--space-6, 24px); }
.article-faq__a p:last-child{ margin-bottom: 0; }

/* ── « À lire ensuite » ────────────────────────────────────
   Le composant vit dans main.css sous le nom `.reads` : la page
   d'accueil l'utilise aussi, il n'a donc rien à faire ici. Seule
   la respiration propre aux articles est réglée là. */
.article .reads{ border-top:1px solid var(--color-border); }

/* ── Fil d'Ariane ──────────────────────────────────────────── */
.article-crumbs{
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding: var(--space-8, 32px) var(--space-gutter, 120px) 0;
  font-size: var(--text-caption, 13px);
  line-height: var(--text-caption-lh, 20px);
  font-weight: var(--text-caption-w, 500);
  color: var(--color-ink-soft);
}
.article-crumbs a{ color: inherit; text-decoration: none; }
.article-crumbs a:hover{ color: var(--color-primary-vivid); }
.article-crumbs span{ color: var(--color-border-strong); margin-inline: var(--space-2, 8px); }

/* ── Adaptations ───────────────────────────────────────────── */
@media (max-width: 1100px){
  .article-hero__inner,
  .article__inner,
  .article-next__inner,
  .article-crumbs{ padding-inline: 64px; }
}
@media (max-width: 760px){
  .article-hero{ padding-block: 56px 40px; }
  .article-hero__inner,
  .article__inner,
  .article-next__inner,
  .article-crumbs{ padding-inline: 24px; }
  .article-hero__title{ font-size: 38px; line-height: 46px; }
  .article-hero__lead{ font-size: 18px; line-height: 30px; }
  .article__body{ padding-block: 48px 64px; }
  .article__body h2{ margin-top: 56px; font-size: 26px; line-height: 36px; }
  .article__body p,
  .article__body li{ font-size: 17px; line-height: 28px; }
  .article__stand{ font-size: 19px !important; line-height: 30px !important; }
  .article-note,
  .article-toc{ padding: var(--space-6, 24px); }
  .article-tells li{ padding: var(--space-4, 16px) var(--space-6, 24px); }
  .article-quote p{ font-size: 20px !important; line-height: 30px !important; }

  /* Le tableau gardait 640px de large : à 390px, seule la colonne
     « Brand Book » entrait dans le cadre. On resserre les cellules et on
     laisse la colonne de gauche se replier — trois colonnes sur quatre
     deviennent visibles d'emblée, la quatrième s'atteint d'un geste. */
  .article-table table{ min-width: 460px; font-size: var(--text-caption, 13px); line-height: 20px; }
  .article-table th,
  .article-table td{ padding: var(--space-3, 12px) var(--space-4, 16px); }
  .article-table thead th{ font-size: 11px; letter-spacing: 0.03em; }
  .article-table tbody th{ white-space: normal; }

  /* La colonne des critères reste à quai pendant le défilement : sans
     elle, pousser jusqu'à « Design Brain » fait perdre de vue la ligne
     qu'on est en train de lire. `border-collapse: collapse` mange les
     bordures d'une cellule collante — le filet de droite est donc rendu
     par une ombre portée. */
  .article-table th:first-child{
    position: sticky;
    left: 0;
    z-index: 1;
    width: 34%;
    box-shadow: 1px 0 0 var(--color-border);
  }
  .article-table tbody th:first-child{ background: var(--color-white); }
  .article-table thead th:first-child{ background: var(--color-surface); }
}

/* ── Utilitaire ────────────────────────────────────────────── */
/* Masqué à l'œil, lu par les lecteurs d'écran : sert aux <caption>
   de tableau, que la maquette ne montre pas mais que l'accessibilité
   exige. Absent de main.css au moment d'écrire ces lignes ; à y
   remonter le jour où une autre page en a besoin. */
.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}