/* kit-article.css — les styles de lecture du kit article.
 *
 * Posé par site dans /assets/<slug>/kit-article.css, jamais dans un chemin
 * commun : deux sites du parc ne doivent pas se relier en une requête.
 *
 * Tout est porté par la racine .ka-grille que pose KitArticle.astro. Rien ne
 * fuit hors de l'article : un thème qui aurait ses propres styles de article
 * garde les siens ailleurs.
 *
 * Les `!important` de la section « lecture » ne sont pas un tic : la plupart
 * des thèmes habillés imposent la taille de leurs titres en `!important`
 * (astro-citrus le fait) et les H2/H3 sortent alors à la taille du texte
 * courant, illisibles. C'est le défaut constaté le 24/09 sur la démo. Ils sont
 * cantonnés aux propriétés de lecture, jamais à la mise en page.
 *
 * Les couleurs viennent des jetons du site (da.css) : --c-primaire-texte,
 * --c-texte, --c-bord, --c-doux, --c-surface. Aucune teinte en dur.
 */

/* ───────────────────────── mise en page ───────────────────────── */

/* Le kit se règle sur la largeur de SON conteneur : posé dans la colonne étroite
   d'un thème qui a déjà sa barre latérale, il passe en une colonne. */
.ka-cadre { container-type: inline-size; }

.ka-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e6, 1.5rem);
  align-items: start;
  margin-block: var(--e5, 1.25rem) var(--e8, 4rem);
  font-family: var(--f-texte, system-ui, sans-serif);
  color: var(--c-texte, #1a1a1a);
}

.ka-corps {
  min-width: 0;
  max-width: var(--largeur, 68ch);
}

/* Sous 1100 px, la colonne n'a plus la place d'être une colonne : elle passe
   SOUS l'article, dans l'ordre du document (corps, puis colonne). C'est ce que
   demande la barre latérale du chantier : sur un téléphone, la lecture d'abord,
   le sommaire, les plus lus et l'appel à l'action ensuite. */
.ka-cote { display: block; }

@container (min-width: 1000px) {
  .ka-grille {
    grid-template-columns: minmax(0, var(--largeur, 68ch)) minmax(15rem, 18rem);
    justify-content: center;
    gap: var(--e8, 4rem);
  }
  .ka-cote-in { position: sticky; top: calc(var(--header-h, 72px) + var(--e4, 1rem)); }
}

/* ───────────────────────── progression de lecture ───────────────────────── */

.ka-progres {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.ka-progres-jauge {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-primaire, #333);
  transition: width .1s linear;
}

.ka-restant:empty { display: none; }
.ka-restant {
  background: var(--c-primaire, #222) !important;
  color: var(--c-sur-primaire, #fff) !important;
  border-radius: 999px;
  position: fixed;
  top: calc(var(--header-h, 72px) + 10px);
  right: 14px;
  z-index: 200;
  margin: 0;
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-fond, #fff);
  background: var(--c-texte, #1a1a1a);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.ka-restant[data-ka-actif] { opacity: .92; }

/* ───────────────────────── en-tête : note et crédibilité ───────────────────────── */

.ka-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3, .75rem) var(--e5, 1.25rem);
  margin: 0 0 var(--e6, 1.5rem);
  padding-bottom: var(--e4, 1rem);
  border-bottom: 1px solid var(--c-bord, #e5e5e5);
}

.ka-note-box { display: flex; align-items: center; gap: .5rem; }
.ka-etoiles { display: inline-flex; gap: 2px; color: var(--c-primaire, #333); }
.ka-etoile { width: 1.05em; height: 1.05em; display: block; }
.ka-note-t { margin: 0; font-size: .85rem; color: var(--c-texte-2, #555); }
.ka-note-v { font-size: 1rem; color: var(--c-texte, #1a1a1a); }
.ka-note-sur { margin-inline: .25rem .5rem; }
.ka-note-n { white-space: nowrap; }

.ka-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2, .5rem) var(--e4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--c-texte-2, #555);
}
.ka-stat { display: inline-flex; align-items: center; gap: .35rem; }
.ka-ico { width: 1em; height: 1em; flex: none; }
.ka-stat-v { font-weight: 700; color: var(--c-texte, #1a1a1a); }

.ka-maj {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-primaire-texte, #333);
}
.ka-maj-haut { flex-basis: 100%; }
.ka-cta .ka-ico, .ka-auteur .ka-ico, .ka-lies .ka-ico { vertical-align: -.15em; }

/* ───────────────────────── sommaire ───────────────────────── */

.ka-sommaire {
  padding: var(--e4, 1rem);
  background: var(--c-surface, #fafafa);
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-carte, 8px);
}
.ka-som-titre {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 var(--e3, .75rem);
  font-family: var(--f-titre, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-2, #555);
}
.ka-som-liste { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ka-som-l { margin: 0; }
.ka-som-n3 .ka-som-a { padding-left: var(--e5, 1.25rem); font-size: .82rem; }
.ka-som-a {
  display: flex;
  gap: .5rem;
  padding: .3rem .4rem;
  border-radius: var(--r-bouton, 6px);
  font-size: .86rem;
  line-height: 1.35;
  color: var(--c-texte-2, #555);
  text-decoration: none;
}
.ka-som-a:hover { background: var(--c-doux, #eee); color: var(--c-sur-doux, #111); }
.ka-som-a[aria-current="true"] {
  color: var(--c-primaire-texte, #333);
  font-weight: 600;
  background: var(--c-doux, #eee);
}
.ka-som-num {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.6;
  color: var(--c-primaire-texte, #333);
  opacity: .8;
}

@container (max-width: 999px) {
  /* La colonne est sous l'article : c'est elle qui se détache du corps, pas
     chacun de ses blocs. */
  .ka-cote { margin-top: var(--e6, 1.5rem); }
  .ka-som-a { padding-block: .35rem; }
}

/* ───────────────────────── appel à l'action ───────────────────────── */

.ka-cta {
  margin-top: var(--e4, 1rem);
  padding: var(--e4, 1rem);
  background: var(--c-doux, #f2f2f2);
  border-radius: var(--r-carte, 8px);
  color: var(--c-sur-doux, #111);
}
.ka-cta-t {
  margin: 0 0 .3rem;
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
  font-size: 1rem;
}
.ka-cta-p { margin: 0 0 .75rem; font-size: .85rem; }
.ka-cta-b {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--btn-texte, #fff);
  background: var(--btn-fond, #333);
  border: var(--btn-bord, 0 solid transparent);
  border-radius: var(--r-bouton, 6px);
}
.ka-cta-b .ka-ico { width: 1em; height: 1em; }

/* ───────────────────────── encadré auteur ───────────────────────── */

.ka-auteur {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--e4, 1rem);
  margin: var(--e8, 4rem) 0 var(--e6, 1.5rem);
  padding: var(--e5, 1.25rem);
  background: var(--c-surface, #fafafa);
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-carte, 8px);
}
.ka-auteur-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--c-doux, #eee);
}
.ka-auteur-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-texte-2, #555);
}
.ka-auteur-vide .ka-ico { width: 2rem; height: 2rem; }
.ka-auteur-corps { min-width: 0; }
.ka-auteur-k {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-2, #555);
}
.ka-auteur-n {
  margin: 0;
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
  font-size: 1.1rem;
}
.ka-auteur-r { margin: .1rem 0 .15rem; font-size: .82rem; color: var(--c-primaire-texte, #333); font-weight: 600; }
/* La spécialité reste affichée sous le rôle : la phrase dit la personne, la
   spécialité dit le domaine, et l'encadré ne perd pas ce que la bio disait. */
.ka-auteur-s { margin: 0 0 .5rem; font-size: .8rem; color: var(--c-texte-2, #555); }
.ka-auteur-b { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.55; color: var(--c-texte-2, #555); }
.ka-auteur-lien {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-primaire-texte, #333);
}
.ka-auteur-lien .ka-ico { width: 1em; height: 1em; }

/* ───────────────────────── articles liés ───────────────────────── */

.ka-lies { margin-top: var(--e8, 4rem); }
.ka-lies-t {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 var(--e4, 1rem);
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
  font-size: 1.15rem;
}
.ka-lies-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e4, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ka-lie { margin: 0; }
.ka-lie-a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--carte-fond, #fff);
  border: var(--carte-bord, 1px solid var(--c-bord, #e5e5e5));
  border-radius: var(--r-carte, 8px);
  box-shadow: var(--o-carte, none);
}
.ka-lie-a:hover { box-shadow: var(--o-survol, none); }
.ka-lie-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ka-lie-corps { display: flex; flex-direction: column; gap: .35rem; padding: var(--e3, .75rem); }
.ka-lie-t {
  font-family: var(--f-titre, inherit);
  font-size: .95rem;
  font-weight: var(--f-graisse-titre, 700);
  line-height: 1.3;
  color: var(--carte-encre, #1a1a1a);
}
.ka-lie-m { font-size: .76rem; color: var(--carte-encre-2, #666); }

/* ───────────────────────── plus lus cette semaine ─────────────────────────
   Second bloc du même conteneur sticky, sous le sommaire : même cadre que lui,
   même surface, pour que la colonne se lise comme un seul objet. */

.ka-plus-lus {
  margin-top: var(--e4, 1rem);
  padding: var(--e4, 1rem);
  background: var(--c-surface, #fafafa);
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-carte, 8px);
}
.ka-pl-titre {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 var(--e3, .75rem);
  font-family: var(--f-titre, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-2, #555);
}
.ka-pl-liste { margin: 0; padding: 0; list-style: none; }
.ka-pl-l { margin: 0; border-top: 1px solid var(--c-bord, #e5e5e5); }
.ka-pl-l:first-child { border-top: 0; }
.ka-pl-a {
  display: flex;
  gap: .6rem;
  padding: .55rem 0;
  text-decoration: none;
  color: inherit;
}
.ka-pl-a:hover .ka-pl-t { color: var(--c-primaire-texte, #333); }
.ka-pl-num {
  flex: none;
  font-family: var(--f-titre, inherit);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-primaire-texte, #333);
  opacity: .55;
}
.ka-pl-corps { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ka-pl-t { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.ka-pl-m {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--c-texte-2, #555);
}
.ka-pl-m .ka-ico { width: .95em; height: .95em; }

/* ───────────────────────── bloc de vote ───────────────────────── */

.ka-vote {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--e5, 1.25rem);
  align-items: center;
  margin: var(--e8, 4rem) 0 var(--e6, 1.5rem);
  padding: var(--e5, 1.25rem) var(--e6, 1.5rem);
  background: var(--c-doux, #f2f2f2);
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-carte, 8px);
}
.ka-vote-sur {
  margin: 0 0 .2rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-primaire-texte, #333);
}
.ka-vote-t {
  margin: 0 0 .6rem;
  font-family: var(--f-titre, inherit);
  font-size: 1.2rem;
  font-weight: var(--f-graisse-titre, 700);
  color: var(--c-sur-doux, #111);
}
.ka-vote-courant { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ka-vote-courant .ka-etoiles { color: var(--c-primaire, #333); }
.ka-vote-resume {
  margin: 0;
  font-size: .85rem;
  color: var(--c-sur-doux, #111);
  opacity: .75;
}
.ka-vote-resume b { font-weight: 700; opacity: 1; }
.ka-vote-sur5 { margin-inline: .2rem .6rem; }
.ka-vote-action {
  text-align: center;
  padding-left: var(--e4, 1rem);
  border-left: 1px dashed var(--c-bord, #e5e5e5);
}
.ka-vote-lab { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .5rem; color: var(--c-sur-doux, #111); opacity: .8; }
/* Ordre 5 → 1 dans le DOM, remis à l'endroit par row-reverse : le survol et
   l'état « voté » du bouton cliqué éclairent, par sélecteur de voisins, les
   étoiles qui le suivent dans le DOM, donc celles qui sont à sa gauche. */
.ka-vote-etoiles { display: inline-flex; flex-direction: row-reverse; gap: 2px; justify-content: center; }
.ka-vote-etoile {
  padding: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--c-texte, #1a1a1a) 22%, transparent);
  transition: transform .15s, color .15s;
}
.ka-vote-etoile svg { width: 26px; height: 26px; display: block; fill: currentColor; }
.ka-vote-etoiles .ka-vote-etoile:hover,
.ka-vote-etoiles .ka-vote-etoile:hover ~ .ka-vote-etoile,
.ka-vote-etoile.ka-vote-fait,
.ka-vote-etoile.ka-vote-fait ~ .ka-vote-etoile { color: var(--c-primaire, #333); }
.ka-vote-etoile:hover { transform: scale(1.12); }
.ka-vote-etoile:focus-visible { outline: 2px solid var(--c-primaire-texte, #333); outline-offset: 2px; }
.ka-vote-merci {
  min-height: 1.2em;
  margin: .5rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--c-primaire-texte, #333);
}

/* ───────────────────────── commentaires ───────────────────────── */

.ka-com {
  margin-top: var(--e8, 4rem);
  padding-top: var(--e6, 1.5rem);
  border-top: 1px solid var(--c-bord, #e5e5e5);
}
.ka-com-t {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 var(--e3, .75rem);
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
  font-size: 1.15rem;
}
.ka-com-vide { margin: 0 0 var(--e5, 1.25rem); font-size: .9rem; color: var(--c-texte-2, #555); }
.ka-com-form { display: block; }
/* Pot de miel : hors écran, jamais caché en display:none (un robot le repère). */
.ka-com-miel {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.ka-com-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4, 1rem); }
.ka-com-ch { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 var(--e4, 1rem); }
.ka-com-ch label { font-size: .82rem; font-weight: 600; color: var(--c-texte-2, #555); }
.ka-com-ch input,
.ka-com-ch textarea {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .92rem;
  color: var(--c-texte, #1a1a1a);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-bouton, 6px);
}
.ka-com-ch textarea { resize: vertical; min-height: 7rem; }
.ka-com-ch input:focus,
.ka-com-ch textarea:focus { outline: 2px solid var(--c-primaire, #333); outline-offset: 1px; }
.ka-com-consentement { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 var(--e4, 1rem); font-size: .84rem; color: var(--c-texte-2, #555); }
.ka-com-consentement input { margin-top: .2rem; flex: none; }
.ka-com-consentement a { color: var(--lien-couleur, var(--c-primaire-texte, #333)); }
.ka-com-statut { min-height: 1.2em; margin: 0 0 var(--e3, .75rem); font-size: .88rem; font-weight: 600; color: var(--c-texte-2, #555); }
.ka-com-statut[data-ka-etat="ok"] { color: var(--c-primaire-texte, #333); }
.ka-com-envoyer {
  padding: .6rem 1.1rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-sur-primaire, #fff);
  background: var(--c-primaire, #333);
  border: 0;
  border-radius: var(--r-bouton, 6px);
  cursor: pointer;
}
.ka-com-envoyer:hover { filter: brightness(1.08); }

/* ───────────────────────── lecture du corps ───────────────────────── */

.ka-corps p {
  margin: 0 0 var(--e4, 1rem) !important;
  font-size: 1.02em !important;
  line-height: 1.72 !important;
}

/* Le défaut constaté : les H2/H3 du thème prennent la taille du texte courant. */
html body .ka-corps h2,
html body .ka-corps h3,
html body .ka-corps h4 {
  font-family: var(--f-titre, inherit) !important;
  font-weight: var(--f-graisse-titre, 700) !important;
  color: var(--c-texte, #1a1a1a) !important;
  line-height: 1.25 !important;
  scroll-margin-top: calc(var(--header-h, 72px) + var(--e4, 1rem));
}
html body .ka-corps h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem) !important;
  margin: var(--e8, 3rem) 0 var(--e4, 1rem) !important;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--c-bord, #e5e5e5);
}
html body .ka-corps h2::before {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-right: .5rem;
  vertical-align: .08em;
  border-radius: 50%;
  background: var(--c-primaire, #333);
}
html body .ka-corps h3 {
  font-size: clamp(1.1rem, .98rem + .6vw, 1.28rem) !important;
  margin: var(--e6, 2rem) 0 var(--e3, .75rem) !important;
}
html body .ka-corps h4 {
  font-size: 1em !important;
  margin: var(--e5, 1.25rem) 0 var(--e2, .5rem) !important;
}
/* Le premier titre n'a pas à repousser le haut de l'article. */
html body .ka-entete + h2, html body .ka-entete + h3, html body .ka-grille h2:first-child, html body .ka-grille h3:first-child {
  margin-top: 0 !important;
}

.ka-corps ul, .ka-corps ol {
  margin: 0 0 var(--e4, 1rem) !important;
  padding-left: 1.4em !important;
  line-height: 1.7 !important;
}
.ka-corps li { margin-bottom: .4em !important; }
.ka-corps li::marker { color: var(--c-primaire-texte, #333); font-weight: 700; }

.ka-corps blockquote {
  margin: var(--e6, 2rem) 0 !important;
  padding: var(--e3, .75rem) 0 var(--e3, .75rem) var(--e5, 1.25rem) !important;
  border-left: 4px solid var(--c-primaire, #333) !important;
  font-family: var(--f-titre, inherit);
  font-size: 1.15em !important;
  font-style: italic;
  line-height: 1.5 !important;
  color: var(--c-texte, #1a1a1a) !important;
}
.ka-corps blockquote p:last-child { margin-bottom: 0 !important; }

/* Tableaux : le kit est le seul endroit qui les style (la référence n'en a aucun). */
.ka-corps table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: var(--e5, 1.25rem) 0 !important;
  font-size: .92em !important;
}
.ka-corps th, .ka-corps td {
  padding: .55rem .7rem !important;
  border: 1px solid var(--c-bord, #e5e5e5) !important;
  text-align: left;
  vertical-align: top;
}
.ka-corps th {
  background: var(--c-doux, #f2f2f2) !important;
  color: var(--c-sur-doux, #111) !important;
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
}
.ka-corps tbody tr:nth-child(even) td { background: var(--c-fond-2, #fafafa); }
/* Le défilement horizontal est posé par le JavaScript, qui enveloppe le
   tableau : passer le tableau lui-même en `display:block` casserait
   l'alignement entre l'en-tête et les lignes. */
.ka-tableau {
  margin: var(--e5, 1.25rem) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ka-tableau table { margin: 0 !important; min-width: 34rem; }

.ka-corps img { max-width: 100%; height: auto; border-radius: var(--r-image, 8px); }
.ka-corps pre {
  margin: var(--e5, 1.25rem) 0 !important;
  padding: var(--e4, 1rem) !important;
  overflow-x: auto;
  background: var(--c-fond-2, #f5f5f5) !important;
  border: 1px solid var(--c-bord, #e5e5e5);
  border-radius: var(--r-carte, 8px) !important;
  font-size: .9em !important;
}
.ka-corps code {
  padding: .1em .35em;
  background: var(--c-doux, #f2f2f2);
  border-radius: 4px;
  font-size: .92em;
}
.ka-corps pre code { padding: 0; background: none; }
.ka-corps hr {
  margin: var(--e8, 4rem) auto !important;
  border: 0;
  border-top: 1px solid var(--c-bord, #e5e5e5);
  width: 40%;
}
.ka-corps a {
  color: var(--lien-couleur, var(--c-primaire-texte, #333)) !important;
  text-decoration: var(--lien-deco, underline) !important;
  text-underline-offset: .18em;
}

/* Encadrés produits par la rédaction (`> **À retenir**` ou blockquote seul). */
.ka-encadre {
  margin: var(--e6, 2rem) 0;
  padding: var(--e4, 1rem) var(--e5, 1.25rem);
  background: var(--c-doux, #f2f2f2);
  border-left: 4px solid var(--c-primaire, #333);
  border-radius: 0 var(--r-carte, 8px) var(--r-carte, 8px) 0;
  color: var(--c-sur-doux, #111);
}
.ka-encadre-t {
  margin: 0 0 .35rem;
  font-family: var(--f-titre, inherit);
  font-weight: var(--f-graisse-titre, 700);
}
.ka-encadre p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  /* Le bloc de vote et les deux champs côte à côte n'ont plus la place : le
     vote passe sous la note (filet horizontal au lieu du filet vertical). */
  .ka-vote { grid-template-columns: 1fr; gap: var(--e4, 1rem); }
  .ka-vote-action {
    padding-left: 0;
    padding-top: var(--e4, 1rem);
    border-left: 0;
    border-top: 1px dashed var(--c-bord, #e5e5e5);
  }
  .ka-com-champs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ka-auteur { grid-template-columns: 56px minmax(0, 1fr); }
  .ka-auteur-img { width: 56px; height: 56px; }
  .ka-lies-liste { grid-template-columns: 1fr; }
  .ka-restant { top: auto; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ka-progres-jauge, .ka-restant { transition: none; }
}

/* Un seul sommaire par page : si le thème a déjà le sien, celui du kit se retire. */
html:has(:is([class~="toc"], [class*="toc-"], [class*="-toc"], [id~="toc"], [class*="sommaire"]):not([class*="ka-"])) .ka-sommaire {
  display: none;
}