/* ══════════════════════════════════════════════════════════════════
       GUIDES — feuille propre aux pages pilier (guides/…)
       Inlinée par build_guide.py APRÈS article.css, dont elle réutilise
       .article-body, .highlight-box, .data-table, .faq-item, .step-card.

       Règle du projet : aucune couleur de surface en dur. Tout passe par
       les jetons de :root, sinon le mode clair perd contours et fonds.
       ══════════════════════════════════════════════════════════════════ */

    /* ── En-tête ── */
    .guide-header { padding: 9rem 0 3rem; }
    .guide-header h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.2; margin-top: 1.2rem; }
    .guide-header .gold-line { margin: 1.2rem auto; }
    .guide-lead { max-width: 780px; color: var(--gray-light); font-size: 1.05rem; }
    .guide-meta {
      display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem;
      padding-top: 1.2rem; border-top: 1px solid var(--border-mid);
      font-size: 0.84rem; color: var(--gray);
    }

    /* ── Gabarit à trois colonnes ──
       Le sommaire est une COLONNE, pas un encadré en tête d'article :
       c'est ce qui distingue la lecture d'un guide (on saute au chapitre)
       de celle d'un article (on lit au fil). */
    .guide-section { padding: 0 0 6rem; }
    .guide-layout {
      display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px;
      gap: 3rem; align-items: start;
    }
    .guide-main { max-width: none; }

    /* ── Sommaire collant ── */
    .guide-toc-col { position: sticky; top: 7rem; }
    .guide-toc {
      background: var(--navy-mid); border: 1px solid var(--border-mid);
      border-radius: 12px; padding: 1.4rem 1.2rem;
      max-height: calc(100vh - 9rem); overflow-y: auto;
    }
    .guide-toc h4, .guide-toc .toc-h {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--purple-light);
      margin-bottom: 1rem; padding-bottom: 0.7rem;
      border-bottom: 1px solid var(--border-mid);
    }
    .guide-toc ol { list-style: none; padding: 0; margin: 0; }
    .guide-toc li { margin-bottom: 0.15rem; }
    .guide-toc a {
      display: flex; gap: 0.6rem; align-items: baseline;
      font-size: 0.83rem; line-height: 1.45; color: var(--gray-light);
      border: none; padding: 0.45rem 0.5rem; border-radius: 7px;
      transition: var(--transition);
    }
    .guide-toc a:hover { background: var(--surface-2); color: var(--white); }
    /* Chapitre en cours de lecture — classe posée par js/main.js */
    .guide-toc a.current { background: var(--surface-3); color: var(--white); }
    .guide-toc a.current .toc-num { color: var(--gold); }
    .toc-num {
      font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
      color: var(--purple-light); flex-shrink: 0; min-width: 1.4em;
    }
    .guide-toc-back {
      display: block; margin-top: 1rem; padding-top: 0.9rem;
      border-top: 1px solid var(--border-mid);
      font-size: 0.78rem; color: var(--gray); border-bottom: none;
    }
    .guide-toc-back:hover { color: var(--purple-light); }

    /* ── Résumé + chapitres ── */
    .guide-summary { margin-top: 0; }
    .guide-chapter { scroll-margin-top: 6rem; }
    .chapter-tag {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--gold);
      margin: 3rem 0 0.2rem;
    }
    .guide-chapter h2 {
      font-size: 1.65rem; margin: 0.3rem 0 1.2rem;
      padding-top: 0; border-top: none; scroll-margin-top: 6rem;
    }
    .guide-chapter:first-of-type .chapter-tag { margin-top: 2rem; }

    /* ── L'essentiel en bref ── */
    .guide-essentials {
      background: var(--surface); border: 1px solid var(--border-mid);
      border-radius: 14px; padding: 1.8rem 2rem; margin: 2.5rem 0;
    }
    .guide-essentials .ess-h {
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--purple-light);
      margin: 0 0 1.2rem; padding: 0; border: none;
    }
    .ess-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; }
    .ess-item { display: flex; flex-direction: column; gap: 0.25rem; }
    .ess-k {
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--gray);
    }
    .ess-v { font-size: 0.95rem; color: var(--white); font-weight: 600; line-height: 1.5; }

    /* ── Appel à l'action ── */
    .guide-cta {
      text-align: center; margin: 3.5rem 0; padding: 2.5rem;
      background: var(--surface-2); border: 1px solid var(--border-strong);
      border-radius: 16px;
    }
    .guide-cta h3 { margin-bottom: 0.6rem; }
    .guide-cta p { color: var(--gray-light); margin-bottom: 1.6rem; }
    .guide-cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    /* ── Aimant à prospects ──
       Placé après le dernier chapitre et avant le CTA commercial : le lecteur
       qui arrive là a fini sa lecture et cherche quoi faire ensuite. Le bloc
       propose un outil, pas une prestation — l'offre commerciale suit juste
       après, et deux demandes de la même nature côte à côte s'annulent. */
    .guide-lead-magnet { margin: 3rem 0 0; padding: 2rem 2.2rem; }
    .guide-lead-kicker {
      display: inline-block; margin-bottom: 0.6rem;
      font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
      font-weight: 700; color: var(--gold);
    }
    .guide-lead-magnet h3 { margin: 0 0 0.7rem; font-size: 1.22rem; }
    .guide-lead-magnet p { margin-bottom: 1.1rem; }
    .guide-lead-list { margin: 0 0 1.6rem; padding-left: 1.15rem; }
    .guide-lead-list li { margin-bottom: 0.42rem; color: var(--gray-light); font-size: 0.94rem; }
    [dir="rtl"] .guide-lead-list { padding-left: 0; padding-right: 1.15rem; }

    /* ── Aimant à prospects, format colonne (05/09/2026) ──
       Le bloc a quitté le bas de l'article pour la gouttière collante : il
       n'était vu que du lecteur allé au bout de 6 000 mots, alors que le
       carnet est ce qu'on emporte quand on ne lit pas tout. Le format suit la
       place : 280 px de large, trois arguments au plus, bouton pleine largeur
       comme les autres encadrés de la colonne.
       Le filet d'or porté par `border-inline-start` remplace l'aplat de
       `.highlight-box gold` : à cette largeur, un fond doré écraserait les
       deux encadrés qui suivent — l'or ne doit signaler qu'une chose à la
       fois dans une même colonne. `inline-start` suit le sens d'écriture,
       donc à droite en arabe, sans règle RTL supplémentaire.
       Les règles `.guide-lead-magnet` ci-dessus restent : elles décrivent le
       format pleine largeur, qu'un guide peut encore appeler. */
    .guide-lead-side {
      background: var(--surface-2); border-color: var(--border-strong);
      border-inline-start: 3px solid var(--gold);
    }
    .guide-lead-side .guide-lead-kicker { margin-bottom: 0.4rem; }
    .guide-lead-title {
      font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3;
      color: var(--white); margin: 0 0 0.55rem;
    }
    .guide-lead-side p { font-size: 0.85rem; color: var(--gray-light); margin-bottom: 0.9rem; }
    /* `ul { list-style: none }` est global (style.css) et n'est rétabli que
       dans `.article-body` : hors du corps d'article, la liste perdrait ses
       puces et les trois arguments se liraient comme un paragraphe haché. */
    .guide-lead-side .guide-lead-list {
      margin: 0 0 1.1rem; padding-left: 1.05rem; list-style: disc;
    }
    .guide-lead-side .guide-lead-list li { font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.35rem; }
    .guide-lead-side .guide-lead-list li::marker { color: var(--gold); }
    .guide-lead-side .btn { width: 100%; justify-content: center; font-size: 0.84rem; }

    /* ── Deux emplacements, un seul visible ──
       Sous 1200 px, `.guide-side` n'est plus une colonne : elle repasse en
       pleine largeur SOUS l'article, donc après la FAQ et les sources. Le
       carnet y serait plus bas qu'avant son déplacement — sur téléphone,
       c'est-à-dire sur la majorité des lectures. La page porte donc les deux
       blocs et ce basculement n'en montre qu'un : la colonne au-dessus de
       1200 px, la copie en ligne (après le 3e chapitre) en dessous. Le seuil
       est celui du gabarit, pas celui du téléphone : c'est à 1200 px que la
       colonne cesse d'exister, tablette comprise. */
    .guide-lead-inline { display: none; }
    @media (max-width: 1200px) {
      .guide-lead-inline { display: block; }
      .guide-side .guide-lead-side { display: none; }
    }

    /* ── Sources ── */
    .guide-sources {
      margin-top: 3rem; padding: 1.8rem 2rem;
      background: var(--surface); border: 1px solid var(--border-mid); border-radius: 12px;
    }
    .guide-sources h3 { margin-top: 0; font-size: 1.02rem; }
    .guide-sources ul { margin: 0; padding-left: 1.2rem; }
    .guide-sources li { font-size: 0.87rem; margin-bottom: 0.6rem; }
    .src-date { color: var(--gray); }

    /* ── Blocs de maillage ── */
    .internal-links-box {
      margin-top: 2rem; padding: 1.5rem;
      background: var(--surface); border: 1px solid var(--border-mid); border-radius: 12px;
    }
    .internal-links-box h4, .internal-links-box h3 { margin-bottom: 1rem; font-size: 0.95rem; color: var(--gold); }
    .internal-links-box ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; padding: 0; margin: 0; }

    /* ── Colonne latérale droite ── */
    .guide-side { position: sticky; top: 7rem; }
    .guide-side-cta { background: var(--surface-2); border-color: var(--border-strong); }
    .guide-side-cta p { font-size: 0.87rem; color: var(--gray-light); margin-bottom: 1.2rem; }
    .guide-side-cta .btn { width: 100%; justify-content: center; font-size: 0.84rem; }
    .guide-side-tel {
      display: block; margin-top: 1rem; text-align: center;
      font-size: 0.82rem; color: var(--purple-light); border: none;
    }

    /* ── Index des guides ── */
    .guide-index-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.6rem; padding-top: 1rem;
    }
    .guide-card {
      display: flex; flex-direction: column; gap: 0.7rem;
      background: var(--navy-mid); border: 1px solid var(--border-mid);
      border-radius: 14px; padding: 1.8rem; border-bottom: 1px solid var(--border-mid);
      transition: var(--transition);
    }
    .guide-card:hover { border-color: var(--purple); box-shadow: var(--shadow-card); transform: translateY(-3px); }
    .guide-card-icon { font-size: 1.9rem; color: var(--gold); }
    .guide-card h2 { font-size: 1.12rem; margin: 0; color: var(--white); line-height: 1.25; }
    .guide-card p { font-size: 0.9rem; color: var(--gray-light); margin: 0; line-height: 1.65; }
    .guide-card-foot {
      display: flex; justify-content: space-between; align-items: center;
      gap: 1rem; margin-top: auto; padding-top: 1rem;
      border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--gray);
    }
    .guide-card-cta { color: var(--purple-light); font-weight: 600; }
    .guide-empty { color: var(--gray-light); }

    /* ── Texte d'ouverture de l'index des guides ──
       Posé le 21/08/2026 : l'index annonçait cinq guides sans une ligne de
       texte propre — 248 mots en anglais, le listing le plus maigre du site,
       et le seul listing de la liste des pages explorées et non indexées.
       La largeur est calée sur .guide-lead pour que les deux blocs de texte
       de la page aient la même mesure. */
    .guide-index-intro {
      max-width: 780px; margin: 0 0 3rem;
      color: var(--gray-light); font-size: 0.97rem; line-height: 1.8;
    }
    .guide-index-intro p { margin: 0 0 1.05rem; }
    .guide-index-intro p:last-child { margin-bottom: 0; }
    .guide-index-intro strong { color: var(--white); font-weight: 600; }
    [dir="rtl"] .guide-index-intro { text-align: right; }

    /* ── RTL ── */
    [dir="rtl"] .guide-sources ul { padding-left: 0; padding-right: 1.2rem; }
    [dir="rtl"] .guide-toc a { text-align: right; }
    [dir="rtl"] .guide-card { text-align: right; }

    /* ── Adaptatif ──
       Sous 1200 px, le sommaire latéral cesse d'être une colonne et
       repasse en encadré au-dessus du texte : à cette largeur, trois
       colonnes réduisent la ligne de texte sous le seuil de lisibilité. */
    @media (max-width: 1200px) {
      .guide-layout { grid-template-columns: 220px minmax(0, 1fr); }
      .guide-side { position: static; grid-column: 1 / -1; }
      .guide-side .sidebar-widget { max-width: 100%; }
    }
    @media (max-width: 900px) {
      .guide-layout { grid-template-columns: 1fr; gap: 2rem; }
      .guide-toc-col { position: static; }
      .guide-toc { max-height: none; }
      .ess-grid { grid-template-columns: 1fr; }
    }