/* Qui A Raison ? : réglages propres au site.
   Toute la charte vient du kit commun Devolim (/kit/devolim.css, copie de _modele/kit/ :
   ne pas modifier ici, voir _modele/KIT.md). Ce fichier ne contient que la palette « Or de justice »
   de l'app et quelques styles propres à ce site. */
:root {
  --app: #F7B731;      /* or de justice, accent de l'app */
  --app-2: #3B2F6B;    /* violet nuit : bas des dégradés */
  --app-ink: #4A3A86;  /* violet lisible sur fond clair (titres, liens) */
  --hero-hl: #FFFFFF;  /* l'app est jaune : mot mis en valeur en blanc */
  --nuit: #241B3D;     /* encre de l'app : texte et cartes sombres */
  --bg: #FBF7EE;       /* fond crème, comme le papier du jugement */
  --line: #EADFC6;
}

/* Pages de texte : sommaire, tableaux, encadrés. */
.k-toc > p:first-child { font: 800 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--app-ink); margin: 2px 0 12px; }
.k-doc .table-wrap { overflow-x: auto; }
.k-doc .table-wrap table { margin: 0; }
.k-doc .summary { padding: 18px 22px; border-radius: 20px; background: #FFF6DE; border: 1px solid #F3DDA3; }
.k-doc .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.k-doc .numbers li { padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.k-doc .numbers li strong { display: block; font: 850 24px/1.1 var(--display); color: var(--app-ink); }

/* Le jugement en papier dans l'iPhone du haut de page (pas encore de vidéo ni de capture). */
.k-phone .screen:has(> .qar-paper) { container-type: inline-size; }
.k-phone .screen .qar-paper {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 3.2cqw; padding: 20cqw 8cqw 8cqw;
  background: radial-gradient(120% 60% at 50% 0%, #FFFDF6, #FBF1D8 70%), #FBF1D8;
  color: var(--nuit); font-family: var(--read); text-align: center;
}
.qar-paper .qar-court { font: 900 5.4cqw/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.qar-paper .qar-num { font: 700 4cqw/1.2 var(--read); color: #6B5E86; margin: 0; }
.qar-paper .qar-nick { font: 850 6.8cqw/1.12 var(--display); margin: 1cqw 0 0; color: var(--app-ink); }
.qar-paper .qar-vs { display: flex; justify-content: space-between; font: 800 4.6cqw/1 var(--display); margin-top: 2cqw; }
.qar-paper .qar-vs .a { color: #2F63E8; } .qar-paper .qar-vs .b { color: #F2603F; }
.qar-paper .qar-bar { display: flex; height: 7cqw; border-radius: 99px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(36, 27, 61, .08); }
.qar-paper .qar-bar i { display: grid; place-items: center; font: 850 3.8cqw/1 var(--display); font-style: normal; color: #fff; }
.qar-paper .qar-bar .a { width: 30%; background: #2F63E8; } .qar-paper .qar-bar .b { width: 70%; background: #F2603F; }
.qar-paper .qar-legend { font: 700 3.4cqw/1 var(--read); color: #6B5E86; margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.qar-paper ul { list-style: none; margin: 1cqw 0 0; padding: 0; display: grid; gap: 2cqw; text-align: left; }
.qar-paper li { font: 600 3.9cqw/1.35 var(--read); padding-left: 4cqw; border-left: 1cqw solid var(--app); }
.qar-paper .qar-motifs { font: 900 4.4cqw/1 var(--display); letter-spacing: .12em; margin: 2cqw 0 0; }
.qar-paper .qar-peine { font: 750 4.4cqw/1.3 var(--display); margin: 0; padding: 3cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 1cqw 0 #EADFC6; }
.qar-paper .qar-sign { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font: 750 3.8cqw/1.2 var(--display); color: #6B5E86; }
.qar-paper .qar-stamp { display: inline-block; padding: 1.6cqw 3.6cqw; border: .8cqw solid #D9442A; border-radius: 2cqw; color: #D9442A; font: 900 5.2cqw/1 var(--display); letter-spacing: .1em; transform: rotate(-10deg); }

/* Le maillet de l'app, en relief. */
.qar-mascot { display: grid; place-items: center; }
.qar-mascot img { width: min(340px, 72vw); height: auto; filter: drop-shadow(0 24px 26px rgba(36, 27, 61, .32)); animation: k-bob 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .qar-mascot img { animation: none; } }

/* Bloc d'honnêteté : ce que l'app n'est pas. */
.qar-honest { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; max-width: 900px; margin-inline: auto; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #fff; }
.qar-honest h2 { font: 800 clamp(24px, 3vw, 32px)/1.15 var(--display); color: var(--fg); margin: 0 0 12px; }
.qar-honest p { color: var(--muted); line-height: 1.6; margin: 0 0 14px; max-width: 64ch; }
.qar-honest p strong { color: var(--fg); }
.qar-honest a { color: var(--app-ink); font-weight: 700; }
@media (max-width: 599px) { .qar-honest { grid-template-columns: minmax(0, 1fr); } }

/* Pages de repli des liens de l'app (/ami/, /affaire/) et 404 : le maillet à la place du 0. */
.qar-fallback .k-actions { flex-wrap: wrap; }
.qar-404-maillet img { width: 82%; height: auto; display: block; }

/* Lisibilité du texte blanc sur l'or (haut de page, pages de texte). */
.k-hero .k-lead, .k-hero .k-hero-note, .k-doc-hero .k-updated { text-shadow: 0 1px 2px rgba(70, 40, 0, .35); }
.k-hero h1, .k-doc-hero h1 { text-shadow: 0 2px 18px rgba(70, 40, 0, .28); }
/* Mot mis en valeur des titres de section : or foncé, lisible sur le fond crème. */
.k-title .k-hl { color: #B97500; }