/* KELO - compléments au design system, charges APRES kelo-design-system.css.
   Uniquement des jetons var(--...). Aucune bordure, aucun dégradé, aucun translucide.
   Ne contient que ce que la maquette ne fournit pas : mise en page pleine hauteur d'une vraie
   application (la maquette vit dans une visionneuse) et états de chargement (section 17). */

html, body { height: 100%; }
body { overflow: hidden; }
.kelo-root { min-height: 100%; }

/* Squelettes de chargement */
.sk-wrap { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) 0; max-width: var(--content-max); margin: 0 auto; }
.sk { background: var(--sunken); border-radius: var(--r-sm); animation: sk-pulse 1.2s ease-in-out infinite; }
.sk-title { height: 32px; width: 40%; border-radius: var(--r-md); margin-bottom: var(--s3); }
.sk-line { height: 16px; }
.sk-line:nth-child(odd) { width: 86%; }
.sk-line:nth-child(3n) { width: 64%; }
@keyframes sk-pulse { 0%, 100% { background: var(--sunken); } 50% { background: var(--hair); } }

/* Vitrine publique (kello.fun) : page qui defile normalement, sans coquille d'application. */
body.site { overflow: auto; }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); max-width: var(--content-max); margin: 0 auto; padding: var(--s4) var(--s4); }
.site-main { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s4) var(--s12); }
.site-foot { max-width: var(--content-max); margin: 0 auto; padding: var(--s8) var(--s4); color: var(--muted); font-size: var(--t-sm); }

/* Grilles de champs (.g2, .g4) : la marge « .field + .field » du design system décale le second
   champ d'une même ligne. Dans une grille, l'espacement vient du gap. */
.g2 > .field + .field, .g4 > .field + .field { margin-top: 0; }

/* Calendrier : la case vide (.d.empty) hérite du composant « état vide » (.empty, 40 px de marge
   intérieure) du design system, ce qui grandit la première ligne. On annule ce conflit de nom. */
.cal .d.empty { padding: 0; display: block; }

/* QR de liaison WhatsApp (bu-parametres) : plus grand que celui de la carte KELO, car il est
   long (environ 60 modules) et se scanne sur un écran. */
.qr[data-wa-qr] svg{width:240px;height:240px}