/* Encre sur papier : une famille, une grille, aucune ressource tierce, aucun mouvement.
   La famille : Atkinson Hyperlegible Next, dessinée pour les lecteurs malvoyants. Le texte en graisse moyenne (500),
   les grands titres et le nom du Bureau en graisse normale (400), où la taille suffit à donner du corps ; le gras (700)
   pour ce que les rapports mettent en avant.
   Une seule grille de six colonnes porte la barre, la page et le pied : chaque chose se pose sur ses lignes.
   Colonnes 1-2, ce qui nomme (le Bureau, les titres de section, les intitulés) ; colonnes 3-6, ce qui se lit. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fontes/AtkinsonHyperlegibleNext-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fontes/AtkinsonHyperlegibleNext-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fontes/AtkinsonHyperlegibleNext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fontes/AtkinsonHyperlegibleNext-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Le gras, pour les rapports seuls : un navigateur ne charge une police que si une page s'en sert. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fontes/AtkinsonHyperlegibleNext-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --encre: #1a1a1a;
  --sourd: #5c6066;
  --lien: #1f3a8a;
  --trait: #c8cacd;
  --papier: #fff;
  --page: 64rem;                              /* la largeur la plus grande de la grille : la colonne du texte y tient 40 cadratins */
  --marge: clamp(1rem, 3vw, 3rem);            /* du bord de l'écran à la grille */
  --ecart: clamp(1rem, 1.75vw, 2rem);         /* d'une colonne à l'autre */
  --mesure: 38em;                             /* la plus longue ligne de texte */
}

* { box-sizing: border-box; }

/* Le texte grandit avec l'écran, de 16 à 20 px : la page se remplit sans que la ligne s'allonge. */
html { color: var(--encre); background: var(--papier); font-size: clamp(1rem, .55rem + .75vw, 1.25rem); }

body {
  margin: 0;
  font: 500 1rem/1.6 "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size-adjust: .545;   /* la hauteur d'x de Luciole : le texte se lit à la même taille qu'avant (après le raccourci font, qui la remet à zéro) */
  font-kerning: normal;
  hanging-punctuation: first;
}

.evitement { position: absolute; left: -100vw; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 1; padding: .5rem .75rem; background: var(--papier); outline: 2px solid var(--encre); }

/* Chaque bloc a la largeur de la grille, et ses traits aussi. */
.bandeau, .entete, main, footer { width: min(var(--page), 100% - 2 * var(--marge)); margin-inline: auto; }

a { color: var(--lien); text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
ul { padding-left: 1.25rem; }
li { margin-bottom: .35rem; }
.des { font-style: italic; }   /* le nom du Bureau, tel que l'illustration le dessine */

/* La barre : le nom du Bureau, les trois pages de l'instrument, la langue. */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-block: 1rem; border-bottom: 1px solid var(--encre); }
.bandeau ul { list-style: none; margin: 0; padding: 0; }
.bandeau li { margin: 0; }
.marque { flex-basis: 100%; color: var(--encre); font-size: 1.25rem; text-decoration: none; }
.marque img { display: block; height: 2.75rem; width: auto; }   /* la façade en élévation : le lien vers l'accueil */
.principal ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.principal a { color: var(--encre); text-decoration: none; }
.principal a:hover, .marque:hover { text-decoration: underline; }
.principal a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.marque:focus-visible, .principal a:focus-visible { outline-color: var(--encre); }

/* Le choix de la langue : deux liens, encre sur papier ; la langue en cours est en papier sur encre. */
.langues { margin-left: auto; }
.langues ul { display: flex; }
.langues a { display: block; min-width: 5.5rem; padding: .3rem .75rem; text-align: center; font-size: .9375rem; line-height: 1.5;
             color: var(--encre); background: var(--papier); border: 1px solid var(--encre); text-decoration: none; }
.langues li + li a { border-left: 0; }
.langues a[aria-current] { color: var(--papier); background: var(--encre); }
.langues a:not([aria-current]):hover { text-decoration: underline; }
.langues a:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; position: relative; }

/* L'illustration, sur l'accueil seul : toute la largeur de la grille. */
.entete { margin-block: 1.5rem 0; }
.entete img { display: block; width: 100%; height: auto; }

/* La page. */
main { padding-bottom: 4rem; }
main > * { max-width: var(--mesure); }
h1, h2, h3 { font-weight: 500; line-height: 1.2; }
h1 { font-weight: 400; font-size: clamp(2.25rem, 1rem + 4.5vw, 5rem); line-height: 1.05; margin: 2.5rem 0 2rem; text-wrap: balance; max-width: none; }
h2 { font-size: 1.5rem; margin: 3rem 0 .75rem; text-wrap: balance; }
main > h2 { padding-top: .75rem; border-top: 1px solid var(--encre); }
h3 { font-size: 1rem; font-style: italic; margin: 1.75rem 0 .25rem; }
h4 { font-size: 1rem; font-weight: 500; margin: 1.5rem 0 .25rem; }
p, ul, ol, dl, table { margin: 0 0 1rem; }
main h1, main h2, main li, main dd { overflow-wrap: anywhere; }

/* La ligne d'état, telle qu'elle ouvre un rapport : un spécimen, posé en papier sur encre. */
.etat { max-width: none; margin: 2.5rem 0; padding: clamp(1.25rem, 3vw, 2.5rem); color: var(--papier); background: var(--encre); }
.etat p { font-size: clamp(1.25rem, .5rem + 2vw, 2.25rem); line-height: 1.3; margin: 0; }
.etat figcaption { color: var(--trait); font-size: .9375rem; margin-top: 1rem; }

table { width: 100%; border-collapse: collapse; }
caption { text-align: left; color: var(--sourd); font-size: .9375rem; caption-side: bottom; padding-top: .5rem; }
th, td { text-align: left; vertical-align: top; padding: .6rem .5rem .6rem 0; border-bottom: 1px solid var(--trait); }
thead th { font-weight: 500; font-style: italic; border-bottom-color: var(--encre); }
td:last-child, th:last-child { text-align: right; white-space: nowrap; padding-right: 0; }
tbody th { font-weight: 500; }
tbody td { color: var(--sourd); }

dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1.25rem; }
dt { font-style: italic; }
dd { margin: 0; }

code, pre { font: inherit; }
pre { overflow-x: auto; padding: .75rem 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
main code { color: var(--sourd); overflow-wrap: anywhere; }
.meta { color: var(--sourd); font-size: .9375rem; }

/* Le formulaire du relevé, et le rapport qu'il rend. */
form { max-width: none; }
label { display: block; margin-bottom: .25rem; }
input[type="url"] { display: block; width: 100%; font: inherit; font-size: 1.25rem; color: var(--encre); background: var(--papier); padding: .55rem .65rem; border: 1px solid var(--encre); border-radius: 0; }
input[type="file"] { display: block; font: inherit; max-width: 100%; }
::file-selector-button { font: inherit; color: var(--encre); background: var(--papier); padding: .3rem .75rem; margin-right: .75rem; border: 1px solid var(--encre); border-radius: 0; }
button { font: inherit; color: var(--papier); background: var(--encre); padding: .6rem 1.25rem; border: 1px solid var(--encre); border-radius: 0; cursor: pointer; }
button:hover { text-decoration: underline; }
input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
select { font: inherit; max-width: 100%; justify-self: start; color: var(--encre); background: var(--papier); padding: .35rem .5rem; border: 1px solid var(--encre); border-radius: 0; }
.page-rapport h1 { font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); }

/* Le pied : qui publie, le plan du site par groupes, et le nom du Bureau à la largeur exacte de la page. */
footer { container-type: inline-size; color: var(--sourd); font-size: .9375rem; padding-top: 1.5rem; border-top: 1px solid var(--encre); }
footer a { color: var(--encre); }
.mention { margin: 0 0 1.5rem; }
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--ecart); }
.plan h2 { font-size: .9375rem; color: var(--sourd); margin: 0 0 .5rem; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { margin-bottom: .3rem; }
.plan a { text-decoration: none; }
.plan a:hover, .plan a[aria-current="page"] { text-decoration: underline; }
/* « Bureau des Surfaces » mesure 9,92 cadratins (Atkinson Hyperlegible Next, 400, à la hauteur d'x réglée plus haut) :
   à 1/10,05 de la largeur, le nom la remplit sans la dépasser. */
.signature { font-weight: 400; font-size: 9vw; font-size: calc(100cqi / 10.05); line-height: 1; white-space: nowrap; color: var(--encre); margin: 2.5rem 0 0; padding-bottom: .12em; }

.page-criteres main > h2 { font-size: 1.25rem; margin-top: 2rem; }

/* À partir de 60 em, la grille de six colonnes. */
@media screen and (min-width: 60em) {
  .bandeau, main, footer { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--ecart); }
  .bandeau { align-items: center; padding-block: 1rem; }
  .marque { grid-column: 1 / span 2; }
  .principal { grid-column: 3 / span 3; }
  .principal ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ecart); }
  .principal, .langues { grid-row: 1; }
  .langues { grid-column: 5 / -1; justify-self: end; }   /* sur la sixième colonne, et sur la cinquième s'il lui faut la place */

  /* Chaque titre de section se pose dans la marge, à hauteur de ce qu'il ouvre ; un trait les unit. */
  main { align-items: start; }
  main > * { grid-column: 3 / -1; max-width: none; }
  main > h1 { grid-column: 1 / -1; }
  main > h2 { grid-column: 1 / span 2; grid-row-end: span 2; }
  main > h2, main > h2 + * { margin-top: 3rem; padding-top: .9rem; border-top: 1px solid var(--encre); }
  main > h2 { margin-right: calc(-1 * var(--ecart)); padding-right: var(--ecart); }
  main > h2 + h3 { margin-top: 3rem; }
  main > h1 + h2, main > h1 + h2 + * { margin-top: 1rem; }
  main > .etat { grid-column: 1 / -1; }
  main { font-size: 1.0625rem; }

  /* Les critères : une ligne par règle, comme un catalogue. Le nom, ce qu'elle sert, les textes dont elle vient. */
  .page-criteres main > h2 { grid-row-end: auto; font-size: 1.125rem; margin-top: 0; padding-block: .9rem; border-top-color: var(--trait); }
  .page-criteres main > h2 + p { grid-column: 3 / span 3; margin: 0; padding-block: .9rem; border-top-color: var(--trait); margin-right: calc(-1 * var(--ecart)); padding-right: var(--ecart); }
  .page-criteres main > p.meta { grid-column: 6; margin: 0; padding-block: 1rem .9rem; border-top: 1px solid var(--trait); text-align: right; }
  .page-criteres main > h2:nth-of-type(1), .page-criteres main > h2:nth-of-type(1) + p, .page-criteres main > h2:nth-of-type(1) + p + .meta { border-top-color: var(--encre); margin-top: 2rem; }

  /* Le formulaire : ses intitulés dans la marge, ses champs dans la colonne du texte. */
  main > form { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; row-gap: 1rem;
                margin: 1.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--encre); }
  form > p { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; margin: 0; }
  form label { grid-column: 1 / span 2; margin: 0; }
  form input:not([type="hidden"]), form select { grid-column: 3 / -1; }
  form button { grid-column: 3 / span 2; justify-self: start; }

  /* Le pied : qui publie dans la marge, le plan dans les quatre colonnes du texte. */
  .mention { grid-column: 1 / span 2; }
  .plan { grid-column: 3 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .signature { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
  .etat p { font-size: 1.125rem; }
  th, td { overflow-wrap: anywhere; }
  td:last-child, th:last-child { white-space: normal; }
  dl { grid-template-columns: 1fr; gap: 0; }
  dd { margin-bottom: .6rem; }
}