/* Feuille commune à toutes les pages du site (index, fiches, bibliographie,
   variantes, schémas explicatifs). Copiée en docs/assets/site.css par
   R/site_shell.R, qui y efface  (les polices sont à côté). Direction : planches de Bertin, charte IdEst
   (décisions du 12/10/2026, voir .impeccable/surfaces/docs-index-html.md) ;
   touche brutaliste du 14/10/2026 : en-tête en cases, filets d'encre, trois
   thèmes, Miriam Libre et Quicksand (maquettes dans data-raw/design/brutalisme/). */

@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/quicksand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/quicksand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ubuntu Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ubuntu-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ubuntu Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ubuntu-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: 'Miriam Libre'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/miriam-libre-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Miriam Libre'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/miriam-libre-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Luciole (CC BY 4.0, Laurent Bourcellier et Jonathan Perez) : la police du
   thème blanc, dessinée pour les malvoyants. Fichiers complets, non découpés. */
@font-face { font-family: 'Luciole'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/luciole-regular.woff2) format('woff2'); }
@font-face { font-family: 'Luciole'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/luciole-bold.woff2) format('woff2'); }

/* Trois thèmes (14/10/2026) : clair par défaut, blanc contrasté, sombre.
   Clair : fond crème, filets d'encre, prune pour l'état courant et le survol.
   --teal est le bleu de la charte (#2E7891) assombri pour tenir 4,5:1 sur le
   crème. Titres et navigation en Miriam Libre, texte en Quicksand. */
:root {
  --ground: #faefd1; --ink: #1E2A30; --soft: #44535B; --body2: #2B3940; --deep: #003F5F; --teal: #286b82;
  --rule: #9b2367; --hair: #9b236778; --stroke: #1E2A30; --lead: #93A1A8; --off: #8A979D; --hover: #f4e4bb;
  --plate: transparent; --plate-pad: 0; --sel-bg: #003F5F; --sel-fg: #FFFFFF; --mark: #f2d27a;
  --prune: #9b2367; --on-prune: #FFFFFF; --scroll: #003F5F;
  --display: 'Miriam Libre', Arial, sans-serif; --dw: 700; --nw: 500;
  --text: Quicksand, 'Trebuchet MS', sans-serif; --tw: 500; --lh: 1.5;
  --mono: 'Ubuntu Mono', ui-monospace, monospace;
  color-scheme: light;
}
/* Blanc : fond blanc, texte à 7:1 au moins, Luciole partout, plus aéré, et
   tout agrandi d'un huitième : la racine passe à 112,5 % de la taille réglée
   par le lecteur, et les tailles en rem suivent. Il redéfinit chaque jeton
   du thème sombre. */
:root[data-theme="white"] {
  --ground: #FFFFFF; --ink: #111111; --soft: #3A4246; --body2: #1C2427; --deep: #003F5F; --teal: #1D566A;
  --rule: #9b2367; --hair: #767676; --stroke: #111111; --lead: #6B6B6B; --off: #5F666A; --hover: #F0F0F0;
  --plate: transparent; --plate-pad: 0; --sel-bg: #003F5F; --sel-fg: #FFFFFF; --mark: #FFE16B;
  --display: 'Luciole', Verdana, sans-serif; --dw: 700; --nw: 400;
  --text: 'Luciole', Verdana, sans-serif; --tw: 400; --lh: 1.6;
  font-size: 112.5%;
  color-scheme: light;
}
/* Sombre : tiré du bleu profond IdEst. Les dessins à l'encre grise (schémas,
   symboles de canal, logos : img.drawing) s'y inversent, encre claire sur le
   fond, sans feuille (--ink-filter ; en gris dans la galerie, --ink-grey) ;
   les exemples ggplot2 et les photos gardent une feuille, atténuée
   (09/11/2026, revue D8). */
:root[data-theme="dark"] {
  --ground: #0B1E28; --ink: #E6EDEF; --soft: #A7B8BF; --body2: #CFDADE; --deep: #9CCFE0; --teal: #7FC0D6;
  --rule: #33505E; --hair: #1F3946; --stroke: #E6EDEF; --lead: #5E7783; --off: #6E858F; --hover: #102936;
  --plate: #E6EDEF; --plate-pad: .6rem; --sel-bg: #9CCFE0; --sel-fg: #0B1E28; --mark: #6b5a12;
  --scroll: #2E7891; --ink-filter: invert(1) hue-rotate(180deg); --ink-grey: grayscale(1) invert(1);
  color-scheme: dark;
}
/* Sans choix enregistré, la page suit le système ; un choix (clair, blanc ou
   sombre) l'emporte toujours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ground: #0B1E28; --ink: #E6EDEF; --soft: #A7B8BF; --body2: #CFDADE; --deep: #9CCFE0; --teal: #7FC0D6;
    --rule: #33505E; --hair: #1F3946; --stroke: #E6EDEF; --lead: #5E7783; --off: #6E858F; --hover: #102936;
    --plate: #E6EDEF; --plate-pad: .6rem; --sel-bg: #9CCFE0; --sel-fg: #0B1E28; --mark: #6b5a12;
    --scroll: #2E7891; --ink-filter: invert(1) hue-rotate(180deg); --ink-grey: grayscale(1) invert(1);
    color-scheme: dark;
  }
}
/* Anciens noms, encore lus par les pages bibliographie, variantes et schémas. */
:root { --bg: var(--ground); --fg: var(--ink); --mut: var(--soft); --line: var(--hair); --acc: var(--deep); }

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--tw) 1rem/var(--lh) var(--text); }
::selection { background: var(--sel-bg); color: var(--sel-fg); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
html { scrollbar-color: var(--scroll) transparent; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--dw); margin: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
code, pre { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ---- en-tête commun : des cases à filets (14/10/2026) ----
   Logo, titre, chaque langue, chaque thème et chaque entrée du lexique ont
   leur case. Survol et case courante : fond prune, texte blanc ; la case
   courante garde son « › », le thème choisi un trait blanc, pour que l'état
   ne tienne pas à la seule couleur. */
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0;
  padding: 0; border-bottom: 2px solid var(--ink); }
.top .logo { display: block; box-sizing: content-box; width: 2.6rem; height: 2.6rem; padding: .7rem 1rem;
  border-right: 2px solid var(--ink); }
.top .logo img { display: block; width: 100%; height: 100%; }
.top .home { font-family: var(--display); font-weight: var(--dw); font-size: 1.7rem; line-height: 1.15; color: var(--deep);
  margin: 0; padding: 0 1.4rem; text-decoration: none; }
a.home:hover { text-decoration: underline; }
.langs { display: flex; align-self: stretch; align-items: stretch; font-size: .9rem; }
.langs a { display: flex; align-items: center; padding: 0 1.1rem; border-left: 2px solid var(--ink);
  font-family: var(--display); font-weight: var(--nw); text-decoration: none; color: var(--ink); }
.langs a[aria-current] { font-weight: 700; }
.langs a[aria-current]::before { content: "›\00a0"; }
.themes { display: flex; }
.themes button { display: grid; place-items: center; width: 3.2rem; padding: 0; font: inherit; color: var(--ink);
  background: none; border: 0; border-left: 2px solid var(--ink); cursor: pointer; }
.themes .ico { width: 1.45rem; height: 1.45rem; vertical-align: 0; }
.themes button[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--on-prune); }
.tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; border-top: 2px solid var(--ink); }
.tabs a { padding: .7rem 1.3rem; border-right: 1px solid var(--ink); font-family: var(--display);
  font-weight: var(--nw); font-size: 1rem; text-decoration: none; color: var(--ink); }
.tabs a[aria-current] { font-weight: 700; }
.tabs a[aria-current]::before { content: "› "; }
/* Titre du site et noms des langues : la forme longue, ou la courte sur téléphone (09/11/2026, revue D9). */
.home .short, .langs .short { display: none; }
/* Les sept onglets tiennent sur une ligne dès 1240 px environ : sans ce resserrement,
   « Bibliographie et colophon » passait seul à la ligne à 1280 (29/10/2026). */
@media (min-width: 761px) and (max-width: 1440px) {
  .tabs a { padding: .7rem .8rem; font-size: .95rem; }
}
.langs a:hover, .langs a:focus-visible, .langs a[aria-current], .tabs a:hover, .tabs a:focus-visible, .tabs a[aria-current],
.themes button:hover, .themes button:focus-visible, .themes button[aria-pressed="true"] {
  background: var(--prune); color: var(--on-prune); }
.langs a:focus-visible, .tabs a:focus-visible, .themes button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
img.catlogo { width: 1.35rem; height: 1.35rem; margin-right: .4rem; vertical-align: -.3em; }
/* Un dessin à l'encre grise (schéma, symbole de canal, logo) : en thème sombre,
   encre claire sur le fond ; dans les autres thèmes, rien ne change. */
img.drawing, img.catlogo { filter: var(--ink-filter, none); }

/* ---- pages secondaires (bibliographie, variantes, schémas explicatifs) ---- */
.page-head { max-width: 80rem; margin: 0 auto; padding: 2rem 2.5rem .5rem; }
.page-head h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.08; color: var(--deep); letter-spacing: -.01em; }
.sub { color: var(--soft); margin: .6rem 0 0; font-size: 1rem; max-width: 70ch; }
.controls { position: sticky; top: 0; background: var(--ground); padding: .7rem 2.5rem; border-bottom: 1px solid var(--rule); z-index: 2; }
.controls .inner { max-width: 80rem; margin: 0 auto; display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
input[type=search] { flex: 1 1 14rem; font: inherit; font-size: 1.05rem; color: var(--ink); background: none;
  border: 0; border-bottom: 2px solid var(--stroke); border-radius: 0; padding: .45rem 0; }
input[type=search]::placeholder { color: var(--soft); }
input[type=search]:focus { outline: none; border-bottom-color: var(--deep); box-shadow: 0 2px 0 var(--deep); }
.count { color: var(--soft); font-size: .95rem; font-variant-numeric: tabular-nums; }
main { min-width: 0; }
body:not(.index):not(.fiche-page) main { max-width: 80rem; margin: 0 auto; padding: 1rem 2.5rem 4rem; }
.ico { width: 1em; height: 1em; vertical-align: -.15em; flex: none; pointer-events: none; }
.wk { display: inline-flex; margin-left: .3em; color: var(--soft); vertical-align: -.12em; cursor: help; }
.wk + .wk { margin-left: .2em; }
/* La flèche ↗ vers la source : encadrée, pour se distinguer du texte autrement
   que par sa couleur (axe link-in-text-block, 09/11/2026, revue D11). */
a.ext { margin-left: .3em; padding: 0 .15em; border: 1px solid currentColor; text-decoration: none; font-size: .8em; }
.wk .ico { width: .95em; height: .95em; }
/* Séparateur des crédits et notices (illustrations/icones/separation.svg),
   dessiné une fois par page dans .sprite, repris par <use>. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sep .ico { width: .62em; height: .62em; vertical-align: .02em; }
.twin { font-size: .85em; margin-left: .3em; }
.oa { margin: .35rem 0 0; color: var(--soft); }
.oa a { color: inherit; }
.todo { color: var(--rule); }

@media (max-width: 760px) {
  .top { grid-template-columns: auto minmax(0, 1fr); }
  .top .logo { width: 2.2rem; height: 2.2rem; padding: .6rem .8rem; }
  .top .home { font-size: 1.35rem; padding: .6rem 1rem; }
  .home .long, .langs .long { display: none; } .home .short, .langs .short { display: inline; }
  .langs { grid-column: 1 / -1; border-top: 2px solid var(--ink); }
  .langs a { padding: .55rem .6rem; font-size: .85rem; line-height: 1.2; }
  .langs a:first-child { border-left: 0; }
  .themes { margin-left: auto; }
  .themes button { width: 2.6rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  /* Des onglets restent hors de vue à droite : un fondu couvre le bord de leur
     rangée (classe posée par theme.js ; un masque sur le conteneur défilerait avec lui). */
  .top { position: relative; }
  .top:has(.tabs.more)::after { content: ""; position: absolute; right: 0; bottom: 0; width: 3.5rem; height: 2.7rem;
    pointer-events: none; background: linear-gradient(to right, transparent, var(--ground) 80%); }
  .tabs a { padding: .6rem 1rem; }
  .page-head { padding: 1.4rem 1rem .4rem; }
  .controls { padding: .6rem 1rem; }
  body:not(.index):not(.fiche-page) main { padding: 1rem 1rem 3rem; }
}
/* Code R coloré par highr (R/fiche_page.R, R/theme_page.R), palette Solarized d'Ethan
   Schoonover : claire, sombre dans le thème sombre ; les accents ne changent pas.
   Le texte clair prend base01 (#586e75) plutôt que base00, pour tenir 4,5:1. */
:root {
  --sol-bg: #fdf6e3; --sol-fg: #586e75; --sol-com: #93a1a1;
  --sol-str: #2aa198; --sol-num: #d33682; --sol-kwd: #268bd2; --sol-kwc: #b58900; --sol-kwb: #859900; --sol-opt: #cb4b16;
  --backdrop: rgb(11 30 40 / .72);
}
/* Sur le fond sombre, le bleu des mots-clés et le magenta des nombres s'éclaircissent pour tenir 4,5:1 (revue D11). */
:root[data-theme="dark"] { --sol-bg: #002b36; --sol-fg: #839496; --sol-com: #586e75; --sol-kwd: #5aaef0; --sol-num: #ea7fb7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --sol-bg: #002b36; --sol-fg: #839496; --sol-com: #586e75; --sol-kwd: #5aaef0; --sol-num: #ea7fb7; }
}
.code pre { background: var(--sol-bg); color: var(--sol-fg); }
.code .hl.com { color: var(--sol-com); font-style: italic; }
.code .hl.str, .code .hl.sng, .code .hl.slt { color: var(--sol-str); }
.code .hl.num { color: var(--sol-num); }
.code .hl.kwd { color: var(--sol-kwd); }
.code .hl.kwc { color: var(--sol-kwc); }
.code .hl.kwa, .code .hl.kwb { color: var(--sol-kwb); }
.code .hl.opt { color: var(--sol-opt); }
/* Visionneuse (viewer.js), partagée par la fiche et la page des exemples ggplot2. */
.zoom { display: block; cursor: zoom-in; }
.zoom:hover img { outline: 1px solid var(--hair); outline-offset: 2px; }
/* Exemple animé : image fixe, le GIF joue au clic dans la visionneuse. */
.zoom.anim { position: relative; cursor: pointer; }
/* La flèche est un dessin du développeur (illustrations/icones/fleche_droite.svg),
   dans une case prune comme celles de l'en-tête. */
.zoom.anim .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  color: var(--on-prune); background: var(--prune); border: 2px solid var(--on-prune); }
.zoom.anim .play .ico { width: 1.5rem; height: 1.5rem; vertical-align: 0; }
.zoom.anim:hover .play { background: var(--deep); color: var(--ground); }
.viewer { width: min(92vw, 70rem); max-height: 92vh; padding: 1.2rem 1.4rem 1rem; border: 1px solid var(--stroke);
  background: var(--ground); color: var(--ink); }
.viewer::backdrop { background: var(--backdrop); }
.viewer img { display: block; width: 100%; max-height: calc(92vh - 7rem); object-fit: contain; background: var(--plate); padding: var(--plate-pad); }
.viewer .vcap { margin: .7rem 0 0; font-size: .95rem; color: var(--soft); }
.viewer .vcap a { color: inherit; }
.viewer .close { display: block; margin: 0 0 .6rem auto; font: inherit; font-size: .95rem; color: var(--deep); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }