/* ══ LE BLOG — teamop.fr/blog/ (24 octobre 2026) ═══════════════════════════════════════════════════════════
   Pages fabriquées par `scripts/blog.js`, sur la feuille du site (`site.css`) : mêmes jetons, donc le jour et la nuit
   suivent l'appareil sans rien ajouter ici. Cette feuille ne porte que la mise en page de la LECTURE : une colonne de
   ~68 signes, des titres qui respirent, des tableaux qui défilent au doigt plutôt que d'élargir la page. */

/* ── l'index ── */
.blog-liste { max-width: 1120px; margin: 0 auto; padding: clamp(36px,5vw,64px) 22px clamp(24px,4vw,48px); }
.blog-une { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items: center;
  color: var(--text); text-decoration: none; margin-bottom: clamp(36px,5vw,56px); }
.blog-une img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--card); }
.blog-une b { font-family: var(--titre); font-size: clamp(26px,3.2vw,38px); line-height: 1.12; letter-spacing: -.02em; }
.blog-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px,2.5vw,32px); }
.blog-carte { display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none; }
.blog-carte img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--card); }
.blog-carte b { font-family: var(--titre); font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.blog-carte-texte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.blog-carte-texte time { font-size: 14px; color: var(--sub); }
.blog-carte-texte > span { font-size: 16px; line-height: 1.45; color: var(--body); }
.blog-carte:hover b, .blog-une:hover b { text-decoration: underline; text-underline-offset: 3px; }
.blog-une .lien-suite { padding-left: 0; }
@media (max-width: 760px) { .blog-une { grid-template-columns: minmax(0,1fr); } }

/* ── l'article ── */
.billet { max-width: 760px; margin: 0 auto; padding: clamp(28px,4vw,52px) 22px 0; }
.fil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--sub); }
.fil a { color: var(--sub); display: inline-flex; align-items: center; min-height: 44px; }
.billet-tete h1 { margin: 6px 0 0; font-family: var(--titre); font-size: clamp(34px,5vw,52px); line-height: 1.08; letter-spacing: -.028em; font-weight: 700; overflow-wrap: break-word; }
.billet-meta { margin: 16px 0 0; font-size: 15px; color: var(--sub); }
.billet-couverture { margin: clamp(24px,3vw,36px) 0 0; }
.billet-couverture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: var(--card); }

.billet-corps { margin-top: clamp(28px,3.5vw,40px); font-size: 18px; line-height: 1.65; color: var(--body); overflow-wrap: break-word; }
.billet-corps > * { margin: 0 0 1.1em; }
.billet-corps h2 { margin: 2.1em 0 .6em; font-family: var(--titre); font-size: clamp(25px,3vw,31px); line-height: 1.18; letter-spacing: -.02em; color: var(--text); scroll-margin-top: 72px; }
.billet-corps h3 { margin: 1.7em 0 .5em; font-family: var(--titre); font-size: 21px; line-height: 1.3; color: var(--text); scroll-margin-top: 72px; }
.billet-corps strong { color: var(--text); }
.billet-corps a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.billet-corps ul, .billet-corps ol { padding-left: 1.3em; }
.billet-corps li { margin: .45em 0; }
.billet-corps li::marker { color: var(--sub); }
.billet-corps figure { margin: 2em 0; }
.billet-corps figure img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--card); }
.billet-corps blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line); color: var(--text); }
.billet-corps .signature { margin-top: -.3em; font-style: italic; color: var(--sub); }
.billet-corps pre { background: var(--card); border-radius: 14px; padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.55; white-space: pre; }
.billet-corps code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* un tableau large défile dans son cadre, jamais la page */
.billet-corps .tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.billet-corps table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; min-width: 520px; }
.billet-corps th, .billet-corps td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.billet-corps th { background: var(--card); color: var(--text); font-weight: 600; }
.billet-corps tr:last-child td { border-bottom: 0; }

/* l'encart OP GESTION, après le premier paragraphe */
.billet-encart { margin: 1.8em 0 2em; padding: 26px 26px 18px; border-radius: 22px; background: var(--inv-bg); background-image: var(--inv-halo); box-shadow: var(--inv-bord); color: var(--inv-fg); }
.billet-encart > p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--inv-sub); }
.billet-encart .surtitre { font-size: 14px; letter-spacing: .02em; color: var(--inv-sub); }
.billet-encart .encart-titre { font-family: var(--titre); font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--inv-fg); }
.billet-encart .encart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 0; }
.billet-encart .bouton { text-decoration: none; }
.billet-encart .lien-suite { text-decoration: none; }
.billet-corps .billet-encart a.bouton { color: var(--on-accent); }

.billet-auteur { display: flex; gap: 14px; align-items: center; margin: clamp(36px,4vw,52px) 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.billet-auteur img { border-radius: 12px; flex: none; }
.billet-auteur div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--sub); }
.billet-auteur b { color: var(--text); font-size: 16px; }

.blog-suite { max-width: 1120px; margin: 0 auto; padding: clamp(52px,6vw,80px) 22px 20px; }
.blog-suite h2 { margin: 0 0 24px; font-family: var(--titre); font-size: clamp(26px,3vw,34px); letter-spacing: -.02em; }

@media (pointer: coarse) {
  .billet-encart .lien-suite, .billet-encart .bouton { display: inline-flex; align-items: center; min-height: 44px; }
}