/* ==========================================================
   Mini-jeu « Chasse aux poux » — bouton de navigation, poux,
   curseur vaporisateur, toast de victoire.
   Toutes les couleurs passent par les variables du thème.
   ========================================================== */

.lice-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Bouton dans l'en-tête ---------- */
.lice-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; min-width: 42px; padding: 0 13px 0 11px;
  border: var(--border, 2px solid var(--ink)); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 600 .86rem/1 var(--font-display); letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; flex: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lice-toggle:hover { background: var(--butter, var(--mint)); box-shadow: var(--pop-sm, 2px 2px 0 var(--ink)); transform: translate(-1px, -1px); }
.lice-toggle:active { transform: translate(1px, 1px); box-shadow: none; }
.lice-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; transform: none; padding-right: 5px; }
.lice-toggle[aria-pressed="true"]:hover { background: var(--teal-deep, var(--ink)); }
.lice-icon { width: 14px; height: 19px; flex: none; }
.lice-toggle__count {
  display: inline-block; min-width: 2.9em; padding: 5px 7px;
  border-radius: 999px; background: var(--lime, var(--sun)); color: var(--ink);
  font-size: .76rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.lice-toggle__count[hidden] { display: none; }
.lice-toggle:has(.lice-toggle__count:not([hidden])) { padding-right: 5px; }

/* Le libellé n'est visible qu'au repos et sur grand écran ; ailleurs il reste lu par les lecteurs d'écran */
.lice-toggle[aria-pressed="true"] .lice-toggle__label,
.lice-toggle:has(.lice-toggle__count:not([hidden])) .lice-toggle__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 1239px) {
  .lice-toggle { padding: 0 11px; }
  .lice-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Entre 901 et 1179 px l'en-tête est trop juste : le numéro (déjà présent dans Contact et le pied de page)
   cède la place au bouton du jeu, comme il le fait déjà sous 1080 px */
@media (max-width: 1179px) {
  .header__actions:has(.lice-toggle) .header__phone { display: none; }
}
@media (max-width: 900px) {
  .header__actions { margin-left: auto; }
  /* Même gabarit que le bouton burger voisin */
  .lice-toggle { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: var(--radius-sm, 12px); box-shadow: var(--pop-sm, 2px 2px 0 var(--ink)); }
  .lice-toggle:has(.lice-toggle__count:not([hidden])) { width: auto; padding: 0 5px 0 10px; }
  .lice-toggle[aria-pressed="true"] { padding: 0 5px 0 10px; width: auto; }
}

/* ---------- Entrée dans le menu mobile ---------- */
.nav__game { display: none; }
@media (max-width: 900px) {
  .nav__game { display: block; margin-top: 8px; padding-top: 10px; border-top: 1.5px dashed var(--line, var(--ink-soft)); }
  .lice-menu-btn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; border: 0; border-radius: 999px; background: none;
    font: 700 1.15rem/1.2 var(--font-body); color: var(--ink-soft); text-align: left; cursor: pointer;
    transition: background-color .2s, color .2s;
  }
  .lice-menu-btn:hover { background: var(--butter, var(--mint)); color: var(--ink); }
  .lice-menu-btn .lice-icon { width: 16px; height: 22px; color: var(--ink); }
  .lice-menu-btn small { margin-left: auto; font: 700 .7rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted, var(--ink-soft)); }
}

/* ---------- Calque des poux ---------- */
.lice-layer {
  position: fixed; inset: 0; z-index: 55;
  pointer-events: none; overflow: hidden; contain: strict;
  /* Même mascotte que le pou du rail (scroll-hunter.css) */
  --louse-fill: var(--peach, var(--paper));
  --louse-dark: var(--ink);
  transition: opacity .2s ease;
}
.lice-layer.is-muted { opacity: 0; }
.lice-layer.is-muted .louse { pointer-events: none; }
.lice-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.louse {
  position: absolute; left: 0; top: 0; width: 24px; height: 32px; margin: -16px 0 0 -12px;
  pointer-events: auto; will-change: transform; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: opacity .22s ease;
}
.louse::before { content: ""; position: absolute; inset: -10px -12px; border-radius: 50%; } /* zone de clic élargie */
.louse.is-teaser { cursor: pointer; }
/* Pou coriace : carapace sombre (2 coups) ; une fois touché, il vire au corail */
.louse.is-tough { --louse-fill: var(--ink-soft); }
.louse.is-tough .louse__segments { stroke: var(--paper); opacity: .75; }
.louse.is-tough .louse__abdomen { stroke-width: 1.9; }
.louse.is-hurt { --louse-fill: var(--coral, #ff7a59); }
/* Boss : pou géant couronné, qui vire au corail quand il s'énerve */
.louse.is-boss { --louse-fill: var(--ink-soft); z-index: 1; }
.louse.is-boss .louse__segments { stroke: var(--paper); opacity: .8; }
.louse.is-boss .louse__abdomen { stroke-width: 1.2; }
.louse.is-boss .louse__leg, .louse.is-boss .louse__antenna { stroke-width: 1; }
.louse.is-boss.is-angry { --louse-fill: var(--coral, #ff7a59); }
.louse__crown { fill: var(--sun, #ffe14d); stroke: var(--ink); stroke-width: .7; stroke-linejoin: round; }
.lice-boss {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 14px;
  border: var(--border, 2px solid var(--ink)); border-radius: 999px; background: var(--paper);
  box-shadow: var(--pop-sm, 2px 2px 0 var(--ink)); color: var(--ink);
  font: 700 .8rem/1 var(--font-display); white-space: nowrap;
}
.lice-boss[hidden] { display: none; }
.lice-boss__track { width: min(220px, 40vw); height: 10px; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--mint); }
.lice-boss__fill { display: block; height: 100%; width: 100%; background: var(--green, #6cc024); transition: width .25s ease; }
.lice-boss.is-angry .lice-boss__fill { background: var(--coral, #ff7a59); }
.louse.is-gone { opacity: 0; pointer-events: none; }
.louse svg { display: block; width: 100%; height: 100%; overflow: visible; }
.louse__shadow { fill: var(--ink); opacity: .1; }
.louse__leg, .louse__antenna { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.louse__abdomen { fill: var(--louse-fill); stroke: var(--ink); stroke-width: 1.4; }
.louse__thorax, .louse__head { fill: var(--louse-dark); }
.louse__segments { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; opacity: .4; }

/* Marche en trépied : les deux jeux de pattes battent en opposition */
.louse__leg { transform-box: view-box; animation: louse-step var(--step, .2s) ease-in-out infinite alternate; animation-play-state: paused; }
.louse__leg--b { animation-direction: alternate-reverse; }
.louse.is-moving .louse__leg { animation-play-state: running; }
@keyframes louse-step { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

/* ---------- Curseur vaporisateur (pointeurs précis uniquement) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.lice-hunting body,
  html.lice-hunting .louse { cursor: var(--lice-cursor, crosshair); }
  html.lice-hunting :where(a, button, summary, label, select, [role="button"], [role="option"], .lice-toggle, .lice-toast button) { cursor: pointer; }
  html.lice-hunting :where(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]), textarea, [contenteditable]) { cursor: text; }
  html.lice-hunting :where(button:disabled) { cursor: not-allowed; }
  html.lice-hunting .lice-toast { cursor: auto; }
}

/* ---------- Toast de victoire ---------- */
.lice-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60; margin-inline: auto; max-width: 440px;
  padding: 18px 20px 18px; border: var(--border, 2px solid var(--ink)); border-radius: var(--radius, 20px);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--pop, 4px 4px 0 var(--ink));
  font-family: var(--font-body);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1);
}
.lice-toast[hidden] { display: none; }
.lice-toast.is-visible { opacity: 1; transform: none; }
.lice-toast__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lice-toast__kicker::before { content: ""; width: 16px; height: 7px; border-radius: 999px; background: var(--lime, var(--coral)); border: 1.5px solid var(--ink); }
.lice-toast__title { margin: 0; font: 600 1.35rem/1.15 var(--font-display); color: var(--ink); }
.lice-toast__best { margin: -8px 0 14px; font-size: .85rem; font-weight: 700; color: var(--ink); }
.lice-toast__best:empty { display: none; }
.lice-toast__best.is-record { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sun, #ffe14d); border: 1.5px solid var(--ink); }
.lice-toast__text { margin: 4px 0 14px; font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lice-toast__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
/* L'action métier (réserver) prime, seule sur sa ligne ; « Niveau suivant » vient en second, « Rejouer » en simple lien */
.lice-toast__cta, .lice-toast__next {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: var(--border, 2px solid var(--ink)); border-radius: 999px; color: var(--ink);
  font: 600 .92rem/1 var(--font-display); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lice-toast__cta { flex: 1 0 100%; justify-content: center; min-height: 46px; font-size: 1rem; background: var(--coral); box-shadow: var(--pop-sm, 2px 2px 0 var(--ink)); }
.lice-toast__cta:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.lice-toast__next[hidden] { display: none; }
.lice-toast__next { min-height: 36px; padding: 0 14px; font-size: .86rem; background: var(--paper); }
.lice-toast__next:hover { background: var(--mint); transform: translate(-1px, -1px); box-shadow: var(--pop-sm, 2px 2px 0 var(--ink)); }
.lice-toast__cta:active, .lice-toast__next:active { transform: translate(1px, 1px); box-shadow: none; }
.lice-toast__replay {
  margin-left: auto; padding: 8px 4px; border: 0; background: none; color: var(--ink-soft);
  font: 600 .86rem/1 var(--font-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lice-toast__replay:hover { color: var(--ink); }
.lice-toast__close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; padding: 7px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.lice-toast__close:hover { background: var(--mint); color: var(--ink); }
.lice-toast__close svg { display: block; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .lice-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .lice-toast, .lice-toggle, .louse, .lice-toast__cta, .lice-toast__next { transition: none; }
  .louse__leg { animation: none; }
}