/*
 * dlc/releve-alcool: the instrument.
 *
 * The site is built around the figure and around the published scale. A tool
 * that PRODUCES a figure is therefore the one place where that direction has
 * to be at its strongest, so the relevé is composed as a document and never as
 * a calculator card: an ink plate for the reading, a paper ground for the
 * form, a cream ground for the ledger, hairlines instead of boxes, and the
 * number set larger than anything else on the site.
 *
 * Five grounds, in order, so the instrument has a floor under each of its
 * parts: paper (the entry), ink (the reading), cream (the ledger), ink (the
 * warning), paper (the published scale), cream (the contestable items).
 *
 * Every band takes its left edge from the custom properties of the document
 * (content.css): the site has ONE left margin, the one the prose column sets,
 * and this tool does not get a second one.
 *
 * No shadow, no radius, no gradient, no icon dropped in as is, no pure black
 * and no pure white: every rule below is checkable against docs/DESIGN-DNA.md.
 */

.dlc-releve {
	--dlc-releve-edge-left: var( --dlc-edge-left, 1.75rem );
	--dlc-releve-edge-right: var( --dlc-edge-right, 1.75rem );

	margin-block: clamp( 3rem, 6vw, 5rem );
	/* The site's running font is the sans; the figures below ask for the
	   serif by name, so nothing here inherits a face by accident. */
	font-family: var( --wp--preset--font-family--sans, sans-serif );
}

/* Welded to the ink plate when it opens the page: a strip of cream between
   the direct answer and the instrument would read as a mistake, not a
   rhythm. */
.dlc-band--answer + .dlc-releve,
.dlc-lede + .dlc-releve {
	margin-top: 0;
}

.dlc-releve__band {
	padding-left: var( --dlc-releve-edge-left );
	padding-right: var( --dlc-releve-edge-right );
	padding-block: clamp( 2.25rem, 4.5vw, 3.5rem );
	margin: 0;
}

.dlc-releve__inner {
	max-width: none;
}

/* The form controls are drawn here rather than inherited, so their box model
   is stated here too: without it a label with padding and height:100% comes
   out taller than the switch that holds it. Measured on the render. */
.dlc-releve input,
.dlc-releve label,
.dlc-releve button,
.dlc-releve fieldset {
	box-sizing: border-box;
}

/* FOCUS.
 *
 * The site rings a focused element in gold. Measured on the render, gold is
 * 3,2:1 on the cream of a page and 2,93:1 on the paper of a band, and a focus
 * indicator has to reach 3:1 against what is behind it. The instrument sits on
 * paper for most of its height, so its ring is ink, 12,56:1, which is the
 * colour of the document anyway; on the ink bands it becomes the light gold,
 * 6,75:1, the way every other light mark on ink does on this site.
 *
 * Reported to the project lead rather than changed site wide: the global rule
 * lives in shell.css and the nineteen other pages are out of scope here. */
.dlc-releve :focus-visible {
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 2px;
}

/* Prose never spreads with the ground: inside every band the measure stays
   the measure of the document. */
.dlc-releve__prose,
.dlc-releve__lead,
.dlc-releve__basis,
.dlc-releve__garde-text,
.dlc-releve__idle,
.dlc-releve__flag,
.dlc-releve__hint {
	max-width: var( --dlc-column, 680px );
}

/* --------------------------------------------------------------------------
   Rubrics: the heading of a zone, set as the intitulé of an article
   -------------------------------------------------------------------------- */

.dlc-releve__rubric,
.dlc-releve__subrubric {
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
	margin: 0 0 1.35rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__subrubric {
	margin-top: 3rem;
}

.dlc-releve__legend {
	display: block;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
	margin: 0 0 0.6rem;
	padding: 0;
}

/* --------------------------------------------------------------------------
   THE ENTRY: one field, one unit, three questions

   The visitor holds one figure, from one device. He is never asked for a
   second one, and the field is drawn as what it is: a line on a document,
   written on in the display face.
   -------------------------------------------------------------------------- */

.dlc-releve__band--saisie {
	background-color: var( --dlc-paper, #F1EFE9 );
	border-top: 3px solid var( --dlc-gold, #A8874E );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__grid {
	display: grid;
	gap: clamp( 2rem, 4vw, 3.25rem );
	align-items: start;
}

@media ( min-width: 56rem ) {
	.dlc-releve__grid {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.dlc-releve__input {
	display: block;
	width: 100%;
	max-width: 26rem;
	margin: 0;
	padding: 0.1em 0 0.12em;
	border: 0;
	border-bottom: 2px solid var( --dlc-navy, #1C2B39 );
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var( --dlc-navy, #1C2B39 );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 2.25rem, 7vw, 3.5rem );
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;
}

.dlc-releve__input::placeholder {
	color: var( --dlc-slate, #5A6B7B );
	opacity: 1;
}

.dlc-releve__input:focus-visible {
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 3px;
}

.dlc-releve__hint {
	margin: 0.85rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --dlc-slate, #5A6B7B );
}

/* ---- The unit, as a two state switch --------------------------------- */

.dlc-releve__units {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
}

.dlc-releve__toggle {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	max-width: 26rem;
	border: 1px solid var( --dlc-navy, #1C2B39 );
}

.dlc-releve__toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.dlc-releve__toggle label {
	display: block;
	height: 100%;
	padding: 0.85rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.45;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	color: var( --dlc-navy, #1C2B39 );
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.dlc-releve__toggle-item + .dlc-releve__toggle-item label {
	border-left: 1px solid var( --dlc-navy, #1C2B39 );
}

.dlc-releve__toggle input:checked + label {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-releve__toggle input:focus-visible + label {
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 2px;
}

/* ---- The three questions ---------------------------------------------- */

.dlc-releve__asks {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.dlc-releve__ask-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__ask {
	display: flex;
	align-items: flex-start;
	gap: 0.95rem;
	margin: 0;
	padding: 1.05rem 0;
	border-bottom: 1px solid var( --dlc-hairline, #DAD5C9 );
}

/* The box is drawn, never a glyph and never an icon dropped in as is: a
   square hairline, and on the checked state an ink fill carrying a mark made
   of two borders, the same way every chevron of this site is made. */
.dlc-releve__ask input {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.2rem 0 0;
	border: 1px solid var( --dlc-navy, #1C2B39 );
	border-radius: 0;
	background-color: var( --dlc-cream, #FAF9F6 );
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.dlc-releve__ask input:checked {
	background-color: var( --dlc-navy, #1C2B39 );
}

.dlc-releve__ask input:checked::after {
	content: "";
	position: absolute;
	left: 0.38rem;
	top: 0.1rem;
	width: 0.3rem;
	height: 0.62rem;
	border-right: 2px solid var( --dlc-white, #FBFAF7 );
	border-bottom: 2px solid var( --dlc-white, #FBFAF7 );
	transform: rotate( 42deg );
}

.dlc-releve__ask label {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.0625rem, 1.9vw, 1.1875rem );
	line-height: 1.35;
	color: var( --dlc-navy, #1C2B39 );
	cursor: pointer;
}

/* ---- The act ----------------------------------------------------------- */

.dlc-releve__actions {
	margin: clamp( 1.75rem, 3.5vw, 2.5rem ) 0 0;
}

.dlc-releve__submit {
	display: inline-block;
	border: 2px solid var( --dlc-navy, #1C2B39 );
	border-radius: 0;
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 1.05rem 1.9rem;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.dlc-releve__submit:hover,
.dlc-releve__submit:focus-visible {
	background-color: var( --dlc-cream, #FAF9F6 );
	border-color: var( --dlc-gold, #A8874E );
	color: var( --dlc-navy, #1C2B39 );
}

/* --------------------------------------------------------------------------
   THE READING: the ink plate of the instrument

   The second signature of the project, at the one place on the site where a
   figure is produced rather than published. It is set larger than the title
   of any page, because it is the thing the visitor came for.
   -------------------------------------------------------------------------- */

/* Before anything is typed the band carries two short lines, and a full
   height plate for two lines reads as a mistake. It is only closed up, never
   removed: the live region inside has to stay in the document, or assistive
   technology stops watching it. */
.dlc-releve__band--bilan:has( .dlc-releve__idle ) {
	padding-block: clamp( 1.5rem, 3vw, 2.25rem );
}

.dlc-releve__band--bilan:has( .dlc-releve__idle ) .dlc-releve__status {
	margin-bottom: 0.9rem;
}

.dlc-releve__band--bilan {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
	padding-block: clamp( 2.5rem, 5vw, 4rem );
}

.dlc-releve__band--bilan .dlc-releve__rubric {
	color: var( --dlc-goldlight, #C9AE79 );
	border-bottom-color: var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-releve__band--bilan .dlc-releve__legend {
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-releve__band--bilan a {
	color: var( --dlc-white, #FBFAF7 );
	text-decoration-color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__band--bilan :focus-visible,
.dlc-releve__band--garde :focus-visible {
	outline-color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__band--bilan:focus {
	outline: none;
}

.dlc-releve__status {
	margin: 0 0 clamp( 1.75rem, 3.5vw, 2.5rem );
	max-width: var( --dlc-column, 680px );
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-releve__idle {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.25rem, 2.3vw, 1.625rem );
	line-height: 1.45;
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-releve__head {
	/* One column. The figure and its equivalence used to sit side by side at
	   the same size, which left a hole above the figure on a wide screen and
	   gave a range read off the other column the weight of the answer. */
	max-width: 46rem;
}

.dlc-releve__number {
	margin: 0;
}

.dlc-releve__number-value {
	display: block;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-weight: 600;
	font-size: clamp( 3.5rem, 12vw, 6.5rem );
	line-height: 0.92;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var( --dlc-white, #FBFAF7 );
	/* A pasted string is still a string: it breaks rather than pushing the
	   page sideways. break-word, never anywhere: anywhere would also shrink
	   the min-content width and let the grid crush the figure. */
	overflow-wrap: break-word;
}

/* A reading is four or five signs. Past that the monument steps down rather
   than running off the screen. */
.dlc-releve__number--long .dlc-releve__number-value {
	font-size: clamp( 1.875rem, 7vw, 3.5rem );
	letter-spacing: -0.02em;
}

.dlc-releve__number-unit {
	display: block;
	margin-top: 0.7rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-goldlight, #C9AE79 );
}

/* ---- The equivalence, a footnote to the figure ------------------------- */

.dlc-releve__equiv {
	margin-top: clamp( 1.5rem, 3vw, 2.25rem );
	padding-top: 1.1rem;
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-releve__equiv-label {
	margin: 0 0 0.6rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__equiv-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dlc-releve__equiv-list li {
	margin: 0;
	min-width: 0;
}

.dlc-releve__equiv-fig {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: 1.375rem;
	line-height: 1.3;
	font-variant-numeric: tabular-nums lining-nums;
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-releve__equiv-unit {
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-releve__equiv-row {
	display: block;
	margin-top: 0.15rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var( --dlc-mist, #C9D2DA );
}

/* ---- The graduation ---------------------------------------------------- */

/* A hairline across the width, one tick per published row, the retained
   segment thickened into gold. The first version was a row of filled cells,
   which read as a fragment of table rather than as a scale. Segments stay
   equal, and the caption underneath says why. */

.dlc-releve__rule {
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	margin-top: clamp( 2.25rem, 4.5vw, 3.5rem );
}

.dlc-releve__seg {
	display: block;
	min-width: 0;
}

.dlc-releve__seg-bar {
	display: block;
	height: 3px;
	background-color: var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-releve__seg.is-retenu .dlc-releve__seg-bar {
	background-color: var( --dlc-goldlight, #C9AE79 );
}

/* The last published row is open ended. The bar says so by running out in a
   dashed line instead of stopping square. */
.dlc-releve__seg:last-child .dlc-releve__seg-bar {
	background-image: none;
	border-top: 0;
}

.dlc-releve__seg:last-child .dlc-releve__seg-bar::after {
	content: "";
	display: block;
	height: 3px;
	margin-left: 60%;
	background-color: var( --dlc-navy, #1C2B39 );
	border-top: 1px dashed var( --dlc-goldlight, #C9AE79 );
}

/* The tick itself: the left rule of the figure, under the start of the
   segment it opens. */
.dlc-releve__seg-figure {
	display: block;
	padding: 0.6rem 0.5rem 0 0.55rem;
	border-left: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 0.9375rem, 1.7vw, 1.1875rem );
	line-height: 1.25;
	font-variant-numeric: tabular-nums lining-nums;
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-releve__seg.is-retenu .dlc-releve__seg-figure {
	border-left-color: var( --dlc-goldlight, #C9AE79 );
	color: var( --dlc-white, #FBFAF7 );
	font-weight: 600;
}

.dlc-releve__seg--out .dlc-releve__seg-figure {
	border-left: 0;
	padding-left: 0;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

/* Off the scale is not a row of the scale: it is marked, never filled. */
.dlc-releve__seg--out.is-retenu .dlc-releve__seg-bar {
	background-color: transparent;
	border-top: 3px dashed var( --dlc-goldlight, #C9AE79 );
	height: 0;
}

.dlc-releve__seg--out.is-retenu .dlc-releve__seg-figure {
	color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__fine--ruler {
	margin-top: 1.1rem;
}


/* ---- What the tool refuses to decide ----------------------------------- */

.dlc-releve__flags {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp( 2rem, 4vw, 3rem );
	padding-top: clamp( 1.5rem, 3vw, 2rem );
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-releve__flag {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-releve__flag strong {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.125rem, 2vw, 1.375rem );
	font-weight: 600;
	line-height: 1.3;
	color: var( --dlc-goldlight, #C9AE79 );
}

/* --------------------------------------------------------------------------
   THE LEDGER: the consequences, line by line

   A register, not a grid of tiles: one hairline per entry, the heading of the
   published column on the left, the value in the display face, and the page
   the value comes from on the right. Every line is answerable.
   -------------------------------------------------------------------------- */

/* The ledger band carries no padding of its own: when there is nothing to
   report the zone is truly empty, and an empty band of cream with three
   centimetres of padding reads as a page that failed to finish rendering. */
.dlc-releve__band--lignes {
	background-color: var( --dlc-cream, #FAF9F6 );
	padding-block: 0;
}

.dlc-releve__band--lignes > .dlc-releve__inner:not( :empty ) {
	padding-block: clamp( 2rem, 4vw, 3.25rem );
}

.dlc-releve__basis {
	margin: 0 0 1.75rem;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.125rem, 2vw, 1.375rem );
	line-height: 1.45;
	color: var( --dlc-navy, #1C2B39 );
	text-wrap: pretty;
}

.dlc-releve__ledger {
	margin: 0;
}

.dlc-releve__entry {
	display: grid;
	gap: 0.5rem 2rem;
	padding: clamp( 1.15rem, 2.2vw, 1.5rem ) 0;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__entry:last-child {
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

@media ( min-width: 48rem ) {
	.dlc-releve__entry {
		grid-template-columns: minmax( 0, 14rem ) minmax( 0, 1fr );
		align-items: baseline;
	}
}

/* Prose is not an amount: it keeps a reading measure instead of running the
   full width of the register. */
.dlc-releve__entry-value .dlc-releve__prose,
.dlc-releve__entry-value .dlc-releve__sub,
.dlc-releve__entry-value .dlc-releve__gap,
.dlc-releve__entry-value .dlc-releve__items {
	max-width: 38rem;
}

.dlc-releve__entry-label {
	margin: 0;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__entry-value {
	margin: 0;
	min-width: 0;
}

/* 1,5 rem au lieu de 2,625 depuis le 09/10/2026. Mesure sur le rendu : le
   montant etait a 42 px a cote d'une valeur simple a 18 px, soit un rapport de
   2,3 dans la meme colonne. La cliente a envoye une capture de ce releve en
   disant « des cellules en enorme et d'autres toutes petites ». Rapport ramene
   a 1,3. Le taux saisi, lui, reste a 104 px : c'est la reponse, pas une
   donnee parmi d'autres. */
.dlc-releve__entry-value .dlc-fig {
	display: block;
	font-size: clamp( 1.25rem, 1.8vw, 1.5rem );
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.dlc-releve__value {
	display: block;
}

.dlc-releve__split {
	display: grid;
	gap: 1.25rem 2.5rem;
}

@media ( min-width: 40rem ) {
	.dlc-releve__split {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.dlc-releve__value--split + .dlc-releve__value--split {
		padding-left: 2.5rem;
		border-left: 1px solid var( --dlc-hairline, #DAD5C9 );
	}
}

/* Where the two published rows agree and where they do not, said once, in
   the sentence that opens the relevé. Gold, because it is the line that tells
   the reader which entry below is worth stopping at. */
.dlc-releve__agree {
	color: var( --dlc-gold, #A8874E );
}

/* The page an entry comes from. Its name only: the update date is stated
   once at the foot of the relevé, not on every line. */
.dlc-releve__entry-src {
	margin: 0.8rem 0 0;
}

.dlc-releve__src {
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__ledger-source {
	margin: 1.6rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__value-row {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__value-text {
	display: block;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.0625rem, 1.8vw, 1.25rem );
	line-height: 1.4;
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-releve__prose,
.dlc-releve__sub {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.0625rem, 1.8vw, 1.1875rem );
	line-height: 1.5;
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-releve__sub {
	margin-top: 0.9rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --dlc-hairline, #DAD5C9 );
	font-size: 1rem;
	color: var( --dlc-slate, #5A6B7B );
}

/* A definition that opens an entry has nothing above it to be separated
   from. */
.dlc-releve__entry-value > .dlc-releve__sub:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.dlc-releve__sub + .dlc-releve__prose {
	margin-top: 0.8rem;
}

.dlc-releve__items {
	margin: 0.9rem 0 0;
	padding-left: 1.15rem;
}

.dlc-releve__items li {
	margin-bottom: 0.45rem;
	line-height: 1.6;
}

.dlc-releve__items li::marker {
	color: var( --dlc-gold, #A8874E );
}

/* What the content does not publish is said, never filled in. */
.dlc-releve__gap,
.dlc-releve__entry-note {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var( --dlc-hairline, #DAD5C9 );
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__source {
	font-size: 0.75rem;
	line-height: 1.6;
	color: var( --dlc-slate, #5A6B7B );
}

.dlc-releve__inline-source {
	margin: 0.6rem 0 0;
}

/* --------------------------------------------------------------------------
   THE WARNING: a draft, marked as one
   -------------------------------------------------------------------------- */

/* The caveat is a framed note, not a band of its own.
   Full bleed, it was half a screen of empty ink carrying four lines, and it
   weighed more than the relevé it qualifies. Boxed on the paper, with the
   gold top rule of the site's own warning pattern, it says the same thing at
   the right volume, and the page loses one ink stripe. */
.dlc-releve__band--garde {
	display: block;
	padding-block: 0;
	margin-block: clamp( 2.25rem, 4.5vw, 3.5rem );
	background-color: transparent;
}

.dlc-releve__band--garde > .dlc-releve__inner {
	padding: clamp( 1.5rem, 4vw, 2.25rem );
	background-color: var( --dlc-navy, #1C2B39 );
	border-top: 3px solid var( --dlc-gold, #A8874E );
}

.dlc-releve__garde-label {
	margin: 0 0 1rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__garde-text {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.0625rem, 1.8vw, 1.25rem );
	line-height: 1.55;
	color: var( --dlc-white, #FBFAF7 );
}

/* --------------------------------------------------------------------------
   THE PUBLISHED SCALE, always in the HTML

   Treated as the official scale it is: ink header in spaced capitals,
   horizontal hairlines only, never a vertical rule, figures on the tabular
   track. On a phone it scrolls inside its own frame, first column pinned, and
   the page itself never scrolls sideways.
   -------------------------------------------------------------------------- */

.dlc-releve__band--bareme {
	background-color: var( --dlc-paper, #F1EFE9 );
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__table {
	/* auto, never hidden: overflow hidden would kill the sticky first cell */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	border-top: 3px solid var( --dlc-navy, #1C2B39 );
	border-bottom: 1px solid var( --dlc-navy, #1C2B39 );
	margin-block: 0 1rem;
}

.dlc-releve__table:focus-visible {
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 2px;
}

.dlc-releve__table table {
	/* separate, not collapse: a collapsed border does not travel with a
	   sticky cell, and the pinned column would leave its rules behind. */
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.dlc-releve__table th,
.dlc-releve__table td {
	border: 0;
	border-bottom: 1px solid var( --dlc-hairline, #DAD5C9 );
	padding: 0.85rem 0.8rem;
	text-align: left;
	vertical-align: top;
	text-wrap: pretty;
}

.dlc-releve__table thead th {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.35;
	text-transform: uppercase;
	border-bottom: 0;
	vertical-align: bottom;
}

.dlc-releve__table tbody th {
	font-weight: 700;
	background-color: var( --dlc-paper, #F1EFE9 );
}

.dlc-releve__table tbody tr:last-child > * {
	border-bottom: 0;
}

.dlc-releve__table .dlc-fig {
	display: block;
	font-size: 1.1875rem;
	line-height: 1.15;
	text-wrap: balance;
}

/* The two threshold columns carry the longest figures of the scale
   ("0,5 a moins de 0,8", "Plus de 1,15"): measured on the render, this is the
   width at which neither of them breaks in the middle of its own range. */
.dlc-releve__table th:first-child,
.dlc-releve__table td:nth-child( 2 ) {
	min-width: 8.5rem;
}

/* The retained row, on the published scale. No border and no colour trick: a
   nett inversion, which is the only mark a scale of this kind accepts. */
.dlc-releve__table tr.is-retenu > * {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
	/* Translucent off white, not ink: two retained rows in a row are two rows
	   of the scale and have to stay told apart. */
	border-bottom-color: var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-releve__table tr.is-retenu .dlc-fig {
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-releve__retenu {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-releve__retenu[ hidden ] {
	display: none;
}

@media ( max-width: 61.999rem ) {
	.dlc-releve__table table {
		min-width: 58rem;
	}

	.dlc-releve__table--short table {
		min-width: 0;
	}
}

@media ( max-width: 56rem ) {
	.dlc-releve__table th,
	.dlc-releve__table td {
		padding: 0.75rem 0.7rem;
	}

	.dlc-releve__table tbody tr > *:first-child,
	.dlc-releve__table thead th:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		border-right: 1px solid var( --dlc-hairline, #DAD5C9 );
	}

	.dlc-releve__table thead th:first-child {
		z-index: 3;
		border-right: 1px solid var( --dlc-gold, #A8874E );
	}
}

/* On a phone the complete table stops being a table: six columns cannot be
   read in 319 px without a sideways scroll, and the practice asked for none
   unless unavoidable. Each row becomes a block, each cell its own labelled
   line, read at 14px. The short table (two columns) keeps its shape. */
@media ( max-width: 40rem ) {
	.dlc-releve__table:not( .dlc-releve__table--short ) {
		overflow-x: visible;
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) table {
		min-width: 0;
		font-size: 0.875rem;
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody,
	.dlc-releve__table:not( .dlc-releve__table--short ) tr,
	.dlc-releve__table:not( .dlc-releve__table--short ) th,
	.dlc-releve__table:not( .dlc-releve__table--short ) td {
		display: block;
		min-width: 0;
		position: static;
		border-right: 0;
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody tr {
		padding-block: 0.4rem;
		border-bottom: 3px solid var( --dlc-navy, #1C2B39 );
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody tr:last-child {
		border-bottom: 0;
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody th,
	.dlc-releve__table:not( .dlc-releve__table--short ) tbody td {
		padding: 0.5rem 0.8rem;
		border-bottom: 1px solid var( --dlc-hairline, #DAD5C9 );
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody tr > *::before {
		content: attr( data-label );
		display: block;
		margin-bottom: 0.15rem;
		font-family: var( --wp--preset--font-family--sans, sans-serif );
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.35;
		text-transform: uppercase;
		color: var( --dlc-slate, #55606B );
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tr.is-retenu > *::before {
		color: var( --dlc-mist, #C9D2DA );
	}

	.dlc-releve__table:not( .dlc-releve__table--short ) tbody tr > *:last-child {
		border-bottom: 0;
	}

	/* The pinned first column's rule belongs to the wide table, not to a stack. */
	.dlc-releve__table:not( .dlc-releve__table--short ) tbody tr > *:first-child,
	.dlc-releve__table:not( .dlc-releve__table--short ) thead th:first-child {
		border-right: 0;
	}

	.dlc-releve__table--short th,
	.dlc-releve__table--short td {
		font-size: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   THE CONTESTABLE ITEMS: a register of cases, not a grid of tiles
   -------------------------------------------------------------------------- */

.dlc-releve__band--contest {
	background-color: var( --dlc-cream, #FAF9F6 );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__lead {
	margin: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.125rem, 2vw, 1.375rem );
	line-height: 1.45;
	color: var( --dlc-navy, #1C2B39 );
	text-wrap: pretty;
}

.dlc-releve__register {
	counter-reset: dlc-contest;
	list-style: none;
	margin: clamp( 1.5rem, 3vw, 2.25rem ) 0 0;
	padding: 0;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-releve__register li {
	counter-increment: dlc-contest;
	display: flex;
	align-items: baseline;
	gap: 1.15rem;
	margin: 0;
	padding: clamp( 1rem, 2vw, 1.35rem ) 0;
	border-bottom: 1px solid var( --dlc-hairline, #DAD5C9 );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.125rem, 2.2vw, 1.5rem );
	line-height: 1.3;
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-releve__register li::before {
	content: counter( dlc-contest, decimal-leading-zero );
	flex: 0 0 auto;
	width: 2.4ch;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.375rem, 2.2vw, 1.75rem );
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var( --dlc-gold, #A8874E );
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Motion: states only, 120ms, never a layout property
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.dlc-releve *,
	.dlc-releve *::before,
	.dlc-releve *::after {
		transition-duration: 0.01ms !important;
	}
}