/* JusticeStat, « Le Registre » (Paul, 24/10: square, unlike the rounded AI sites, original but serious). The page reads like a typeset
   judicial register: warm paper, ink rules (thick-thin double rule, hairlines), a 12-column grid, numbered sections (§ 01…), a serif
   for titles and figures (Source Serif 4) and a sober sans for data and labels (Public Sans), one calm accent (verdigris).
   No rounded corner, no shadow, no gradient other than hard-stop lines. Contrasts on the paper (WCAG): text 12:1, muted 5.9:1,
   accent 7:1, control borders 3.6:1. Background: the ledger lines draw themselves once (under 5 s) and the balance settles; on
   browsers that support it, a reading mark follows the scroll in the margins. Nothing moves under prefers-reduced-motion. */
/* latin, and latin-ext for the Czech and other court names (ě, ř, ů…): downloaded only by pages that use those letters */
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4-latin-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; 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: "Source Serif 4"; src: url("polices/source-serif-4-latin-ext-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Public Sans"; src: url("polices/public-sans-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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: "Public Sans"; src: url("polices/public-sans-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }
:root {
  --papier: #f5f2ea; --surface: #fbfaf6; --raie: #f1eee4; --sable: #eae4d3; --teinte: #e3eae2;
  --encre: #14201d; --texte: #26312e; --doux: #556059; --filet: #cdc6b6; --controle: #837e6c;
  --accent: #1d5b4f; --accent-f: #12403a;
  --pied-t: #ede9dd; --pied-d: #b5bdb5;
  --c1: #1d5b4f; --c2: #8a6a1c; --c3: #3d6a8e; --c4: #7a5890; --c5: #657169; --c6: #8a7f5e;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* thick-thin double rule (3 px ink, 3 px of paper, 1 px ink), drawn as background so it never adds a box */
  --double: linear-gradient(var(--encre), var(--encre)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--encre), var(--encre)) 0 6px / 100% 1px no-repeat;
  color-scheme: light;
}
* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; background: var(--papier); }
body { margin: 0; color: var(--texte); font: 400 18px/1.62 var(--serif); font-optical-sizing: auto; overflow-x: hidden; }
a { color: var(--texte); text-decoration: none; }
a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
/* Links in text: text colour, thin underline (WCAG 1.4.1). */
p a, .note a, td a, th a, .voir a, .barres .lib a, .texte li a { text-decoration: underline; text-decoration-color: var(--controle); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:hover, td a:hover, th a:hover, .voir a:hover, .barres .lib a:hover, .texte li a:hover { color: var(--accent-f); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); color: var(--encre); font-weight: 460; letter-spacing: -.012em; }
h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); line-height: 1.02; font-weight: 340; letter-spacing: -.02em; margin: .25em 0 .35em; }
h2 { font-size: 2.125rem; line-height: 1.12; margin: 0 0 .6em; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .4em; }
strong { color: var(--encre); font-weight: 600; }
.cadre { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
svg.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; flex: none; vertical-align: -.22em; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 18px; background: var(--encre); color: var(--pied-t); font: 600 15px var(--sans); }
.evitement:focus { top: 12px; color: var(--pied-t); }
.para, .sommaire-t, .rapides-t, .tuile-l, .menu > a, .ariane ol, .tableau thead th, .pied-col h2, .surtitre {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Fixed background: two ledger lines on the outer edges of the text column, drawn once top to bottom, and the balance of the
   logo, very pale, which settles once. Decorative only (aria-hidden), behind everything, no layout cost. */
.fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.reglure { position: absolute; top: 0; bottom: 0; left: 50%; width: min(1176px, calc(100% - 24px)); transform: translateX(-50%); display: flex; justify-content: space-between; }
.reglure i { display: block; width: 1px; height: 100%; background: rgba(20, 32, 29, .07); transform-origin: 50% 0; }
/* the reading mark: two short ticks just outside the text column, never across the text */
.reglure b { display: none; position: absolute; left: -14px; right: -14px; top: 0; height: 2px; opacity: .6; background: linear-gradient(90deg, var(--accent) 0 22px, transparent 22px calc(100% - 22px), var(--accent) calc(100% - 22px)); }
.fond-m { position: absolute; right: -5vw; bottom: -8vh; width: min(52vw, 560px); height: auto; color: var(--accent); opacity: .055; stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .reglure i { animation: trace 2.4s cubic-bezier(.25, .6, .3, 1) calc(var(--i) * 120ms) both; }
  .fond-m .fleau { transform-box: view-box; transform-origin: 32px 17px; animation: fleau 4s ease-in-out .6s 1; }
  .fond-m .plateau-g { animation: plateau-g 4s ease-in-out .6s 1; }
  .fond-m .plateau-d { animation: plateau-d 4s ease-in-out .6s 1; }
  /* Scroll-driven (user-initiated, so no time limit): the reading mark follows the page, the balance drifts up a little. */
  @supports (animation-timeline: scroll()) {
    .reglure b { display: block; animation: lecture linear both; animation-timeline: scroll(root block); }
    .fond-m { animation: derive linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes trace { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fleau { 0%, 100% { transform: none; } 30% { transform: rotate(-3deg); } 65% { transform: rotate(1.4deg); } }
@keyframes plateau-g { 0%, 100% { transform: none; } 30% { transform: translateY(.95px); } 65% { transform: translateY(-.45px); } }
@keyframes plateau-d { 0%, 100% { transform: none; } 30% { transform: translateY(-.95px); } 65% { transform: translateY(.45px); } }
@keyframes lecture { from { transform: none; } to { transform: translateY(calc(100vh - 1px)); } }
@keyframes derive { from { transform: none; } to { transform: translateY(-9vh); } }

/* Header: logo in a square frame, then the country's menu (country pages) or the country selector (other pages), closed by the
   double rule. */
.bandeau-apercu { background: var(--sable); color: var(--encre); border-bottom: 1px solid var(--filet); text-align: center; font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 12px 8px; }
.entete { padding-bottom: 7px; background: linear-gradient(var(--encre), var(--encre)) 0 100% / 100% 1px no-repeat, linear-gradient(var(--encre), var(--encre)) 0 calc(100% - 4px) / 100% 3px no-repeat, var(--papier); }
.entete-l { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 14px; color: var(--encre); font: 600 1.45rem/1 var(--serif); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; color: var(--accent-f); }
.logo-m { width: 56px; height: 56px; flex: none; padding: 6px; border: 1px solid var(--encre); color: var(--accent); background: var(--surface); }
.logo-t { color: inherit; }
.menu { display: flex; align-items: center; margin-left: auto; }
.menu > a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; color: var(--texte); }
.menu > a:hover { color: var(--encre); text-decoration: none; box-shadow: inset 0 -2px 0 var(--controle); }
.menu > a[aria-current] { color: var(--encre); box-shadow: inset 0 -3px 0 var(--accent); }
.pays-nom { display: inline-flex; align-items: center; min-height: 40px; padding-left: 16px; border-left: 1px solid var(--controle); color: var(--accent-f); font: 400 1.45rem/1 var(--serif); letter-spacing: -.01em; }
.pays-nom:hover { color: var(--encre); text-decoration: none; }
.selecteur { position: relative; }
.selecteur summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--encre); background: var(--surface); color: var(--encre); font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.selecteur summary::-webkit-details-marker { display: none; }
.selecteur summary .ic { color: var(--accent); }
.selecteur summary::after { content: ""; width: 7px; height: 7px; margin: -4px 0 0 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.selecteur summary:hover, .selecteur[open] summary { background: var(--encre); color: var(--pied-t); }
.selecteur summary:hover .ic, .selecteur[open] summary .ic { color: var(--pied-t); }
.selecteur[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.selecteur ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; margin: 0; padding: 6px 0; list-style: none; background: var(--surface); border: 1px solid var(--encre); border-top: 3px solid var(--encre); }
.selecteur li a { display: block; padding: 11px 18px; color: var(--encre); font: 400 1.15rem/1.2 var(--serif); }
.selecteur li a:hover { background: var(--teinte); color: var(--accent-f); text-decoration: none; }
.langue { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--controle); color: var(--texte); font: 600 13px var(--sans); }
.langue:hover { background: var(--encre); border-color: var(--encre); color: var(--pied-t); text-decoration: none; }
.langue .ic { color: inherit; }

main.cadre { padding-top: 8px; padding-bottom: 24px; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 14px 0 12px; list-style: none; color: var(--doux); }
.ariane li + li::before { content: "/"; margin: 0 8px 0 4px; color: var(--controle); }
.ariane a { color: var(--doux); }
.ariane [aria-current] { color: var(--encre); }

/* Overview: title and lead on 8 columns, quick links on 4, then the key figures under a 3 px rule. */
.tete-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; padding: 40px 0 44px; }
.tete-texte { grid-column: 1 / span 8; }
.surtitre { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--accent-f); line-height: 1.5; }
.surtitre::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--encre); }
.chapo { font-size: 1.3rem; line-height: 1.5; font-weight: 380; max-width: 40em; margin: 0; }
.chapo strong { font-weight: 620; }
.rapides { grid-column: 9 / -1; align-self: end; display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0 8px; border-top: 1px solid var(--encre); background: var(--surface); }
.rapides-t { grid-column: 1 / -1; margin: 0; padding: 10px 14px 4px; color: var(--doux); }
.acces { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 30px 8px 14px; color: var(--encre); font: 600 14px/1.3 var(--sans); }
.acces .ic { color: var(--accent); }
.acces::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.acces:hover { background: var(--encre); color: var(--pied-t); text-decoration: none; }
.acces:hover .ic { color: var(--pied-t); }

.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--encre); border-bottom: 1px solid var(--encre); background: var(--surface); }
.tuiles li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 16px 20px 22px; }
.tuile-n { font: 300 1.3rem/1 var(--serif); color: var(--accent); }
.tuile-ic { position: absolute; top: 16px; right: 18px; color: var(--accent); }
.tuile-l { margin-top: 14px; color: var(--doux); line-height: 1.35; font-size: 12px; }
.tuiles b { font: 380 clamp(2.4rem, 1.7rem + 2vw, 3.4rem)/1.05 var(--serif); color: var(--encre); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.tuiles small { font: 400 14px/1.4 var(--sans); color: var(--doux); }

/* The register: numbered contents on 3 columns (sticky), the sections on 9. Without JavaScript the contents are a list of anchors
   and every section is shown; with it, they act as vertical tabs (site.js). */
.registre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; margin: 52px 0 0; }
.sommaire { grid-column: 1 / span 3; position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--papier); }
.panneaux { grid-column: 4 / -1; padding-left: 24px; min-width: 0; }
.sommaire-t { margin: 0; padding: 16px 0 8px; color: var(--encre); background: var(--double); }
.onglets { display: flex; flex-direction: column; }
.onglets a { display: flex; align-items: baseline; gap: 12px; padding: 10px 10px 10px 4px; color: var(--texte); font: 600 14.5px/1.3 var(--sans); }
.o-n { flex: none; min-width: 1.6em; font: 300 1.3rem/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.o-l { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.o-l::after { content: ""; flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--controle); }
.onglets a:hover { background: var(--teinte); color: var(--encre); text-decoration: none; }
.onglets a[aria-selected="true"] { background: var(--encre); color: var(--pied-t); padding-left: 12px; }
.onglets a[aria-selected="true"] .o-n { color: var(--pied-d); }
.onglets a[aria-selected="true"] .o-l::after { border-bottom-color: rgba(237, 233, 221, .35); }
.avec-onglets .panneau[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .avec-onglets .panneau:not([hidden]) { animation: apparait .25s ease-out; } }
@keyframes apparait { from { transform: translateY(6px); } to { transform: none; } }

/* Sections */
.panneau { padding: 0 0 8px; margin: 0 0 44px; border-top: 3px solid var(--encre); scroll-margin-top: 16px; }
.p-tete { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 0 0 18px; padding: 16px 0 6px; }
svg.p-ic { grid-row: 1 / span 2; width: 46px; height: 46px; padding: 10px; border: 1px solid var(--encre); color: var(--accent); background: var(--surface); stroke-width: 1.4; }
.para { margin: 0 0 2px; color: var(--accent-f); }
.p-tete h2 { margin: 0; }
.panneau p { max-width: 42em; }
.panneau .voir { max-width: none; }
.panneau .note { max-width: 62em; }
.note { font: 400 13.5px/1.5 var(--sans); color: var(--doux); margin: 12px 0 0; }
.retour { display: none; margin: 18px 0 0; font: 600 14px var(--sans); }
.voir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 22px 0 0; font: 400 15px var(--sans); }
.voir > span { font-weight: 700; color: var(--encre); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }
.voir > .ic { color: var(--accent); }
.voir a { display: inline-flex; align-items: center; min-height: 24px; }
.voir a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 0; background: var(--accent); vertical-align: .15em; }
.filtres { display: flex; flex-wrap: wrap; margin: 16px 0 14px; }
.filtres button { margin: 0 -1px 0 0; padding: 9px 16px; border: 1px solid var(--controle); background: var(--surface); color: var(--texte); font: 600 13.5px var(--sans); cursor: pointer; }
.filtres button:hover { background: var(--teinte); }
.filtres button[aria-pressed="true"] { position: relative; background: var(--encre); border-color: var(--encre); color: var(--pied-t); }

/* Tables: ink rule on top, rows told apart by alternate shading (no inner rules), aligned figures, square gauge under the values.
   Filtered tables are shaded by site.js (class z), since hidden rows break :nth-child. */
.tableau { overflow-x: auto; margin: 18px 0 0; background: var(--surface); border-top: 2px solid var(--encre); border-bottom: 1px solid var(--encre); -webkit-overflow-scrolling: touch; }
.tableau table { width: 100%; border-collapse: collapse; font: 500 15px/1.4 var(--sans); }
.tableau caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font: 600 15px var(--sans); color: var(--encre); }
.tableau th, .tableau td { padding: 10px 14px; text-align: left; vertical-align: middle; }
.tableau thead th { color: var(--doux); font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid var(--controle); }
.tableau tbody th { font-weight: 500; color: var(--texte); }
.tableau:not([data-zebre]) tbody tr:nth-child(even) > *, .tableau tbody tr.z > * { background: var(--raie); }
.tableau tbody tr:hover > *, .tableau:not([data-zebre]) tbody tr:hover > * { background: var(--teinte); }
.tableau tr[hidden] { display: none; }
.n { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jauge { position: relative; display: inline-block; min-width: 80px; padding: 0 0 7px; }
.jauge::before, .jauge::after { content: ""; position: absolute; right: 0; bottom: 0; height: 3px; }
.jauge::before { width: 100%; background: var(--teinte); }
.jauge::after { width: var(--v); max-width: 100%; background: var(--c1); }

/* Charts (SVG and CSS, colours --c1 to --c6): square bars; in the stacked bars every other series is hatched, so colour is never
   the only cue (the figures are also in the tables). */
figure { margin: 22px 0 0; }
figcaption { font: 600 15px/1.4 var(--sans); color: var(--encre); margin: 0 0 12px; }
.graphe { display: block; width: 100%; height: auto; margin: 14px 0 0; font-family: var(--sans); }
.graphe .grille { stroke: var(--controle); stroke-width: 1; }
.graphe .axe { fill: var(--doux); font-size: 12px; }
.graphe .val { fill: var(--encre); font-size: 13px; font-weight: 700; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 14px var(--sans); color: var(--doux); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende span { width: 14px; height: 14px; }
.repartition .legende { margin-top: 14px; }
.m1, .m3, .m5 { background-image: repeating-linear-gradient(135deg, rgba(251, 250, 246, .5) 0 1.5px, transparent 1.5px 5px); }
.m3 { background-image: repeating-linear-gradient(45deg, rgba(251, 250, 246, .5) 0 1.5px, transparent 1.5px 5px); }
.m5 { background-image: repeating-linear-gradient(0deg, rgba(251, 250, 246, .55) 0 1.5px, transparent 1.5px 4.5px); }
.barres ul, .repartition ul { margin: 0; padding: 0; list-style: none; }
.barres li { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px; align-items: center; padding: 5px 0; font: 400 14.5px var(--sans); }
.barres .lib { overflow-wrap: anywhere; line-height: 1.3; }
.barre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barre i { display: block; height: 14px; flex: 0 1 auto; min-width: 2px; }
.barre b { font: 700 13.5px var(--sans); color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.repartition > ul:not(.legende) > li { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 14px; align-items: center; padding: 6px 0; font: 400 14.5px var(--sans); }
.pile { display: flex; height: 24px; gap: 2px; }
.pile i { display: block; height: 100%; min-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .avec-onglets .panneau:not([hidden]) .barre i, .avec-onglets .panneau:not([hidden]) .pile { transform-origin: left center; animation: pousse .7s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes pousse { from { transform: scaleX(.02); } to { transform: none; } }
.panneau .tuiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 20px 0 0; border-top-width: 1px; }
.panneau .tuiles li { padding-top: 14px; }
.panneau .tuiles b { font-size: 2.3rem; }
.panneau .tuile-l { margin-top: 0; padding-right: 30px; }

/* « Comprendre ces chiffres »: reading text before the questions. */
.comprendre { margin: 60px 0 0; border-top: 3px solid var(--encre); }
.c-rubriques { display: grid; gap: 28px; }
.c-rubrique h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 1.22rem; }
svg.c-ic { width: 34px; height: 34px; padding: 6px; border: 1px solid var(--controle); color: var(--accent); background: var(--surface); stroke-width: 1.5; }
.c-rubrique p { margin: 0; padding-left: 46px; }
@media (max-width: 600px) { .c-rubrique p { padding-left: 0; } }

/* Questions: numbered rows, square plus/minus toggle; the open question sits on the tint with an accent bar. */
.faq { margin: 60px 0 0; border-top: 3px solid var(--encre); counter-reset: q; }
.faq summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 16px 12px 16px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { counter-increment: q; content: counter(q, decimal-leading-zero); font: 300 1.3rem/1 var(--serif); color: var(--accent); text-align: right; padding-right: 8px; }
.faq summary::after { content: ""; width: 30px; height: 30px; border: 1px solid var(--controle); background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; color: var(--encre); }
.faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat; }
.faq summary:hover h3 { color: var(--accent-f); }
.faq summary h3 { margin: 0; font-size: 1.2rem; font-weight: 500; }
.faq details[open] { background: var(--teinte); box-shadow: inset 3px 0 0 var(--accent); }
.faq details p { margin: 0; padding: 0 54px 20px 64px; max-width: calc(42em + 118px); }
.a-savoir { display: flex; gap: 16px; align-items: flex-start; margin: 44px 0 0; padding: 22px 24px 20px; background: var(--double), var(--surface); border: 1px solid var(--encre); border-top: 0; font-size: 1rem; }
.mouche { flex: none; font: 400 2rem/1 var(--serif); color: var(--accent); margin-top: 2px; }
.a-savoir p { margin: 0; max-width: 52em; }
.pub { margin: 24px 0; min-height: 100px; }

/* Text pages (legal notice, privacy, sources) */
.texte { max-width: 780px; margin: 40px 0 0; padding: 0 0 24px; }
.texte h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); padding-bottom: .35em; margin-bottom: .5em; border-bottom: 3px solid var(--encre); }
.texte h2 { font-size: 1.45rem; margin: 1.8em 0 .5em; }
.texte ul { padding-left: 1.2em; }
.texte li { margin: 4px 0; }
.texte li::marker { color: var(--accent); }
.texte .tableau { max-width: 100%; }
.a-venir { text-align: center; padding: 60px 24px; margin-left: auto; margin-right: auto; }
.a-venir h1 { border-bottom: 0; }
.a-venir .logo-m { width: 76px; height: 76px; }
.bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--encre); background: var(--encre); color: var(--pied-t); font: 600 15px var(--sans); cursor: pointer; text-decoration: none !important; }
.bouton:hover { background: var(--accent-f); border-color: var(--accent-f); color: #fff; }

/* Footer: ink block opened by a paper double rule; useful links only, then the sources of the page (required there by the French
   licences, so readable: 15 px), then one line. No publisher here (legal notice only). */
.pied { margin-top: 72px; padding: 44px 0 30px; background: var(--encre); color: var(--pied-t); font: 400 15px/1.5 var(--sans); }
.pied a { color: var(--pied-t); }
.pied a:hover { color: #fff; }
.pied :focus-visible { outline-color: var(--pied-t); }
.pied-haut { display: grid; grid-template-columns: 3fr 2fr 3fr 2fr 2fr; gap: 28px 24px; padding-top: 34px; background: linear-gradient(var(--pied-t), var(--pied-t)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--pied-t), var(--pied-t)) 0 6px / 100% 1px no-repeat; }
.pied-marque p { color: var(--pied-d); margin: 16px 0 0; max-width: 300px; font-size: 15px; }
.logo-pied { color: var(--pied-t); font-size: 1.3rem; }
.logo-pied:hover { color: #fff; }
.logo-pied .logo-m { width: 48px; height: 48px; padding: 5px; border-color: var(--pied-t); background: transparent; color: var(--pied-t); }
.pied-col h2 { margin: 0 0 .8em; color: var(--pied-d); font-size: 12px; }
.pied-col ul { margin: 0; padding: 0; list-style: none; }
.pied-col li { padding: 3px 0; line-height: 1.4; }
.pied-sources { margin: 36px 0 0; border-top: 1px solid rgba(237, 233, 221, .35); font-size: 15px; color: var(--pied-t); }
.pied-sources .ps-titre { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 0 10px; color: var(--pied-d); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pied-sources .ic { color: var(--pied-d); }
.pied-sources ul { margin: 0; padding: 0; list-style: none; }
.pied-sources li { padding: 6px 0; }
.pied-sources p { margin: 12px 0 0; }
.pied-sources a { text-decoration: underline; text-decoration-color: rgba(237, 233, 221, .5); text-underline-offset: 3px; }
.pied-sources b { font-weight: 600; color: #fff; }
.pied-bas { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid rgba(237, 233, 221, .14); font-size: 14px; color: var(--pied-d); }

/* Information banner: small, square, never in the way; one link and one button. */
.bandeau { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(560px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--encre); border-top: 3px solid var(--accent); padding: 16px 20px 18px; font: 400 15px/1.5 var(--sans); }
.bandeau[hidden] { display: none; }
.bandeau p { margin: 0 0 12px; }
.bandeau-titre { display: flex; align-items: center; gap: 8px; font: 600 1.1rem var(--serif) !important; color: var(--encre); }
.bandeau-titre .ic { color: var(--accent); }
.bandeau-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; }
.bandeau-b a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.bandeau-b button { min-height: 44px; padding: 0 24px; border: 1px solid var(--encre); background: var(--encre); color: var(--pied-t); font: 600 15px var(--sans); cursor: pointer; }
.bandeau-b button:hover { background: var(--accent-f); border-color: var(--accent-f); }

@media (max-width: 1060px) {
  .tete-texte { grid-column: 1 / -1; }
  .rapides { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .pied-haut { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .tete-page + .tuiles { grid-template-columns: 1fr 1fr; }
  .registre { display: block; margin-top: 40px; }
  .sommaire { position: static; max-height: none; overflow: visible; margin: 0 0 32px; }
  .panneaux { padding-left: 0; }
  .onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  .onglets a, .o-l { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
  .onglets a { min-height: 48px; align-items: center; padding: 6px 8px; font-size: 14px; }
  .onglets a[aria-selected="true"] { padding-left: 10px; }
  .o-l::after { display: none; }
  .retour { display: block; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .cadre { padding: 0 16px; }
  h2 { font-size: 1.6rem; }
  .entete-l { gap: 12px; padding-top: 12px; padding-bottom: 0; }
  .logo { font-size: 1.25rem; gap: 11px; }
  .logo-m { width: 46px; height: 46px; padding: 5px; }
  .menu { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0 0 6px; }
  .menu > a { min-height: 44px; padding: 6px 9px; font-size: 11.5px; letter-spacing: .06em; }
  .selecteur { flex: 1; }
  .selecteur summary { width: 100%; justify-content: center; }
  .selecteur ul { left: 0; right: 0; min-width: 0; }
  .pays-nom { padding-left: 12px; font-size: 1.2rem; }
  .onglets a { gap: 8px; }
  .o-n { min-width: 1.4em; font-size: 1.1rem; }
  .langue span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langue { margin-left: auto; min-height: 44px; min-width: 44px; justify-content: center; }
  .tete-page { padding: 28px 0 32px; gap: 24px; }
  .chapo { font-size: 1.15rem; }
  .rapides { grid-template-columns: 1fr 1fr; }
  .tuiles b { font-size: 2.2rem; }
  .tuiles li { padding: 14px 14px 18px; }
  .tuile-ic { right: 12px; top: 14px; }
  .p-tete { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  svg.p-ic { width: 40px; height: 40px; padding: 8px; }
  .barres li, .repartition > ul:not(.legende) > li { grid-template-columns: 1fr; gap: 4px; }
  .graphe .axe { font-size: 19px; }
  .graphe .val { font-size: 20px; }
  .graphe .a-imp { display: none; }
  .tableau tbody th, .tableau thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .faq summary { grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 10px; }
  .faq summary::before { font-size: 1.1rem; padding-right: 4px; }
  .faq summary h3 { font-size: 1.05rem; }
  .faq details p { padding: 0 14px 18px 46px; }
  .a-savoir { padding: 20px 16px 18px; gap: 12px; }
  .pied-haut { grid-template-columns: 1fr; }
  .bandeau { left: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; }
  .fond-m { width: 90vw; right: -24vw; bottom: -4vh; }
  .reglure { width: calc(100% - 8px); }
}
@media (max-width: 400px) {
  .logo { font-size: 1.1rem; gap: 9px; }
  .logo-m { width: 40px; height: 40px; padding: 4px; }
  .pays-nom { padding-left: 10px; font-size: 1.05rem; }
  .entete-l { column-gap: 10px; }
}
@media (max-width: 340px) { .rapides { grid-template-columns: 1fr; } }
/* Contact form (legales.py, c.php): square fields like the rest of the site, labels above, honeypot out of sight. */
.texte .doux { color: var(--doux); }
.texte .petit { font-size: .9rem; }
.formulaire { margin: 28px 0 8px; max-width: 640px; }
.formulaire .champ { margin: 0 0 20px; }
.formulaire label { display: block; margin: 0 0 6px; font: 600 15px/1.3 var(--sans); color: var(--encre); }
.formulaire input, .formulaire textarea { display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--controle); border-radius: 0; background: var(--surface); color: var(--encre); font: 400 1.05rem/1.45 var(--serif); -webkit-appearance: none; appearance: none; }
.formulaire textarea { min-height: 180px; resize: vertical; }
.formulaire .champ-court input { max-width: 120px; }
.formulaire input:focus-visible, .formulaire textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.formulaire .pot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulaire .etat { min-height: 1.6em; margin: 14px 0 0; font: 600 15px/1.5 var(--sans); color: var(--accent-f); }
.formulaire .etat.erreur { color: #8a2d1c; }

@media print {
  .fond, .sommaire, .bandeau, .entete .menu, .pied-col, .retour, .langue { display: none !important; }
  .avec-onglets .panneau[hidden] { display: block !important; }
  .registre { display: block; }
  .panneaux { padding: 0; }
  .pied { background: none; color: #000; }
  .pied a, .pied-sources, .pied-bas { color: #000; }
  .pied b, .pied-sources .ps-titre, .pied-sources .ic, .pied-marque p, .pied .logo, .pied .logo-m { color: #000 !important; }
}

/* --- Recherche (accueil.py) --- */
/* Search (phase 1, in the browser). Header: a square button (revealed by site.js) opens a panel under the header with the field and
   the results. Home: a large field under the lead, the results laid over the page. Without JavaScript neither is shown. */
.rech-bouton { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--controle); background: var(--surface); color: var(--texte); cursor: pointer; }
.rech-bouton .ic { width: 1.4em; height: 1.4em; }
.rech-bouton[hidden] { display: none; }
.rech-bouton:hover, .rech-bouton[aria-expanded="true"] { background: var(--encre); border-color: var(--encre); color: var(--pied-t); }
.rech-panneau { position: absolute; right: 24px; top: calc(100% + 7px); z-index: 45; width: min(640px, calc(100% - 48px)); padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--encre); border-top: 3px solid var(--encre); }
.rech-panneau[hidden], .accueil-rech[hidden] { display: none; }
.recherche { position: relative; margin: 0; font-family: var(--sans); }
.r-etiquette, .r-etat:not(.r-vu) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r-champ { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--encre); background: var(--papier); }
.r-champ:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.r-champ .ic { color: var(--accent); width: 1.4em; height: 1.4em; }
.r-champ input { flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--encre); font: 400 1.15rem/1.2 var(--serif); outline: 0; -webkit-appearance: none; appearance: none; }
.r-champ input::placeholder { color: var(--doux); opacity: 1; }
.r-champ input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; cursor: pointer; background: linear-gradient(45deg, transparent 46%, var(--doux) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--doux) 46% 54%, transparent 54%); }
.r-liste ul { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.r-liste ul[hidden] { display: none; }
.r-liste li { margin: 0; border-bottom: 1px solid var(--filet); }
.r-liste li:last-child { border-bottom: 0; }
.r-liste a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; min-height: 48px; padding: 9px 12px; color: var(--encre); font: 400 1.08rem/1.3 var(--serif); text-decoration: none; }
.r-liste .r-type { font: 600 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.r-liste li[aria-selected="true"] a, .r-liste a:hover { background: var(--encre); color: var(--pied-t); text-decoration: none; }
.r-liste li[aria-selected="true"] .r-type, .r-liste a:hover .r-type { color: var(--pied-d); }
.r-etat.r-vu { margin: 0; padding: 12px 4px 2px; font: 400 14.5px/1.4 var(--sans); color: var(--doux); }
/* Home: large field; the results float over the page instead of pushing it down. */
.accueil-rech { margin: 30px 0 0; max-width: 40em; }
.accueil-rech .r-champ { padding: 0 18px; border-top-width: 3px; background: var(--surface); }
.accueil-rech .r-champ .ic { width: 1.7em; height: 1.7em; }
.accueil-rech .r-champ input { height: 64px; font-size: 1.35rem; }
.accueil-rech .r-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.accueil-rech .r-liste ul, .accueil-rech .r-etat.r-vu { margin: 0; background: var(--surface); border: 1px solid var(--encre); border-top: 0; }
.accueil-rech .r-etat.r-vu { padding: 14px 16px; }
.accueil-rech-aide { margin: 10px 0 0; font: 400 14px/1.5 var(--sans); color: var(--doux); }

/* Home: country cards, direct access to the French courts, subjects and institutions. */
.pays-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); border-bottom: 1px solid var(--encre); background: var(--surface); }
.pays-cartes > li { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 24px 24px; }
.pays-cartes > li + li { border-left: 1px solid var(--filet); }
.pays-cartes > li:hover { background: var(--teinte); }
.pays-cartes > li:focus-within { outline: 3px solid var(--accent); outline-offset: -3px; }
.pc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-nom { margin: 0; font: 460 1.75rem/1.1 var(--serif); letter-spacing: -.012em; }
.pc-nom a { color: var(--encre); text-decoration: none; }
.pc-nom a::after { content: ""; position: absolute; inset: 0; }
.pc-nom a:focus-visible { outline: 0; }
.pc-langue { font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); border: 1px solid var(--controle); padding: 4px 7px; white-space: nowrap; }
.pc-chiffre { margin: 4px 0 0; font: 380 clamp(2.4rem, 1.7rem + 2vw, 3.3rem)/1.05 var(--serif); letter-spacing: -.015em; color: var(--encre); font-variant-numeric: tabular-nums; }
.pc-legende { margin: 0; font: 600 12px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.pc-texte { margin: 6px 0 0; font: 400 15px/1.5 var(--sans); color: var(--texte); }
.pc-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font: 600 14px var(--sans); color: var(--accent-f); }
.acces-listes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 32px; margin: 22px 0 0; }
.acces-listes h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; }
.acces-listes h3 .ic { color: var(--accent); }
.acces-listes ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.acces-listes li { border-bottom: 1px solid var(--filet); }
.acces-listes li a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 6px; color: var(--encre); font: 500 15px/1.35 var(--sans); text-decoration: none; }
.acces-listes li a:hover { background: var(--teinte); color: var(--accent-f); text-decoration: none; }
.acces-listes li b { flex: none; font: 500 14px var(--sans); color: var(--doux); font-variant-numeric: tabular-nums; }
.acces-listes .voir { margin-top: 14px; }
.apropos-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 15px var(--sans); }
.apropos-liens li { margin: 0; }
.accueil-sections { margin-top: 52px; }
.racine { max-width: 560px; margin: 0 auto; padding: 18vh 20px 40px; text-align: center; }
.racine .logo { margin: 0 auto 28px; }
.racine h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); margin: 0 0 .5em; }
.racine p { margin: .6em 0; }
@media (max-width: 1060px) { .rech-panneau { right: 24px; } }
@media (max-width: 860px) {
  .pays-cartes { grid-template-columns: 1fr; }
  .pays-cartes > li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .acces-listes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rech-bouton { margin-left: auto; }
  .rech-bouton + .langue { margin-left: 0; }
  .rech-panneau { left: 16px; right: 16px; width: auto; padding: 12px 12px 14px; }
  .r-champ input { height: 48px; font-size: 1.05rem; }
  .accueil-rech { margin-top: 24px; }
  .accueil-rech .r-champ input { height: 56px; font-size: 1.15rem; }
  .pays-cartes > li { padding: 18px 16px 20px; }
}
@media print { .rech-bouton, .rech-panneau, .accueil-rech { display: none !important; } }