/* ═══════════════════════════════════════════════════════════════════
   KIT — objets visuels communs au hub (tariq-ai.com) et aux façades
   (customs., tax.). Même fichier sur les trois sites, jetons --color-*.
   A fenêtre Claude · B tuiles · C descente / frise · D trois écrans ·
   E tuiles métier · F duel de réponses · portes · limites.
   v1 — 06/09/2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── A. Fenêtre Claude ─────────────────────────────────────────────── */
.k-fenetre{background:var(--color-papier-haut);border:1px solid var(--color-filet-fort);border-radius:var(--radius-tq-lg);box-shadow:var(--ombre-levee);overflow:hidden;margin-top:2rem}
.k-barre{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--color-filet);background:var(--color-papier-creux);font:500 .72rem/1 var(--font-mono);color:var(--color-corps-doux)}
.k-barre i{width:.6rem;height:.6rem;border-radius:50%;background:var(--color-filet-fort);display:inline-block}
.k-branche{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--color-visa);font-weight:500;white-space:nowrap}
.k-branche::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--color-visa)}
.k-corps{padding:1.1rem;display:grid;gap:.9rem}
.k-q{justify-self:end;max-width:min(88%,44rem);background:var(--color-papier-creux);color:var(--color-encre);border-radius:14px 14px 4px 14px;padding:.75rem 1rem;font-family:var(--font-titre);font-style:italic;font-size:1.02rem;line-height:1.5;margin:0}
.k-r{border:1px solid var(--color-filet);border-radius:14px 14px 14px 4px;padding:1rem;display:grid;gap:.7rem;font-size:.92rem;line-height:1.5}
.k-r-ligne{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.6rem;align-items:baseline;margin:0}
.k-r-ligne b{font:500 .66rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-garance)}
.k-r-ligne strong{color:var(--color-encre);font-weight:600}
.k-liq{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums;margin-top:.2rem}
.k-liq caption{text-align:start;font:500 .66rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-corps-doux);padding-bottom:.3rem}
.k-liq th{text-align:start;font-weight:400;color:var(--color-corps)}
.k-liq td,.k-liq th{padding:.38rem 0;border-top:1px solid var(--color-filet)}
.k-liq td:nth-child(2){text-align:center;color:var(--color-corps-doux);white-space:nowrap}
.k-liq td:last-child{text-align:end;color:var(--color-encre);white-space:nowrap}
.k-liq tr.k-total th,.k-liq tr.k-total td{font-weight:600;color:var(--color-encre);border-top:2px solid var(--color-filet-fort);font-family:var(--font-titre);font-size:1.02rem}
.k-visas{display:flex;flex-wrap:wrap;gap:.35rem}
.k-jeton{font:400 .7rem/1 var(--font-mono);padding:.32rem .5rem;border:1px solid var(--color-filet-fort);border-radius:4px;color:var(--color-encre);background:var(--color-papier);white-space:nowrap}
.k-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.k-cachet{display:inline-flex;align-items:center;gap:.4rem;font:500 .66rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-visa);border:1.5px solid var(--color-visa);border-radius:4px;padding:.4rem .55rem;transform:rotate(-2deg);background:color-mix(in oklch,var(--color-visa) 10%,transparent)}
.k-entier{margin:0}
.k-entier summary{list-style:none;cursor:pointer;font:500 .86rem/1.3 var(--font-corps);color:var(--color-garance);text-decoration:underline;text-underline-offset:4px;display:inline}
.k-entier summary::-webkit-details-marker{display:none}
.k-entier summary:hover{color:var(--color-garance-vive)}
.k-entier[open] summary{color:var(--color-corps-doux)}
.k-entier-corps{margin-top:1.1rem;display:grid;gap:.9rem;font-size:.92rem;line-height:1.62;color:var(--color-corps)}
.k-entier-corps p{margin:0;max-width:70ch}
.k-entier-corps strong{color:var(--color-encre)}
.k-entier .memo{margin-top:1.1rem}
.k-source{font:400 .74rem/1.5 var(--font-mono);color:var(--color-corps-doux);margin:0}
.k-fenetre--mini{margin-top:0}
.k-fenetre--mini .k-corps{padding:.7rem;gap:.55rem}
.k-fenetre--mini .k-q{font-size:.84rem;padding:.45rem .65rem;max-width:100%}
.k-fenetre--mini .k-r{padding:.65rem .7rem;gap:.4rem;font-size:.78rem;line-height:1.4}
.k-fenetre--mini .k-r-ligne{grid-template-columns:4.4rem minmax(0,1fr);gap:.4rem}
.k-fenetre--mini .k-barre{padding:.45rem .7rem;font-size:.64rem}
.k-fenetre--mini .k-jeton{font-size:.62rem;padding:.26rem .4rem}
@media (max-width:560px){.k-r-ligne{grid-template-columns:1fr;gap:.1rem}.k-q{max-width:100%}.k-corps{padding:.8rem}}

/* ── B. Tuiles (bibliothèque, missions) ────────────────────────────── */
.k-tuiles{display:grid;gap:.8rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.k-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.k-tuiles{grid-template-columns:1fr}}
.k-tuile{background:var(--color-papier-haut);border:1px solid var(--color-filet);border-radius:var(--radius-tq-lg);padding:1.1rem 1.05rem;display:grid;gap:.45rem;align-content:start;box-shadow:var(--ombre-douce)}
.k-tuile svg{width:1.4rem;height:1.4rem;stroke:var(--color-garance);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-tuile b{font:600 1.2rem/1.15 var(--font-titre);color:var(--color-encre);letter-spacing:-.01em}
.k-tuile b small{display:block;font:500 .64rem/1.2 var(--font-mono);color:var(--color-corps-doux);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
.k-tuile span{font-size:.86rem;line-height:1.45;color:var(--color-corps)}
.k-tuile--mission b{font-size:1.05rem}

/* ── C. Descente de nomenclature · frise des millésimes ───────────── */
.k-descente{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:1.6rem}
.k-pas{position:relative;border:1px solid var(--color-filet);border-radius:var(--radius-tq);padding:.8rem .85rem;background:var(--color-papier-haut);display:grid;gap:.3rem;align-content:start}
.k-pas:not(:last-child)::after{content:"→";position:absolute;inset-inline-end:-.78rem;top:.65rem;color:var(--color-or);font-size:1rem;z-index:1}
.k-pas i{font:400 .64rem/1.3 var(--font-mono);color:var(--color-garance);letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.k-pas code{font:500 1rem/1.2 var(--font-mono);color:var(--color-encre)}
.k-pas span{font-size:.78rem;line-height:1.35;color:var(--color-corps)}
.k-pas--final{border-color:var(--color-garance);background:var(--color-garance-pale)}
.k-legende{margin:.8rem 0 0;font:400 .8rem/1.5 var(--font-mono);color:var(--color-corps-doux)}
.k-frise{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem;margin-top:1.6rem}
.k-an{border:1px solid var(--color-filet);border-radius:var(--radius-tq);padding:.7rem .4rem;text-align:center;background:var(--color-papier-haut);display:grid;gap:.2rem}
.k-an code{font:500 1rem/1.2 var(--font-mono);color:var(--color-encre)}
.k-an span{font:400 .6rem/1.3 var(--font-mono);color:var(--color-corps-doux);letter-spacing:.06em;text-transform:uppercase}
.k-an--actif{border-color:var(--color-garance);background:var(--color-garance-pale)}
@media (max-width:640px){.k-descente{grid-template-columns:1fr 1fr}.k-frise{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── D. Trois écrans ───────────────────────────────────────────────── */
.k-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:1.6rem;padding:0;list-style:none}
.k-etape{display:grid;gap:.7rem;align-content:start}
.k-ecran{aspect-ratio:4/3;background:var(--color-papier-creux);border:1px solid var(--color-filet);border-radius:var(--radius-tq-lg);padding:1rem;display:grid;align-content:center;gap:.5rem;overflow:hidden;box-shadow:var(--ombre-douce)}
.k-ch{height:.55rem;border-radius:3px;background:var(--color-filet-fort);width:72%}
.k-ch--court{width:46%}
.k-bt{height:1.75rem;border-radius:5px;background:var(--color-garance);color:var(--color-papier);font:500 .74rem/1.75rem var(--font-corps);text-align:center;width:76%;margin-top:.3rem}
.k-bt--grand{width:90%;height:2.3rem;line-height:2.3rem;font-size:.9rem;justify-self:center;margin:0}
.k-msg{background:var(--color-papier-haut);border:1px solid var(--color-filet);border-radius:8px;padding:.45rem .6rem;font:400 .72rem/1.35 var(--font-corps);color:var(--color-corps)}
.k-msg--q{justify-self:end;background:var(--color-papier);font-family:var(--font-titre);font-style:italic;max-width:85%}
.k-msg b{color:var(--color-garance);font-family:var(--font-mono);font-weight:500;font-size:.68rem}
.k-no{font:500 .68rem/1 var(--font-mono);color:var(--color-or-texte);letter-spacing:.14em}
.k-etape h3{margin:0;font:600 1.08rem/1.25 var(--font-titre);color:var(--color-encre)}
.k-etape p{margin:0;font-size:.9rem;line-height:1.5;color:var(--color-corps)}
@media (max-width:640px){.k-stepper{grid-template-columns:1fr}}

/* ── E. Tuiles métier ──────────────────────────────────────────────── */
.k-personas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
@media (max-width:900px){.k-personas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.k-personas{grid-template-columns:1fr}}
.k-persona{background:var(--color-papier-haut);border:1px solid var(--color-filet);border-radius:var(--radius-tq-lg);padding:1.1rem 1.05rem;display:grid;gap:.5rem;align-content:start;box-shadow:var(--ombre-douce)}
.k-persona svg{width:1.5rem;height:1.5rem;stroke:var(--color-garance);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-persona b{font:600 1.02rem/1.25 var(--font-corps);color:var(--color-encre)}
.k-persona q{font-family:var(--font-titre);font-style:italic;font-size:.94rem;line-height:1.45;color:var(--color-corps);quotes:"«\00a0" "\00a0»"}

/* ── F. Duel de réponses ───────────────────────────────────────────── */
.k-duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2.2rem}
.k-duel>div{border-radius:14px 14px 14px 4px;padding:1.2rem 1.25rem;display:grid;gap:.75rem;align-content:start}
.k-seul{background:var(--color-papier-creux);border:1px solid var(--color-filet)}
.k-avec{background:var(--color-papier-haut);border:1px solid var(--color-garance);box-shadow:var(--ombre-levee)}
.k-qui{font:500 .66rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-corps-doux)}
.k-avec .k-qui{color:var(--color-garance)}
.k-duel em{font-family:var(--font-titre);font-size:1.05rem;line-height:1.5;color:var(--color-encre)}
.k-seul em{color:var(--color-corps)}
.k-tampon{font:500 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .5rem;border:1px dashed var(--color-filet-fort);border-radius:4px;justify-self:start;color:var(--color-corps-doux)}
.k-tampon--visa{border-style:solid;border-color:var(--color-visa);color:var(--color-visa)}
@media (max-width:640px){.k-duel{grid-template-columns:1fr}}

/* ── Portes (hub) ──────────────────────────────────────────────────── */
.k-portes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:2.5rem}
.k-porte{background:var(--color-papier-haut);border:1px solid var(--color-filet);border-radius:var(--radius-tq-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:var(--ombre-douce)}
.k-porte img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;height:auto}
.k-porte-corps{padding:1.4rem 1.5rem 1.5rem;display:grid;gap:.9rem;align-content:start}
.k-sur{font:500 .68rem/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--color-garance);margin:0}
.k-porte-corps h3{margin:0;font:600 1.6rem/1.1 var(--font-titre);color:var(--color-encre);letter-spacing:-.01em}
.k-porte-corps>p{margin:0;color:var(--color-corps);font-size:.95rem;line-height:1.5}
.k-lignes{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.k-lignes li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--color-corps)}
.k-lignes svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;stroke:var(--color-garance);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k-porte-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.3rem}
@media (max-width:760px){.k-portes{grid-template-columns:1fr}}

/* ── Questions (façades) ───────────────────────────────────────────── */
.k-questions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0}
@media (max-width:820px){.k-questions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.k-questions{grid-template-columns:1fr}}
.k-chip{background:var(--color-papier-creux);border:1px solid var(--color-filet);border-radius:var(--radius-tq);padding:.7rem .85rem;display:grid;gap:.25rem}
.k-chip small{font:500 .6rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-corps-doux)}
.k-chip q{font-family:var(--font-titre);font-style:italic;font-size:.92rem;line-height:1.4;color:var(--color-encre);quotes:"«\00a0" "\00a0»"}
.k-contentieux{margin:1.4rem 0 0;padding:.9rem 1.1rem;border-inline-start:3px solid var(--color-or);background:var(--color-papier-creux);border-radius:var(--radius-tq);font-size:.92rem;line-height:1.55;color:var(--color-corps)}
.k-contentieux strong{color:var(--color-encre)}

/* ── Limites, dans le bandeau final ────────────────────────────────── */
.k-limites{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;max-width:64ch;font-size:.82rem;line-height:1.5;color:color-mix(in oklch,var(--color-papier) 64%,transparent)}
.k-limites li{display:flex;gap:.6rem}
.k-limites li::before{content:"—";color:var(--color-or);flex:none}