/* ==========================================================================
   Kikafé ? : « l'enquête du salon ».
   Papier peint, ruban « zone suspecte » qui défile, traces de pattes qui
   apparaissent une à une jusqu'à l'indice (dessin original), loupe qui cherche,
   dossier d'enquête, pièces à conviction numérotées et palmarès.
   L'illustration de la boîte est affichée entière, sans aucun effet ni rien par-dessus.
   ========================================================================== */

.kf {
  --papier-kf: #eef5e4;
  --raie-kf: #dfecd0;
  --vert-kf: #245a21;
  --vert-fonce-kf: #163a14;
  --encre-kf: #182a1f;
  --doux-kf: #3a5446;
  --jaune-kf: #f6c42c;
  --parquet-kf: #b98657;
  --brun-kf: #5a3a1c;
  background: #f7f3e8;
  color: var(--encre-kf);
}
.kf .fil-ariane, .kf .fil-ariane a { color: var(--doux-kf); }

/* ---------- Le salon (ouverture) ---------- */
.kf-salon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--papier-kf) 0 2.2rem, var(--raie-kf) 2.2rem 2.6rem);
}
.kf-ruban {
  position: absolute; z-index: 3;
  top: 0.9rem; left: -10%; right: -10%;
  rotate: -3deg;
  overflow: hidden;
  background: var(--jaune-kf);
  border-block: 0.3rem solid var(--encre-kf);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
}
.kf-ruban span {
  display: inline-block;
  padding: 0.35rem 0;
  font-family: "Bricolage Grotesque", var(--titre);
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--encre-kf);
}
.kf-scene { position: relative; padding-top: 3.6rem; }
.kf-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1rem, 4vw, 2.5rem) 0;
}
.kf-sur {
  margin: 0 0 0.6rem;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vert-kf);
}
.kf h1 {
  margin: 0;
  font-family: "Bricolage Grotesque", var(--titre);
  font-weight: 800;
  font-size: clamp(3.4rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--vert-fonce-kf);
}
.kf-accroche {
  display: inline-block;
  margin: 1.2rem 0 0;
  padding: 0.7rem 1.1rem;
  font-family: "Bricolage Grotesque", var(--titre); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.3;
  background: #fff;
  border: 3px solid var(--encre-kf);
  border-radius: 1rem 1rem 1rem 0.2rem;
  box-shadow: 5px 5px 0 var(--encre-kf);
}

.kf-piece { position: relative; display: grid; place-items: center; padding: 1.5rem 0 2rem; }
.kf-boite { position: relative; z-index: 1; width: min(19rem, 62vw); }
.kf-boite picture { display: contents; }
.kf-boite img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(24, 42, 31, 0.4)); }
.kf-point {
  position: absolute; z-index: 0;
  font-family: "Bricolage Grotesque", var(--titre); font-weight: 800;
  color: var(--vert-kf);
  line-height: 1;
}
.kf-point--1 { font-size: 4rem; top: -0.5rem; left: 0; }
.kf-point--2 { font-size: 3rem; top: 18%; right: 0; color: #a8401f; }
.kf-point--3 { font-size: 2.4rem; bottom: 12%; left: 0; }

/* Parquet, traces de pattes, indice, loupe */
.kf-sol {
  position: relative;
  height: clamp(5rem, 11vw, 8rem);
  background:
    repeating-linear-gradient(90deg, rgba(90, 58, 28, 0.25) 0 2px, transparent 2px 9rem),
    repeating-linear-gradient(180deg, var(--parquet-kf) 0 1.9rem, #a9784b 1.9rem 2rem);
  border-top: 0.6rem solid #8c5f37;
}
.kf-traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.kf-patte { fill: var(--brun-kf); opacity: 0.75; }
.kf-indice__tas { fill: #9a6236; stroke: #6b3f1c; stroke-width: 2.5; stroke-linejoin: round; }
.kf-indice__ombre { fill: rgba(90, 58, 28, 0.35); }
.kf-indice__oeil { fill: #2a1a10; }
.kf-indice__sourire { fill: none; stroke: #2a1a10; stroke-width: 2.2; stroke-linecap: round; }
.kf-indice__joue { fill: #e58a7a; opacity: 0.8; }
.kf-indice__reflet { fill: none; stroke: #d9a676; stroke-width: 3; stroke-linecap: round; }
.kf-loupe__verre { fill: rgba(255, 255, 255, 0.25); stroke: var(--encre-kf); stroke-width: 7; }
.kf-loupe__manche { stroke: var(--brun-kf); stroke-width: 11; stroke-linecap: round; }

/* ---------- Le bureau d'enquête (contenu) ---------- */
.kf-bureau { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.kf-bureau__grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kf-dossier {
  position: relative;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: #f2d79a;
  border-radius: 0 10px 10px 10px;
  box-shadow: 0 18px 36px -24px rgba(24, 42, 31, 0.6);
}
.kf-dossier::before {
  content: ""; position: absolute; left: 0; top: -1.4rem; width: 9rem; height: 1.45rem;
  background: #f2d79a; border-radius: 10px 10px 0 0;
}
.kf-trombone {
  position: absolute; top: -1.1rem; right: 2rem; width: 1.2rem; height: 3.6rem;
  border: 3px solid #6f7a80; border-radius: 1rem;
}
.kf-rubrique { margin: 0; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: #7a2d14; }
.kf-dossier h2 { font-family: "Bricolage Grotesque", var(--titre); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 2.6rem); color: var(--encre-kf); margin: 0.4rem 0 1rem; }
.kf-description { font-size: 1.12rem; line-height: 1.7; max-width: 60ch; }
.kf .bouton { background: var(--vert-kf); border-color: var(--vert-fonce-kf); color: #fff; border-radius: 0.6rem; }
.kf .bouton:hover { background: var(--vert-fonce-kf); color: #fff; }
.kf .bouton--clair { background: transparent; color: var(--vert-fonce-kf); border-color: var(--vert-fonce-kf); }
.kf .liens-secondaires a { color: var(--vert-fonce-kf); font-weight: 600; }

.kf-cote__titre { font-family: "Bricolage Grotesque", var(--titre); font-weight: 800; font-size: 1.6rem; color: var(--vert-fonce-kf); margin: 0 0 0.7rem; }
.kf-pieces { margin: 0; display: grid; gap: 0.6rem; }
.kf-pieces div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; background: #fff; border-radius: 0.6rem; border: 2px solid rgba(24, 42, 31, 0.15); }
.kf-pieces dt { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux-kf); }
.kf-pieces dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.kf-repere {
  display: grid; place-items: center; width: 1.9rem; height: 1.6rem;
  font-weight: 800; font-size: 0.95rem; color: var(--encre-kf);
  background: var(--jaune-kf);
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}
.kf-equipe { margin-top: 1.8rem; }
.kf-credits { margin: 0; }
.kf-credits div { padding: 0.55rem 0; border-top: 1px solid rgba(24, 42, 31, 0.25); }
.kf-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--vert-kf); }
.kf-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; }

.kf-palmares { margin-top: clamp(2.5rem, 6vw, 4rem); }
.kf-medailles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.kf-medaille { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; background: #fff; border-radius: 0.8rem; border: 2px solid rgba(24, 42, 31, 0.12); }
.kf-medaille__insigne {
  flex: none; display: grid; place-items: center; width: 3.6rem; aspect-ratio: 1; border-radius: 50%;
  font-weight: 800; font-size: 0.8rem; color: var(--encre-kf);
  background: radial-gradient(circle at 35% 30%, #fde59a, var(--jaune-kf) 60%, #b98a12);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--jaune-kf);
}
.kf-medaille strong { display: block; color: var(--vert-fonce-kf); }
.kf-medaille span { font-size: 0.95rem; }

@media (max-width: 52rem) {
  .kf-grille, .kf-bureau__grille { grid-template-columns: minmax(0, 1fr); }
  .kf-titre { text-align: center; }
  .kf-ruban { top: 0.7rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .kf-ruban span { animation: kf-ruban 40s linear infinite; }
  @keyframes kf-ruban { to { translate: -50% 0; } }
  .kf-point { animation: kf-doute 3.2s ease-in-out infinite; }
  .kf-point--2 { animation-delay: -1.1s; }
  .kf-point--3 { animation-delay: -2.2s; }
  @keyframes kf-doute { 0%, 100% { rotate: -8deg; translate: 0 0; } 50% { rotate: 10deg; translate: 0 -0.5rem; } }
  .kf-patte { opacity: 0; animation: kf-pas 10s linear infinite; }
  .kf-patte--1 { animation-delay: 0s; } .kf-patte--2 { animation-delay: 0.4s; } .kf-patte--3 { animation-delay: 0.8s; }
  .kf-patte--4 { animation-delay: 1.2s; } .kf-patte--5 { animation-delay: 1.6s; } .kf-patte--6 { animation-delay: 2s; }
  .kf-patte--7 { animation-delay: 2.4s; } .kf-patte--8 { animation-delay: 2.8s; } .kf-patte--9 { animation-delay: 3.2s; }
  .kf-patte--10 { animation-delay: 3.6s; }
  @keyframes kf-pas { 0% { opacity: 0; } 3%, 70% { opacity: 0.75; } 85%, 100% { opacity: 0; } }
  .kf-loupe { animation: kf-loupe 7s ease-in-out infinite; }
  @keyframes kf-loupe {
    0%, 100% { transform: translate(1060px, 54px); } 40% { transform: translate(1010px, 44px); } 60% { transform: translate(1005px, 48px); }
  }
}