/* Service links and the horizon line; scoped independently of page templates. */
#kh-page-top { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.kh-site-footer {
  --kh-footer-line: rgba(26, 20, 16, .18);
  background: var(--kh-washi, #f8f4ee);
  color: var(--kh-sumi, #1a1410);
  font-family: var(--kh-font-ui, "DM Sans", sans-serif);
  font-weight: 400;
  border-top: 1px solid var(--kh-footer-line);
}
.kh-footer-container { width: min(100% - 64px, 1280px); margin-inline: auto; }
.kh-footer-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 48px;
  padding-block: 28px;
}
/* Ordinateur (Alain, 2026-10-13) : Informations prend la largeur de ses cinq liens, sur une ligne (« Contact » ne
   passe plus dessous), au centre comme les liens légaux de la ligne d'horizon ; Professionnels calé à droite, sous la
   flèche de retour en haut. */
@media (min-width: 1024px) {
  .kh-footer-services { grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); }
  .kh-footer-services > .kh-footer-group:last-child { justify-self: end; }
}
/* Footer plus bas (Alain, 2026-10-05) : titres en vermillon, petites capitales comme les repères de l'accueil ;
   liens en ligne sous chaque titre (comme en mobile) ; ligne d'horizon à 72 px (charte : 72-96 px). */
.kh-site-footer h2 {
  margin: 0 0 4px;
  color: var(--kh-vermillon, #c8311a);
  font: 500 12px/1.4 var(--kh-font-ui, "DM Sans", sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kh-footer-group ul { display: flex; flex-wrap: wrap; column-gap: 22px; }
.kh-site-footer ul { list-style: none; padding: 0; margin: 0; }
.kh-site-footer li { margin: 0; padding: 0; }
.kh-site-footer a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  text-underline-offset: 5px;
  font-size: 14px;
  line-height: 1.5;
}
.kh-site-footer a:hover, .kh-site-footer a[aria-current="true"] {
  color: var(--kh-vermillon, #c8311a);
  text-decoration: underline;
}
.kh-site-footer a:focus-visible {
  outline: 2px solid var(--kh-vermillon, #c8311a);
  outline-offset: 4px;
}
/* « La Boutique » : ses cinq mondes s'ouvrent au-dessus d'elle, comme sous « Boutique » dans le header (Alain,
   2026-10-08 : le footer reste tel quel). Survol à la souris, flèche au clavier, premier toucher sur mobile (footer.js).
   Même liste que le header (header.css .kh-subnav), posée sur le papier et ouverte vers le haut (vers le bas sur
   mobile, plus bas). */
.kh-site-footer .has-subnav { position: relative; display: inline-flex; align-items: flex-start; } /* en haut, comme les liens voisins */
.kh-footer-unfold { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.kh-site-footer .kh-footer-unfold:is(:hover, :focus, :active) { background: none; box-shadow: none; color: inherit; } /* pas le bouton or de Kadence */
.kh-site-footer .has-subnav:is(:hover, .is-open) .kh-footer-unfold { color: var(--kh-vermillon, #c8311a); }
.kh-footer-unfold svg { transition: transform 200ms ease; }
.kh-site-footer .has-subnav.is-open .kh-footer-unfold svg { transform: rotate(180deg); }
.kh-footer-unfold:focus-visible { outline: 2px solid var(--kh-vermillon, #c8311a); outline-offset: 2px; }
.kh-site-footer .kh-subnav { display: block; top: auto; bottom: 100%; left: 0; z-index: 20; background: var(--kh-washi, #f8f4ee); box-shadow: 0 -10px 28px rgb(26 20 16 / .08); transform: translateY(4px); }
.kh-site-footer .kh-subnav::before { display: none; }
@media (hover: hover) {
  .kh-site-footer .has-subnav:hover > .kh-subnav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
}
.kh-site-footer .has-subnav.is-open > .kh-subnav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.kh-site-footer .has-subnav.is-dismissed > .kh-subnav { opacity: 0; visibility: hidden; pointer-events: none; }
.kh-site-footer .kh-subnav a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; min-height: 0; padding: .5rem 1.25rem; color: var(--kh-sumi, #1a1410); font-size: inherit; text-decoration: none; }
.kh-site-footer .kh-subnav a:is(:hover, :focus-visible), .kh-site-footer .kh-subnav [aria-current] { color: var(--kh-vermillon, #c8311a); text-decoration: none; }
.kh-site-footer .kh-subnav__all a { justify-content: flex-start; font-size: 11px; }
.kh-footer-rule { border-top: 1px solid var(--kh-footer-line); }
.kh-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
/* Souris : cibles de 32 px suffisent ; le tactile garde 44 px. */
@media (hover: hover) and (pointer: fine) { .kh-site-footer .kh-footer-group a { min-height: 32px; } }
.kh-footer-copyright { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 13px; line-height: 1.6; }
/* Sceau d'Alain Herbinière (son nom en kanji), signature de l'auteur du site : seul vermillon de la ligne d'horizon. */
.kh-footer-seal { display: block; flex-shrink: 0; width: 44px; height: auto; }
.kh-footer-legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.kh-footer-legal a { font-size: 13px; }
.kh-footer-copyright a { font-size: inherit; } /* « BCDG », vers bcdguil.fr (Alain, 2026-10-26) */
.kh-footer-tools { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.kh-footer-languages { display: flex; }
.kh-footer-languages a { justify-content: center; min-width: 36px; font-size: 13px; }
.kh-site-footer .kh-footer-top { justify-content: center; width: 44px; border: 1px solid var(--kh-footer-line); }
.kh-footer-top:hover { border-color: currentColor; }
@media (max-width: 1099px) {
  .kh-footer-bottom { flex-wrap: wrap; padding-block: 20px; gap: 8px 24px; }
  .kh-footer-copyright { flex-basis: 100%; }
}
@media (max-width: 767px) {
  .kh-footer-container { width: calc(100% - 40px); }
  .kh-footer-services { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .kh-footer-group ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
  .kh-site-footer a, .kh-footer-copyright { font-size: 16px; }
  /* Sur mobile, la liste s'ouvre vers le bas, par-dessus le footer, qui ne bouge pas (Alain, 2026-10-08) : vers le
     haut, elle passait sous le header. */
  .kh-footer-unfold { width: 44px; height: 44px; }
  .kh-footer-unfold svg { transform: rotate(180deg); } /* la flèche indique le sens : vers le bas, fermée */
  .kh-site-footer .has-subnav.is-open .kh-footer-unfold svg { transform: none; }
  .kh-site-footer .kh-subnav { top: 100%; bottom: auto; box-shadow: 0 10px 28px rgb(26 20 16 / .12); transform: translateY(-4px); }
  .kh-site-footer .kh-subnav a { align-items: center; min-height: 44px; }
  .kh-site-footer .kh-subnav__all a { font-size: 12px; }
  .kh-footer-legal ul { gap: 0 24px; }
  .kh-footer-tools { width: 100%; justify-content: space-between; }
  .kh-footer-languages a { min-width: 44px; }
}