/* TiKamp — composant logo UNIQUE (P18.1).
   ------------------------------------------------------------------
   Un seul balisage, une seule source graphique, sur toutes les pages :

     <a href="/" class="tk-logo tk-logo--md" aria-label="TiKamp — accueil">
       <span class="tk-logo__badge" aria-hidden="true"></span>
       <span class="tk-logo__text">TiKamp</span>
     </a>

   Le glyphe (montagne stylisée + petit fanion) n'est PAS redessiné en SVG
   inline dans chaque page : il est peint ici par `mask-image` (donc une
   seule définition CSS) et disponible côté JS via `tkIcon('logo')`
   (/js/icons.js) pour les contextes rendus dynamiquement.
   ⚠️ Ces deux définitions doivent rester identiques : si le glyphe change,
   modifier LES DEUX (public/css/tk-logo.css + public/js/icons.js).

   Règles d'identité (P18.1) :
   - la pastille est TOUJOURS var(--primary) — jamais recolorée selon
     l'écran, le fond ou le breakpoint ;
   - seul le libellé s'adapte au contexte, via --tk-logo-ink (ou .ctx-dark
     posé sur un ancêtre pour un fond sombre/photo) ;
   - la cible tactile du lien fait au moins 44×44px à toutes les tailles.
   ------------------------------------------------------------------ */

.tk-logo {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;              /* cible tactile réelle (RGAA / mobile) */
  text-decoration: none;
  color: var(--tk-logo-ink, var(--ink, #0A0F0A));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: none;
}

.tk-logo__badge {
  display: inline-block;
  flex: none;
  aspect-ratio: 1;
  background: var(--primary, #0F7C3C);   /* identité stable, jamais recolorée */
  position: relative;
}

/* Glyphe montagne + fanion, en blanc, découpé dans la pastille. */
.tk-logo__badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: var(--tk-logo-glyph) center / var(--tk-logo-glyph-size, 60%) no-repeat;
  mask: var(--tk-logo-glyph) center / var(--tk-logo-glyph-size, 60%) no-repeat;
}

:root,
.tk-logo {
  --tk-logo-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19 9 8l3 5 2-3 7 9H3z'/%3E%3Cpath d='M14 8V3'/%3E%3Cpath d='M14 3l4 1.6-4 1.6'/%3E%3C/svg%3E");
}

.tk-logo__text {
  white-space: nowrap;
}

/* ── Tailles ─────────────────────────────────────────────────────── */
.tk-logo--sm { font-size: .95rem; gap: .4em; }
.tk-logo--sm .tk-logo__badge { width: 24px; border-radius: 7px; }

.tk-logo--md { font-size: 1.15rem; }
.tk-logo--md .tk-logo__badge { width: 32px; border-radius: 9px; }

.tk-logo--lg { font-size: 1.4rem; }
.tk-logo--lg .tk-logo__badge { width: 38px; border-radius: 11px; }

/* ── Contexte sombre (hero photo / bandeau vert) ─────────────────── */
.ctx-dark .tk-logo,
.tk-logo--on-dark { --tk-logo-ink: #fff; }
.ctx-dark .tk-logo,
.tk-logo--on-dark { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* ── Variante icône seule (espaces très contraints) ──────────────── */
.tk-logo--icon-only .tk-logo__text { display: none; }

.tk-logo:focus-visible {
  outline: 2px solid var(--accent, #F3A724);
  outline-offset: 3px;
  border-radius: 8px;
}