/* KommIA : guide « La semaine Instagram en 30 minutes », chargé après site.css. Le texte du guide d'origine est repris
   (seules les mentions de la masterclass passée sont retirées) ; ses classes d'origine sont restylées. Haut centré, sommaire
   collant à gauche suivi par site.js (data-toc), article en colonne de lecture, grille imprimable, appel final commun. */
section[id], .g-article h2[id], .g-grille { scroll-margin-top: calc(var(--nav-h) + 24px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--violet-ink); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #876AFF, #168EFF); box-shadow: 0 0 0 4px rgba(135, 106, 255, 0.14); }
@keyframes gu-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Barre de progression de lecture, en haut de l'écran */
.g-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 0; height: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #168EFF, #876AFF); transition: width 100ms linear; }

/* ────── Haut de page ────── */
.ghero { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 7vw, 104px) var(--gutter) clamp(40px, 5vw, 72px); text-align: center; }
.ghero .kicker { animation: gu-up 800ms var(--ease-out) both 40ms; }
.ghero__title { margin: 0 auto; max-width: 14ch; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.2rem); font-weight: 620; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; animation: gu-up 900ms var(--ease-out) both 120ms; }
.ghero__lead { margin: 24px auto 0; max-width: 40rem; font-size: 1.15rem; line-height: 1.65; color: var(--ink-70); text-wrap: pretty; animation: gu-up 900ms var(--ease-out) both 240ms; }
.ghero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; color: var(--ink-60); animation: gu-up 900ms var(--ease-out) both 360ms; }
.ghero__meta > * { display: inline-flex; align-items: center; gap: 8px; }
.ghero__meta > * + *::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); opacity: 0.6; }
.ghero__meta a { color: var(--violet-ink); font-weight: 600; text-underline-offset: 3px; }

/* ────── Sommaire et colonne de lecture ────── */
.guide { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 64px; justify-content: center; }
.gtoc__inner { position: sticky; top: calc(var(--nav-h) + 32px); }
.gtoc__label { margin-bottom: 14px; padding-left: 18px; font-size: 13px; font-weight: 600; color: var(--ink-60); }
.gtoc__list { list-style: none; margin: 0; padding: 0; counter-reset: gt; position: relative; }
.gtoc__list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(14, 14, 20, 0.12), rgba(14, 14, 20, 0.12) 80%, transparent); }
.gtoc__list a { position: relative; display: flex; gap: 10px; padding: 9px 0 9px 18px; font-size: 14px; line-height: 1.4; color: var(--ink-60); text-decoration: none; transition: color 200ms var(--ease-out); }
.gtoc__list a::before { counter-increment: gt; content: counter(gt, decimal-leading-zero); flex: none; font-size: 12px; font-weight: 650; color: rgba(14, 14, 20, 0.35); font-variant-numeric: tabular-nums; line-height: 1.6; }
.gtoc__list a::after { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #168EFF, #876AFF); opacity: 0; transition: opacity 250ms var(--ease-out); }
.gtoc__list a:hover { color: var(--ink); }
.gtoc__list a[aria-current] { color: var(--ink); font-weight: 600; }
.gtoc__list a[aria-current]::before { color: var(--violet); }
.gtoc__list a[aria-current]::after { opacity: 1; }

/* ────── L'article ────── */
.g-article { counter-reset: gsec; }
.g-article h2 { position: relative; margin: 56px 0 16px; padding-top: 28px; font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.1rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; text-wrap: balance; }
.g-article h2:first-of-type { margin-top: 0; padding-top: 0; }
.g-article h2:not(:first-of-type)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(14, 14, 20, 0.12), rgba(14, 14, 20, 0.12) 60%, transparent); }
.g-article h2::before { counter-increment: gsec; content: counter(gsec, decimal-leading-zero); display: block; width: fit-content; margin-bottom: 10px; font-size: 14px; font-weight: 650; letter-spacing: 0.02em; color: var(--violet); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .g-article h2::before { background: linear-gradient(135deg, #168EFF, #876AFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.g-article h3 { margin: 32px 0 10px; font-size: 1.2rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3; color: var(--violet-ink); }
.g-article p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: var(--ink-70); text-wrap: pretty; }
.g-article strong { font-weight: 600; color: var(--ink); }
/* Listes : numéros en pastilles dégradées, puces en points violets */
.g-article ol, .g-article ul { list-style: none; margin: 14px 0 20px; padding: 0; }
.g-article ol { counter-reset: gi; }
.g-article ol li, .g-article ul li { position: relative; margin-bottom: 12px; padding-left: 36px; font-size: 17px; line-height: 1.65; color: var(--ink-70); }
.g-article ol li::before { counter-increment: gi; content: counter(gi); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #168EFF, #876AFF); color: #fff; font-size: 12.5px; font-weight: 650; }
.g-article ul li::before { content: ''; position: absolute; left: 9px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
/* Tableau des 5 postes : ouvert, des filets, l'en-tête en petit */
.g-table { width: 100%; margin: 22px 0 24px; border-collapse: collapse; font-size: 15.5px; }
.g-table thead th { padding: 0 14px 12px 0; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--violet-ink); border-bottom: 1px solid rgba(135, 106, 255, 0.35); }
.g-table tbody td { padding: 14px 14px 14px 0; vertical-align: top; line-height: 1.5; color: var(--ink-70); border-bottom: 1px solid var(--line); }
.g-table tbody td:first-child { color: var(--ink); font-weight: 500; }
/* L'astuce : un fond bleu qui s'efface vers la droite, un filet à gauche */
.g-astuce { margin: 26px 0; padding: 20px 24px; border-left: 2px solid #168EFF; background: linear-gradient(90deg, rgba(22, 142, 255, 0.08), rgba(22, 142, 255, 0) 90%); font-size: 16.5px; line-height: 1.7; color: var(--ink-70); }
.g-astuce-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 650; color: #1170CC; }
/* Les 4 étapes de création : des lignes ouvertes, numérotées, séparées par des filets */
.g-steps { margin: 18px 0 22px; counter-reset: gst; }
.g-step { position: relative; padding: 22px 0 20px 52px; }
.g-step + .g-step::before { content: ''; position: absolute; left: 52px; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(14, 14, 20, 0.12), rgba(14, 14, 20, 0.12) 60%, transparent); }
.g-step::after { counter-increment: gst; content: counter(gst); position: absolute; left: 0; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(135, 106, 255, 0.12); color: var(--violet-ink); font-size: 14px; font-weight: 650; }
.g-step__title { margin: 0 0 8px !important; font-size: 1.1rem !important; font-weight: 620; letter-spacing: -0.02em; line-height: 1.3 !important; color: var(--ink) !important; }
.g-step p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; }
.g-step p:last-child { margin-bottom: 0; }
.g-step__pro { color: var(--ink-60) !important; }
/* Le lien vers la grille et le bouton d'impression, au dessin des boutons du site */
.g-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 16px 32px -18px rgba(52, 36, 130, 0.7); transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.g-cta:hover { background: #26262E; }
.g-cta:active { transform: scale(0.98); }
.g-sources { margin-top: 36px; padding-top: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-60); background: linear-gradient(90deg, rgba(14, 14, 20, 0.12), transparent) left top / 100% 1px no-repeat; }

/* L'appel intégré au texte, au moment où le guide dit que l'exécution est un mur : la preuve de Gaby, puis le bouton */
.g-apply { margin: 8px 0 12px; }
.g-apply .proof { margin-top: 28px; }
.g-apply__cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.g-apply__cta p { margin: 0 !important; font-size: 17px; font-weight: 600; color: var(--ink) !important; }
/* Le lien vers la grille : un simple lien, pour que le seul bouton noir de l'article soit l'essai */
.g-tolink { font-size: 16px; font-weight: 600; }

/* ────── La grille à imprimer : une fiche en pointillés, comme à découper ────── */
.g-grille { margin-top: 44px; padding: clamp(24px, 4vw, 40px); border: 1.5px dashed rgba(135, 106, 255, 0.7); border-radius: 24px; background: #fff; }
.g-grille h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 620; letter-spacing: -0.035em; }
.g-sub { margin-bottom: 24px; font-size: 14.5px; color: var(--ink-60); }
.g-bloc { margin-bottom: 22px; }
.g-t { margin-bottom: 10px; font-size: 13.5px; font-weight: 650; color: var(--violet-ink); }
.g-line { margin-bottom: 9px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.g-chk { display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border: 1.5px solid var(--violet); border-radius: 5px; }
.g-fill { color: rgba(14, 14, 20, 0.4); }
.g-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-60); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Le QR code du pied de grille, imprimé avec elle : la feuille affichée ramène vers l'app */
.g-qr { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.g-qr__frame { display: block; width: 72px; height: 72px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(135, 106, 255, 0.25); }
.g-qr__code { display: block; width: 100%; height: 100%; }
.g-qr__text { max-width: 7.5rem; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ink); }
@media screen { .store-cta .g-qr { display: none; } }

/* ────── Tablette et téléphone ────── */
@media (max-width: 1023px) {
  .guide { grid-template-columns: minmax(0, 700px); }
  .gtoc { display: none; }
}
@media (max-width: 899px) {
  .ghero { padding-top: 32px; }
}
@media (max-width: 600px) {
  .g-table thead { display: none; }
  .g-table, .g-table tbody, .g-table tr, .g-table td { display: block; width: 100%; }
  .g-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .g-table tbody td { padding: 2px 0; border: 0; }
  .g-step { padding-left: 44px; }
  .g-step + .g-step::before { left: 44px; }
  .g-step::after { width: 28px; height: 28px; font-size: 13px; }
  .g-foot { flex-direction: column; align-items: flex-start; }
  .g-apply__cta .btn { width: 100%; justify-content: space-between; }
}

/* ────── Impression : seule la grille sort ────── */
@media print {
  body * { visibility: hidden; }
  .g-grille, .g-grille * { visibility: visible; }
  .g-grille { position: absolute; left: 0; top: 0; width: 100%; margin: 0; border: none; }
  .g-print, .g-progress { display: none !important; }
}

/* ────── Mouvement réduit ────── */
@media (prefers-reduced-motion: reduce) {
  .ghero .kicker, .ghero__title, .ghero__lead, .ghero__meta { animation: none; }
  .g-progress { transition: none; }
}