/* Compléments locaux au app.css compilé de sprezzature (classes absentes du build). */

.site-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.site-table th, .site-table td { text-align: left; padding: 0.35rem 1rem 0.35rem 0; border-bottom: 1px solid rgba(128,128,128,0.25); white-space: nowrap; font-family: "Roboto Mono", ui-monospace, monospace; }
.site-table th { font-weight: 600; }

.prose-lite p + p { margin-top: 0.75rem; }
.prose-lite { line-height: 1.65; }

/* Surlignage des termes cherchés dans la page « Demander au livre ». La
   même fonction highlight() de rag.js pose des <mark> à deux endroits :
   dans la liste des passages (.rag-passage) et dans l'encadré de réponse
   (#rag-answer). Les deux sélecteurs sont donc nécessaires : sans le
   second, l'encadré retombait sur le <mark> par défaut du navigateur, un
   jaune système insensible au thème, donc une couleur de mode clair
   posée sur un fond sombre. color: inherit garde le texte à la couleur
   du conteneur plutôt qu'au noir imposé par le navigateur.
   Contrastes mesurés (fond calculé après fusion alpha) : 8,12:1 clair et
   7,57:1 sombre dans un passage, 10,93:1 et 8,32:1 dans l'encadré. */
.rag-passage mark,
#rag-answer mark { background: rgba(255,149,0,0.30); color: inherit; border-radius: 2px; padding: 0 1px; }

.badge-src { display: inline-block; align-self: flex-start; white-space: nowrap; font-size: 0.7rem; font-family: "Roboto Mono", ui-monospace, monospace; border: 1px solid rgba(128,128,128,0.4); border-radius: 9999px; padding: 0.1rem 0.6rem; }

/* Le fil d'Ariane d'une pastille (chapitre · section) réutilise .badge-src,
   taillé pour des étiquettes courtes comme « prnewswire.com » et donc posé en
   white-space: nowrap. Sur un chapitre au titre long il se faisait couper en
   plein mot au bord de la carte. Ce modificateur lui rend le droit de se
   replier, sans toucher aux pastilles de source qui, elles, doivent rester
   d'un seul tenant. */
.badge-src.badge-wrap { white-space: normal; }

.logo-placeholder { font-size: 1.25rem; line-height: 1; }

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.h-16 { height: 4rem; }
.w-16 { width: 4rem; }
.flex-none { flex: none; }

.site-logo { display: inline-block; }
html[data-color-scheme="dark"] .site-logo { filter: invert(1) brightness(1.05); }

/* Pas d'override du bleu en mode clair, et c'est délibéré.
   La note du 2026-08-19 en posait un (#006FF3) pour corriger #007AFF, le
   bleu du mode "corporate". Mais le mode réellement actif est "academic",
   dont le bleu #0072B2 passait déjà : 5.19:1 sur blanc, 4.76:1 sur
   neutral-100. L'override remplaçait donc une couleur conforme par une
   couleur limite — 4.60:1 sur blanc, mais 4.22:1 sur neutral-100, où dix
   liens au repos tombaient sous le seuil AA. Retiré le 2026-09-12 après
   recomptage des surfaces réelles (audit sprezzature-colors).
   Ne pas le rétablir sans vérifier le bleu du mode actif ET les fonds
   neutral-100, pas seulement le blanc. */

/* En sombre, en revanche, un override est nécessaire. Le bleu du mode actif
   "academic" (--brand-blue-rgb: 0 114 178, #0072B2) sur fond #0B0B0C ne
   fait que 3.79:1 ;
   #1F81C2 (voisin OKLCH) atteint 4.64:1 sans changement perceptible.
   Audit sprezzature-colors, 2026-08-23. */
html[data-color-scheme="dark"] .text-brand-blue { color: #1F81C2; }

/* WCAG AA : le texte d'invite des champs de recherche porte SEUL l'étiquette
   visible, le <label> étant en sr-only. Il doit donc satisfaire le seuil du
   texte, pas celui d'un ornement. Les gabarits posent placeholder:text-neutral-400
   (#A3A3A3), qui ne fait que 2,52:1 sur blanc. neutral-500 (#737373) atteint
   4,74:1 sans changer la hiérarchie visuelle. En sombre, neutral-400 sur #0B0B0C
   donne déjà 7,8:1 : on n'y touche pas, la règle est bornée au mode clair.
   Corrigé ici plutôt que dans les sept gabarits parce que css/app.css est une
   sortie de build Tailwind qui ne contient pas la paire nécessaire.
   Audit sprezzature-colors, 2026-09-12. */
html[data-color-scheme="light"] input::placeholder { color: #737373; }

/* Groupes de nav en menu déroulant (<details>/<summary>, disclosure natif
   donc déjà accessible clavier + lecteur d'écran sans ARIA custom) :
   masque le triangle natif, positionne le panneau. nav.js ferme les
   dropdowns au clic extérieur, à Échap et entre eux (un seul ouvert). */
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] > summary { color: rgb(var(--brand-blue-rgb, 0 114 178)); }
/* Même correction que pour .text-brand-blue, et pour la même raison :
   un menu déroulant garde son intitulé en bleu tant qu'il est ouvert,
   c'est donc du texte au repos et non un survol. En sombre, le bleu du
   mode actif tombait à
   3,79:1 sur #0B0B0C ; #1F81C2 remonte à 4,66:1. La règle .text-brand-blue
   plus haut ne couvrait pas ce cas, la couleur étant posée ici en direct.
   Audit sprezzature-colors, 2026-09-12. */
html[data-color-scheme="dark"] .nav-dropdown[open] > summary { color: #1F81C2; }
.nav-dropdown-panel { position: absolute; top: 100%; left: 0; margin-top: 0.375rem; z-index: 50; min-width: 12rem; }
.nav-dropdown summary svg { margin-top: 1px; }

/* Vignette de carte (Études de cas, Éclairages). Règle Warith, 2026-09-05 :
   « ne crop aucune image, ne crop jamais ». L'image était auparavant enfermée
   dans une boîte 16/9 et rognée (object-fit: cover) pour la remplir, ce qui
   coupait surtout les portraits. Elle est désormais montrée ENTIÈRE : on ne
   borne que l'encombrement, en largeur et en hauteur, et l'image se réduit
   d'elle-même en gardant ses proportions. width/height auto plutôt que 100 % :
   forcer une dimension pendant que l'autre est bornée écraserait l'image, ce
   qui serait un autre défaut. object-fit: contain est une ceinture de sécurité
   au cas où une règle ultérieure fixerait les deux dimensions. */
.card-thumb {
  display: block;
  margin-inline: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 20rem;
  object-fit: contain;
}