/* ═══════════════════════════════════════════════════════════════════════════════
   Kalq · les guides de Kalq Impôt
   Avis de CFE, avis de taxe foncière, espace professionnel de l'expert-comptable : des
   pages d'aide sourcées, qui répondent aux recherches réelles et mènent à l'extension.
   Elles prennent la mise en page des pages de texte (commun.css) et y ajoutent le fil
   d'Ariane, les repères de dates, le sommaire, les étapes numérotées, les tableaux et
   l'encart du cabinet. Chargée après commun.css.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ La page ═════════════════════════════════════════════════════════════════ */
.guide .article { max-width: 46rem; }
.guide h2 { scroll-margin-top: calc(var(--entete) + 16px); }
.guide-fil ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--texte-faible); }
.guide-fil li + li::before { content: "›"; margin-right: 10px; color: var(--texte-faible); }
.guide-fil a { color: var(--texte-doux); text-decoration: none; }
.guide-fil a:hover { color: var(--texte); text-decoration: underline; text-decoration-color: var(--accent); }
.guide-chapo { font-size: var(--t-l); line-height: 1.65; color: var(--texte); }
.guide-maj { font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--texte-faible); }
.guide .article a:not(.bouton) { color: var(--texte); text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ═══ Les repères ═════════════════════════════════════════════════════════════ */
/* Les dates qui comptent, en tête de page : ce qu'on vient chercher d'abord. */
.guide-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 1px; border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; background: var(--filet); }
.guide-reperes div { display: grid; align-content: start; gap: 6px; padding: 14px 16px; background: var(--fond-2); }
.guide-reperes dt { font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-texte); }
.guide-reperes dd { margin: 0; font-size: var(--t-s); line-height: 1.45; color: var(--texte); }

/* ═══ Le sommaire ═════════════════════════════════════════════════════════════ */
.guide-sommaire { padding: 16px 20px; border-left: 2px solid var(--accent); background: var(--fond-2); border-radius: 0 12px 12px 0; }
.guide-sommaire h2 { margin: 0 0 10px; font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.page-texte .guide-sommaire ol { display: grid; gap: 6px; padding-left: 1.4em; list-style: decimal; font-size: var(--t-s); }
.guide-sommaire li::marker { font-family: var(--police-mono); color: var(--accent-texte); }

/* ═══ Le texte ════════════════════════════════════════════════════════════════ */
/* Les étapes d'une démarche, numérotées comme dans l'espace professionnel. */
.page-texte .guide-etapes { display: grid; gap: 10px; padding-left: 1.6em; list-style: decimal; }
.guide-etapes li::marker { font-family: var(--police-mono); font-size: 0.85em; color: var(--accent-texte); }
.guide-note { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--filet); font-size: var(--t-s); color: var(--texte-doux); }
.guide strong { font-weight: 600; color: var(--texte); }

/* ═══ L'encart du cabinet ═════════════════════════════════════════════════════ */
/* Sur fond nuit dans les deux thèmes (classe nuit, commun.css, qui donne aussi ses
   boutons clairs), comme la carte de l'abonnement : c'est l'offre. */
.guide-cabinet {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; justify-items: start; margin-block: 8px;
  padding: clamp(22px, 3vw, 32px); border-radius: 20px; border: 1px solid rgba(236, 238, 232, 0.16);
}
.guide-cabinet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(111, 168, 232, 0.12), transparent 70%), repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
}
.guide-cabinet h2 { margin: 0; font-size: var(--t-xl); color: var(--nuit-texte); }
.page-texte .guide-cabinet p { color: var(--nuit-doux); }
.guide-cabinet .actions { margin-top: 4px; }

/* ═══ Les sources ═════════════════════════════════════════════════════════════ */
.page-texte .guide-sources { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; font-size: var(--t-s); }
.guide-avertissement { font-size: var(--t-s); color: var(--texte-faible); }

/* ═══ Impression ══════════════════════════════════════════════════════════════ */
@media print {
  .guide-cabinet, .guide-fil { display: none; }
}