/* ══════════════════════════════════════════════════════════════════════════
   Telefon-iA — articles longs du blog (2 000 à 4 000 mots)
   Chargée APRÈS style.css, seulement par les pages produites par
   /docker/cloud-call/blog/gabarit.cjs (articles, aperçus, /blog).
   Mêmes jetons que style.css ; rien ici ne touche les autres pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── En-tête d'article ──────────────────────────────────────────────────── */
/* Le h1 du site (jusqu'à 74 px) est fait pour une accroche de 4 mots ; un
   titre d'article de 60 à 70 caractères y tiendrait sur 5 lignes. */
.entete-article h1 { font-size: clamp(32px, 4.4vw, 56px); max-width: 24ch; }
.entete-article .chapeau { margin-top: 18px; }
.article-meta { margin-top: 22px; font-size: 14px; line-height: 1.9; color: var(--ink-mute); }
/* Chaque mention reste d'un bloc ; le séparateur finit la ligne au lieu d'en ouvrir une. */
.article-meta span { white-space: nowrap; }
.article-meta span:not(:last-child)::after { content: '\00a0\00a0·'; margin-right: 0.3em; }
.article-meta time { color: var(--ink); font-weight: 600; }

/* ─── Trame de lecture ───────────────────────────────────────────────────── */
.article-long { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.article-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.article-colonne { min-width: 0; }
@media (min-width: 1100px) {
  .article-grille {
    grid-template-columns: 240px minmax(0, 720px);
    column-gap: 72px;
    justify-content: center;
    align-items: start;
  }
  .article-grille--seule { grid-template-columns: minmax(0, 720px); }
  /* Sommaire collant sous la barre de navigation (elle-même collante). */
  .sommaire { position: sticky; top: 100px; max-height: calc(100vh - 124px); overflow-y: auto; }
}

/* ─── Sommaire ───────────────────────────────────────────────────────────── */
.sommaire {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 20px 22px 16px;
  font-size: 14.5px;
}
.sommaire-titre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: sommaire; }
.sommaire li { counter-increment: sommaire; border-top: 1px solid var(--hair); }
.sommaire li:first-child { border-top: 0; }
.sommaire a {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.sommaire a::before {
  content: counter(sommaire, decimal-leading-zero);
  flex: none;
  min-width: 20px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mauve);
  padding-top: 2px;
}
.sommaire a:hover,
.sommaire a:focus-visible { color: var(--ink); }

/* ─── À retenir ──────────────────────────────────────────────────────────── */
.a-retenir {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(139, 107, 217, 0.28);
  border-radius: var(--r-lg);
  padding: 24px 26px 24px 32px;
  margin-bottom: clamp(36px, 5vw, 52px);
  box-shadow: var(--shadow-soft);
}
.a-retenir::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--brand);
}
.a-retenir-titre { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 12px; }
.a-retenir ul { display: flex; flex-direction: column; gap: 11px; }
.a-retenir li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.a-retenir li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--mauve);
  border-bottom: 2.5px solid var(--mauve);
  transform: rotate(-45deg);
}

/* ─── Corps ──────────────────────────────────────────────────────────────── */
.article-corps { max-width: none; gap: 0; font-size: 17px; line-height: 1.72; }
.article-section { display: flex; flex-direction: column; gap: 18px; }
.article-section + .article-section { margin-top: clamp(44px, 6vw, 64px); }
.article-corps h2 { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -0.03em; line-height: 1.16; }
.article-corps h3 { font-size: clamp(19px, 1.7vw, 21.5px); margin-top: 14px; }
.article-corps strong { color: var(--ink); }
.article-corps a,
.article-pied a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(53, 98, 211, 0.35);
  transition: text-decoration-color 0.2s var(--ease);
}
.article-corps a:hover,
.article-pied a:hover { text-decoration-color: currentColor; }
/* Listes numérotées : style.css pose une pastille sur tout <li> de .prose. */
.article-corps ol { display: flex; flex-direction: column; gap: 10px; padding-left: 1.5em; color: var(--ink-soft); }
.article-corps ol > li { padding-left: 4px; }
.article-corps ol > li::before { display: none; }
.article-corps ol > li::marker { color: var(--mauve); font-weight: 700; }
.article-corps blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mauve);
  color: var(--ink);
}
.article-corps > .tableau-legende { margin-top: clamp(40px, 5vw, 56px); margin-bottom: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* ─── Tableaux ───────────────────────────────────────────────────────────── */
/* Défilement horizontal au doigt, ombres de bord qui indiquent qu'il reste
   des colonnes à droite (technique « background-attachment: local »). */
.tableau-defilant {
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--white) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(26, 31, 53, 0.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(26, 31, 53, 0.14), transparent) 100% 0;
  background-color: var(--white);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tableau-defilant:focus-visible { outline-offset: 2px; }
.tableau-defilant table { min-width: 600px; font-size: 15px; }
.tableau-defilant th,
.tableau-defilant td { vertical-align: top; line-height: 1.5; }
.tableau-defilant thead th { background: var(--sand); }
.tableau-defilant tbody tr:nth-child(odd) { background: transparent; }
.tableau-defilant tbody tr:nth-child(even) { background: rgba(245, 239, 230, 0.45); }
.tableau-defilant tbody tr:last-child > * { border-bottom: 0; }
/* En-tête de ligne : lisible comme une cellule, pas comme un intitulé de colonne. */
.tableau-defilant tbody th {
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 640px) {
  /* Colonnes d'au moins ~150 px : on défile un peu plus, mais les lignes restent lisibles. */
  .tableau-defilant th,
  .tableau-defilant td { min-width: 9.5em; }
  .tableau-defilant::after {
    content: 'Glissez pour voir tout le tableau →';
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100%;
    padding: 8px 14px 12px;
    font-size: 12.5px;
    color: var(--ink-mute);
  }
}

/* ─── FAQ visible ────────────────────────────────────────────────────────── */
.faq-ouverte .faq-item {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.faq-ouverte .faq-item h3 { font-size: 17.5px; letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 8px; }
.faq-ouverte .faq-item p { color: var(--ink-soft); font-size: 15.8px; line-height: 1.65; max-width: 70ch; }

/* ─── Sources ────────────────────────────────────────────────────────────── */
.article-pied { max-width: 760px; }
.sources-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.5em;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.sources-liste li { padding-left: 4px; }
.sources-liste li::before { display: none; }
.sources-liste li::marker { color: var(--ink-mute); font-weight: 600; }
.sources-liste a { font-weight: 600; }
.article-signature { font-size: 14px; color: var(--ink-mute); }