/* 🧊 Kubeo — styles du socle. Les couleurs viennent de theme.css (--fond, --texte, --accent…)
   et de chaque bloc (--b-fond, --b-texte, --b-titres, --b-liens, --b-arrondi). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.k-corps {
  margin: 0; background: var(--fond, #fbf8f3); color: var(--texte, #2b2622);
  font: 1.0625rem/1.65 var(--police, Georgia, serif);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--b-liens, var(--accent)); text-underline-offset: .18em; }
h1, h2, h3, h4 { font-family: var(--police-titres, inherit); color: var(--b-titres, var(--titres)); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p, ul, ol, blockquote { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.k-in { width: min(100% - 2.5rem, var(--largeur, 1100px)); margin-inline: auto; }
.k-etroit { max-width: 42rem; }
.k-large { max-width: none; }

/* ---------- En-tête et menu ---------- */
.k-entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--texte) 8%, transparent); }
.k-avec-barre .k-entete { top: 2.4rem; }
.k-entete .k-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.2rem; }
.k-logo { font-family: var(--police-titres); font-size: 1.3rem; font-weight: 600; color: var(--titres); text-decoration: none; margin-right: auto; }
.k-logo img { max-height: 2.6rem; width: auto; }
.k-menu { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.k-menu a { color: var(--texte); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.k-menu a:hover, .k-menu a[aria-current] { border-bottom-color: var(--accent); }
.k-burger, .k-burger + label { display: none; }
@media (max-width: 720px) {
  .k-burger + label { display: block; width: 2.4rem; height: 2.4rem; cursor: pointer; position: relative; }
  .k-burger + label span, .k-burger + label span::before, .k-burger + label span::after { position: absolute; left: .5rem; right: .5rem; height: 2px; background: var(--titres); content: ""; transition: transform .2s; }
  .k-burger + label span { top: 50%; }
  .k-burger + label span::before { top: -7px; left: 0; right: 0; }
  .k-burger + label span::after { top: 7px; left: 0; right: 0; }
  .k-burger:checked + label span { background: transparent; }
  .k-burger:checked + label span::before { transform: translateY(7px) rotate(45deg); }
  .k-burger:checked + label span::after { transform: translateY(-7px) rotate(-45deg); }
  .k-entete .k-in { flex-wrap: wrap; }
  .k-menu { display: none; width: 100%; flex-direction: column; padding-bottom: 1rem; }
  .k-burger:checked ~ .k-menu { display: flex; }
}

/* ---------- Blocs ---------- */
.k-bloc { background: var(--b-fond, transparent); color: var(--b-texte, inherit); padding-block: 3.5rem; }
.k-bloc.k-marge-petite { padding-block: 1.5rem; }
.k-bloc.k-marge-grande { padding-block: 6rem; }
.k-bloc[style*="--b-fond"] + .k-bloc[style*="--b-fond"] { margin-top: 0; }
.k-bouton, .k-form button {
  display: inline-block; padding: .75em 1.6em; border-radius: var(--b-arrondi, var(--arrondi)); border: 2px solid var(--accent);
  background: var(--accent); color: var(--accent-encre); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.k-bouton:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--accent); }
.k-bouton.k-contour { background: transparent; color: var(--b-liens, var(--accent)); }
.k-arrondi { border-radius: var(--b-arrondi, var(--arrondi)); overflow: hidden; }

/* ---------- Pied ---------- */
.k-pied { padding: 2.5rem 0; font-size: .9rem; color: color-mix(in srgb, var(--texte) 70%, transparent); border-top: 1px solid color-mix(in srgb, var(--texte) 8%, transparent); }
.k-pied p { margin: 0; }

/* ---------- Formulaires simples (connexion, installation) ---------- */
.k-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.k-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.k-form input:not([type=checkbox]):not([type=radio]), .k-form select, .k-form textarea { font: inherit; font-weight: 400; padding: .7em .9em; border: 1px solid color-mix(in srgb, var(--texte, #333) 25%, transparent); border-radius: 10px; background: #fff; color: #222; }
.k-form textarea { resize: vertical; min-height: 6em; }
.k-form select:disabled { opacity: .55; }
.k-form label small { font-weight: 400; opacity: .75; }
.k-form .k-case { display: flex; align-items: center; gap: .6rem; font-weight: 400; }
.k-form button { justify-self: start; }
.k-alerte { background: #fde8e4; color: #8a2414; padding: .8em 1em; border-radius: 10px; }
.k-alerte-ok { background: #e3f4e5; color: #1f5c2a; }
.k-discret { font-size: .9rem; opacity: .7; margin-top: 1.2rem; }
.k-installation { --accent: #c8553d; --accent-encre: #fff; --titres: #1d1916; }

/* ---------- Barre admin ---------- */
.k-barre-admin { position: sticky; top: 0; z-index: 30; height: 2.4rem; display: flex; align-items: center; gap: 1.2rem; padding: 0 1rem; background: #1d1916; color: #f1e7da; font: 500 .85rem/1 system-ui, sans-serif; }
.k-barre-admin a, .k-barre-admin button { color: inherit; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: .4rem .2rem; }
.k-barre-admin a:hover, .k-barre-admin button:hover { color: #fff; }
.k-barre-admin form { margin-left: auto; }

/* ---------- Mode édition (marqueurs ; l'éditeur viendra s'y brancher) ---------- */
.k-edition [data-k-bloc] { position: relative; outline: 1px dashed transparent; outline-offset: -1px; transition: outline-color .15s; }
.k-edition [data-k-bloc]:hover { outline-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.k-edition .k-masque > :not(.k-tb) { opacity: .35; }
.k-bloc { scroll-margin-top: 5rem; }
.k-edition [data-k-vide]::before { content: "Cliquer pour écrire…"; opacity: .45; font-style: italic; }
.k-edition img[data-k-vide] { min-height: 8rem; background: repeating-linear-gradient(45deg, #0001 0 10px, #0002 10px 20px); }
.k-inconnu { padding: 1rem; border: 1px dashed #c33; color: #933; border-radius: 10px; font: .9rem system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.k-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }