/**
 * Papier d'audience: the document itself.
 *
 * The site has to read like a well set legal document, not like a law firm
 * showcase: generous margins, a decided hierarchy, numbered sections, hairlines
 * instead of shadows, and a figure that can be found fast.
 *
 * This file owns everything below the shell (header, navigation, footer and the
 * fixed mobile bar live in shell.css). It is written against the markup as it is
 * rendered, never against markup it would like to exist: every rule here is
 * reversible and nothing in it requires an editor to add a class.
 *
 * Every custom property carries a literal fallback: a var() with no fallback
 * makes the whole declaration disappear if a preset is ever renamed.
 */

:root {
	--dlc-cream: var( --wp--preset--color--cream, #FAF9F6 );
	--dlc-paper: var( --wp--preset--color--surface, #F1EFE9 );
	--dlc-navy: var( --wp--preset--color--navy, #1C2B39 );
	--dlc-gold: var( --wp--preset--color--gold, #A8874E );
	--dlc-goldlight: var( --wp--preset--color--goldlight, #C9AE79 );
	--dlc-slate: var( --wp--preset--color--slate, #5A6B7B );
	--dlc-mist: var( --wp--preset--color--mist, #C9D2DA );
	--dlc-white: var( --wp--preset--color--white, #FBFAF7 );

	/* Hairlines. Warm on paper, translucent ink white on the dark bands: a
	   bluish grey rule on a cream ground reads as a printing defect. */
	--dlc-hairline: #DAD5C9;
	--dlc-hairline-strong: #BFB8A6;
	--dlc-hairline-dark: rgba( 251, 250, 247, 0.24 );

	/* Signature: width reserved to the left of the content for section
	   numbers. Only ever used above 62rem, where the gutter is 128px. */
	--dlc-number-gap: 1.75rem;
}

/* --------------------------------------------------------------------------
   Document ground
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Sections are linked from the tables of contents and from the sitemap. */
	scroll-padding-top: 1.5rem;
}

::selection {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
}

/* The page ground has to stay cream to the last pixel even on a short page. */
.wp-site-blocks {
	background-color: var( --dlc-cream, #FAF9F6 );
}

/* Long form reading: figures line up vertically in prose as well as in the
   fee tables, and the old style ligature soup stays off. */
body {
	font-variant-numeric: tabular-nums;
	font-variant-ligatures: common-ligatures;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   The page head
   The client's first reproach was that the title sits glued under the
   navigation. It now opens the document, with the air a masthead needs.
   -------------------------------------------------------------------------- */

/* The title keeps the full width of its column. Narrowing it with a max-width
   would hand it back to the auto margins core sets on a constrained layout,
   and a centred title no longer lines up with the text under it. The break is
   handled by text-wrap, which costs no width. */
.wp-block-post-title {
	margin-top: clamp( 2.25rem, 5vw, 4.25rem );
	margin-bottom: clamp( 1.5rem, 2.5vw, 2.25rem );
	text-wrap: balance;
}

@media ( max-width: 30rem ) {
	.wp-block-post-title {
		text-wrap: pretty;
	}
}

/* The breadcrumb trail sits above the title, so the title keeps its own air. */
.wp-block-group:has( > .wp-block-dlc-breadcrumbs ) + main .wp-block-post-title {
	margin-top: clamp( 1.25rem, 3vw, 2.5rem );
}

/* --------------------------------------------------------------------------
   Rhythm inside the content
   -------------------------------------------------------------------------- */

.wp-block-post-content {
	counter-reset: dlc-section dlc-case;
}

/* The air at the foot of the article belongs to the page, not to the content
   block: put it on the content and it doubles up with the margin of the
   author block that follows, which leaves a bank of empty cream. */
main.wp-block-group {
	padding-bottom: clamp( 2.5rem, 5vw, 4.5rem );
}

/* Measure. The column itself carries it. Nothing narrows a paragraph inside
   it, so the text, the rules and the scales all share one left edge and one
   right edge. The figure below is measured on the render, never on the CSS:
   see --dlc-column. */

.wp-block-post-content > h2 {
	margin-top: clamp( 3rem, 6vw, 5rem );
	margin-bottom: 1.5rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --dlc-gold, #A8874E );
	text-wrap: balance;
	scroll-margin-top: 1.5rem;
}

.wp-block-post-content > h3 {
	margin-top: 2.75rem;
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

.wp-block-post-content > h4 {
	margin-top: 2.5rem;
	margin-bottom: 0.5rem;
}

/* A heading never ends a page, and never sits closer to the paragraph above
   it than to its own. */
.wp-block-post-content > h2 + *,
.wp-block-post-content > h3 + * {
	margin-top: 0;
}

.wp-block-post-content li {
	margin-bottom: 0.45rem;
}

.wp-block-post-content > ul,
.wp-block-post-content > ol {
	padding-left: 1.2rem;
}

.wp-block-post-content > ul li::marker {
	color: var( --dlc-gold, #A8874E );
}

/* The figure of an ordered list is information, so it is set in ink: gold on
   cream would be 3.2:1 at running size. A bullet carries nothing the list
   itself does not, and keeps the accent. */
.wp-block-post-content > ol li::marker {
	color: var( --dlc-navy, #1C2B39 );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Running text links: ink, with the gold carrying the underline only. Gold on
   cream measures 3.2:1, so it never carries the meaning on its own. */
.wp-block-post-content a:where( :not( .wp-element-button ):not( .dlc-card__link ) ) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.19em;
}

.wp-block-post-content strong {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   SIGNATURE: the numbered margin

   Each H2 of an article carries its section number in gold figures, in the
   left margin, on the baseline of its first line, above a hairline that runs
   the width of the column. It is the article citation of a legal text, moved
   to a web page.

   Entirely a CSS counter on the content container: Isabelle adds an H2 and it
   numbers itself. Nothing in the markup, nothing to maintain, nothing to pay
   in Core Web Vitals.

   Deliberately not on the home page (body.home): a landing page is not an
   article, and numbering a welcome would read as a table of contents. And
   deliberately only on direct children of the content, so a heading nested in
   a box or in a column is never counted.
   -------------------------------------------------------------------------- */

body:not( .home ) .wp-block-post-content > h2 {
	position: relative;
	counter-increment: dlc-section;
}

body:not( .home ) .wp-block-post-content > h2::before {
	content: counter( dlc-section, decimal-leading-zero );
	display: block;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	/* Gold on cream measures 3.2:1. That clears the bar for large text and
	   only for large text, so the figure is set at 20px bold, never smaller.
	   It carries no information the heading beside it does not carry. */
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	color: var( --dlc-gold, #A8874E );
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.7rem;
}

/* Above 62rem the column has a 128px gutter on each side, so the number moves
   out of the text block and into the margin where it belongs. Below that the
   gutter is gone and the number stays over the title, which is the same idea
   at another size. */
@media ( min-width: 62rem ) {
	body:not( .home ) .wp-block-post-content > h2::before {
		position: absolute;
		right: 100%;
		top: 0.24em;
		margin: 0 var( --dlc-number-gap, 1.75rem ) 0 0;
		font-family: var( --wp--preset--font-family--serif, Georgia, serif );
		font-size: 1.75rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   The short answer

   The passage answer engines quote. Treated as an extract of a judgment: a
   paper ground, a full hairline, and its heading set above the block in
   spaced capitals. No thick coloured rule down its left edge: that is a
   template reflex, not a decision.

   The 4px gold left border comes from an inline style in the content, which
   is why it takes !important to retire it. Same for the paper ground, which
   core prints with !important of its own on .has-surface-background-color.
   -------------------------------------------------------------------------- */

.dlc-short-answer {
	border: 1px solid var( --dlc-hairline-strong, #BFB8A6 ) !important;
	background-color: var( --dlc-paper, #F1EFE9 ) !important;
	padding: clamp( 1.5rem, 4vw, 2.25rem ) !important;
	margin-top: 2.5rem !important;
	margin-bottom: 2.5rem !important;
}

.dlc-short-answer::before {
	content: "En bref";
	display: block;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-short-answer > p {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	line-height: 1.55;
	margin: 0;
	max-width: none;
}

.dlc-short-answer > p + p {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   The warning

   An ink band. Its label already exists in the content, in gold, which only
   measures 4.3:1 on ink and fails at 14px: it moves to the light gold, 6.7:1.
   The left rule goes, for the same reason as above.
   -------------------------------------------------------------------------- */

.dlc-warning {
	border: 0 !important;
	border-top: 3px solid var( --dlc-gold, #A8874E ) !important;
	padding: clamp( 1.5rem, 4vw, 2.25rem ) !important;
	margin-top: 2.5rem !important;
	margin-bottom: 2.5rem !important;
}

.dlc-warning > p:first-child {
	letter-spacing: 0.2em !important;
	font-size: 0.75rem !important;
	margin-bottom: 0.9rem;
}

.dlc-warning .has-gold-color {
	color: var( --dlc-goldlight, #C9AE79 ) !important;
}

.dlc-warning > p:last-child {
	margin-bottom: 0;
}

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

/* --------------------------------------------------------------------------
   The note: an example, a case, a figure worked through
   -------------------------------------------------------------------------- */

.dlc-note:not( .dlc-card ) {
	background-color: var( --dlc-paper, #F1EFE9 ) !important;
	border-left: 0 !important;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	padding: clamp( 1.25rem, 3.5vw, 1.75rem ) !important;
}

.dlc-note:not( .dlc-card ) > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Votre assurance paie votre avocat
   Pattern encadre-assurance-paie: a full one pixel gold rule is fine, a thick
   coloured edge is not.
   -------------------------------------------------------------------------- */

.dlc-insurance {
	border: 1px solid var( --dlc-gold, #A8874E ) !important;
	background-color: var( --dlc-paper, #F1EFE9 ) !important;
}

.dlc-insurance > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cross reference to another page of the file
   -------------------------------------------------------------------------- */

.dlc-internal-link {
	margin-top: 1.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid var( --dlc-hairline, #DAD5C9 );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	letter-spacing: 0.01em;
}

.dlc-internal-link a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var( --dlc-gold, #A8874E );
	padding-bottom: 1px;
}

.dlc-internal-link a:hover,
.dlc-internal-link a:focus-visible {
	border-bottom-width: 2px;
}

/* A chevron drawn with two borders, never a glyph and never an icon dropped
   in as is: no font can fail to carry it and no screen reader announces it. */
.dlc-internal-link a::after {
	content: "";
	display: inline-block;
	width: 0.32em;
	height: 0.32em;
	margin-left: 0.55em;
	vertical-align: 0.08em;
	border-top: 1px solid var( --dlc-gold, #A8874E );
	border-right: 1px solid var( --dlc-gold, #A8874E );
	transform: rotate( 45deg );
}

/* --------------------------------------------------------------------------
   Steps pattern: big gold figures, hairline above each step
   -------------------------------------------------------------------------- */

.dlc-steps .wp-block-column {
	border-top: 1px solid var( --dlc-gold, #A8874E );
	padding-top: 1rem;
}

.dlc-steps .has-xx-large-font-size {
	font-size: 2.75rem !important;
	line-height: 1;
	margin-bottom: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Questions frequentes
   A register of questions: one hairline per entry, the sign on the left where
   the eye already is, the answer indented under it like a reply on a form.
   -------------------------------------------------------------------------- */

.wp-block-dlc-faq {
	margin-top: 1.5rem;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.wp-block-post-content .dlc-faq-item {
	border-bottom: 1px solid var( --dlc-hairline, #DAD5C9 );
	padding-bottom: 0;
}

.wp-block-post-content .dlc-faq-item__question {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.9rem;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--large, 1.5rem );
	line-height: 1.32;
	color: var( --dlc-navy, #1C2B39 );
	padding: 1.15rem 0;
	transition: color 0.12s ease;
}

.wp-block-post-content .dlc-faq-item__question::after {
	content: "";
	order: -1;
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 0.52em;
	width: 0.62rem;
	height: 0.62rem;
	border-top: 1px solid var( --dlc-gold, #A8874E );
	border-right: 1px solid var( --dlc-gold, #A8874E );
	transform: rotate( 135deg );
	transform-origin: center;
	transition: transform 0.12s ease;
	font-size: inherit;
	color: transparent;
}

.wp-block-post-content .dlc-faq-item[open] > .dlc-faq-item__question::after {
	content: "";
	transform: rotate( -45deg );
}

.wp-block-post-content .dlc-faq-item__question:hover,
.wp-block-post-content .dlc-faq-item__question:focus-visible {
	color: var( --dlc-gold, #A8874E );
}

.wp-block-post-content .dlc-faq-item__answer {
	color: var( --dlc-navy, #1C2B39 );
	padding: 0 0 1.35rem 1.52rem;
}

/* --------------------------------------------------------------------------
   The author block: the signature at the foot of an article
   -------------------------------------------------------------------------- */

.wp-block-dlc-author,
.dlc-author {
	align-items: flex-start;
	gap: 1.25rem;
	margin-top: clamp( 3rem, 6vw, 4.5rem );
	padding-top: 1.5rem;
	border-top: 1px solid var( --dlc-navy, #1C2B39 );
}

.dlc-author__photo {
	width: 5.25rem;
	height: 5.25rem;
	border: 0;
}

.dlc-author__monogram {
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.dlc-author__name {
	font-size: var( --wp--preset--font-size--large, 1.5rem );
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.4em;
}

.dlc-author__titles {
	line-height: 1.6;
	margin-bottom: 0.55em;
}

/* Was gold at 14px, 3.2:1. */
.wp-block-dlc-author .dlc-author__titles li:not( :last-child )::after {
	color: var( --dlc-slate, #5A6B7B );
}

/* Was gold at 14px, which measures 3.2:1 on cream. Slate measures 5.0:1. */
.dlc-author__updated {
	color: var( --dlc-slate, #5A6B7B );
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   The conversion band

   An ink band closing the page, under a gold rule. Left aligned on purpose:
   a centred block with two buttons side by side is the one shape the
   direction rules out, and it is also the shape every law firm template
   ships with.
   -------------------------------------------------------------------------- */

.dlc-conversion {
	border-top: 3px solid var( --dlc-gold, #A8874E );
	margin-top: 0;
	padding-top: clamp( 2.75rem, 6vw, 4rem ) !important;
	padding-bottom: clamp( 2.75rem, 6vw, 4rem ) !important;

	/* The gutter of the document, not the one WordPress hands a block with
	   global padding. Above about 712 px the two auto margins core gives this
	   band's children are what puts them on the reading measure, and this
	   padding changes nothing: measured at 1440 px, the title sits at 380 px
	   either way. Below that the 680 px cap stops binding, those margins fall
	   to zero, and the band's own padding becomes the gutter: 16 px against
	   the 28 px of every paragraph around it. The client saw those 12 px. */
	padding-inline: var( --dlc-gutter, 1.75rem ) !important;
}

/* The closing bands of the page butt against each other, joined by the gold
   rule of the footer. A strip of cream between two ink blocks reads as a
   mistake, and the block gap of the site puts one there. */
.wp-site-blocks > .wp-block-template-part:has( > .dlc-footer ) {
	margin-block-start: 0;
}

.dlc-conversion .has-text-align-center {
	text-align: left !important;
}

/* No max-width on a direct child of a constrained layout: core hands it two
   auto margins, so narrowing it centres it, and a centred band with two
   buttons under it is the exact shape the direction rules out. The column
   the layout already gives it is the right width. */
/* The most important conversion element of the site, so it is set at the
   scale of a plate and not at the scale of a paragraph: the question in
   Spectral just under the title sizes, the answer at the size of a lede. */
.dlc-conversion h2 {
	margin-bottom: 0.9rem;
	font-size: clamp( 2.125rem, 4vw, 3.25rem ) !important;
	line-height: 1.08;
	text-wrap: balance;
	letter-spacing: -0.02em;
}

.dlc-conversion p {
	color: var( --dlc-white, #FBFAF7 );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.25rem, 2.1vw, 1.625rem ) !important;
	line-height: 1.42;
	margin-bottom: 2.25rem;
}

.dlc-conversion .wp-block-buttons {
	justify-content: flex-start !important;
}

/* Outlined button on ink: off white on ink is 15:1, and the fill on hover is
   a nett inversion, never a fade. */
.dlc-conversion .is-style-outline .wp-block-button__link {
	border-color: var( --dlc-goldlight, #C9AE79 );
	background-color: transparent;
}

.dlc-conversion .is-style-outline .wp-block-button__link:hover,
.dlc-conversion .is-style-outline .wp-block-button__link:focus-visible {
	background-color: var( --dlc-white, #FBFAF7 );
	border-color: var( --dlc-gold, #A8874E );
	color: var( --dlc-navy, #1C2B39 );
}

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* Core gives the outline style its own padding, computed from a border width
   it assumes. Left alone, the secondary button comes out visibly shorter than
   the one beside it, which reads as a mistake rather than as a hierarchy. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding-top: 1.05rem;
	padding-bottom: 1.05rem;
	padding-left: 1.9rem;
	padding-right: 1.9rem;
	border-width: 2px;
	border-style: solid;
}

/* Gold cannot carry a button label. Measured on the render, ink on gold is
   4.3:1, and a 14px label in capitals is not large text, so it needs 4.5:1.
   The direction puts the primary button in ink on cream in any case, and
   keeps the single accent for rules, figures, borders and hovers. The colour
   comes from the content, which is why retiring it takes !important; the
   block markup can be aligned on this later without changing the rendering.
   Ink on cream measures 13.7:1. */
.wp-block-button__link.has-gold-background-color {
	background-color: var( --dlc-navy, #1C2B39 ) !important;
	color: var( --dlc-white, #FBFAF7 ) !important;
	border-color: var( --dlc-navy, #1C2B39 );
}

.wp-block-button__link.has-gold-background-color:hover,
.wp-block-button__link.has-gold-background-color:focus-visible {
	background-color: var( --dlc-cream, #FAF9F6 ) !important;
	color: var( --dlc-navy, #1C2B39 ) !important;
	border-color: var( --dlc-gold, #A8874E );
}

/* On the ink band the nett inversion runs the other way: the primary button
   is the light one, 15:1, and the secondary keeps a gold rule so the two are
   never read as the same offer. */
.dlc-conversion .wp-block-button__link.has-gold-background-color {
	background-color: var( --dlc-white, #FBFAF7 ) !important;
	color: var( --dlc-navy, #1C2B39 ) !important;
	border-color: var( --dlc-white, #FBFAF7 );
}

.dlc-conversion .wp-block-button__link.has-gold-background-color:hover,
.dlc-conversion .wp-block-button__link.has-gold-background-color:focus-visible {
	background-color: transparent !important;
	color: var( --dlc-white, #FBFAF7 ) !important;
	border-color: var( --dlc-gold, #A8874E );
}

/* --------------------------------------------------------------------------
   The contact form
   -------------------------------------------------------------------------- */

.dlc-contact-form {
	margin-top: 2.5rem;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	background-color: var( --dlc-paper, #F1EFE9 );
	border-top: 3px solid var( --dlc-gold, #A8874E );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.dlc-contact-form .ff-el-form-control,
.dlc-contact-form input:not( [ type="checkbox" ] ):not( [ type="radio" ] ):not( [ type="submit" ] ),
.dlc-contact-form select,
.dlc-contact-form textarea {
	border: 1px solid var( --dlc-slate, #5A6B7B );
	border-radius: 0 !important;
	background-color: var( --dlc-cream, #FAF9F6 );
	color: var( --dlc-navy, #1C2B39 );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium, 1.1875rem );
	padding: 0.7rem 0.85rem;
	box-shadow: none;
	width: 100%;
	max-width: 100%;
}

/*
 * Focus on the fields of the contact form, and the class is doubled on
 * purpose.
 *
 * Fluent Forms carries `.ff-default .ff-el-form-control:focus { outline: none }`
 * and `.ff-default .ff_btn_style:focus { outline: 0 }`, both more specific
 * than a plain `.dlc-contact-form input:focus`, so they win. The rule above
 * then removes the shadow the plugin draws instead of a ring. Each half is
 * defensible and together they left a keyboard user with NO indicator at all,
 * on the one form of this site a lost visitor is a lost file. Doubling
 * `.dlc-contact-form` carries this rule past the plugin's without touching the
 * plugin's own files, which an update would overwrite.
 */
.dlc-contact-form.dlc-contact-form .ff-el-form-control:focus-visible,
.dlc-contact-form.dlc-contact-form .ff-btn:focus-visible,
.dlc-contact-form.dlc-contact-form input:focus-visible,
.dlc-contact-form.dlc-contact-form select:focus-visible,
.dlc-contact-form.dlc-contact-form textarea:focus-visible,
.dlc-contact-form.dlc-contact-form button:focus-visible {
	border-color: var( --dlc-focus, #1C2B39 );
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 2px;
}

/* Only the label of a field is set as a heading of the form. The label of a
   radio, of a checkbox and above all of the consent sentence is running text:
   a whole paragraph of consent in bold capitals is unreadable, and it is the
   one sentence on the page a visitor must actually read. */
.dlc-contact-form .ff-el-input--label > label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var( --dlc-navy, #1C2B39 );
	margin-bottom: 0.4rem;
	display: inline-block;
}

.dlc-contact-form .ff-el-form-check-label {
	font-size: var( --wp--preset--font-size--medium, 1.1875rem );
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-contact-form .ff-el-form-check {
	margin-bottom: 0.45rem;
}

.dlc-contact-form .ff-el-form-check-input {
	accent-color: var( --dlc-navy, #1C2B39 );
	margin-right: 0.5rem;
}

/* The required marker and the error messages come from the plugin in its own
   red, which is not a colour of this document, and which measures 2.5:1 on the
   paper ground. The plugin drives both from one custom property, so setting
   that property is the clean way in: ink, 12.6:1. The obligation is carried by
   aria-required and the error by its own sentence, never by a colour. */
.dlc-contact-form {
	--fluentform-danger: var( --dlc-navy, #1C2B39 );
}

.dlc-contact-form .ff-el-input--label.asterisk-right label::after,
.dlc-contact-form .ff-el-input--label.asterisk-left label::before {
	color: var( --dlc-navy, #1C2B39 );
}

/* An error has to read as an error without a colour of its own: the sentence
   says what is wrong, the weight and the rule make it impossible to miss. */
.dlc-contact-form .text-danger,
.dlc-contact-form .error {
	color: var( --dlc-navy, #1C2B39 );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-weight: 700;
	border-left: 2px solid var( --dlc-gold, #A8874E );
	padding-left: 0.6rem;
	margin-top: 0.4rem;
}

/* The gold fill of this button is a setting of the form, printed by the
   plugin through a three class selector. Same measurement as the buttons
   above: ink on gold is 4.3:1 and this label is not large text. */
.dlc-contact-form .ff-btn-submit,
.dlc-contact-form button[ type="submit" ],
.dlc-contact-form input[ type="submit" ] {
	border-radius: 0;
	border: 2px solid var( --dlc-navy, #1C2B39 );
	background-color: var( --dlc-navy, #1C2B39 ) !important;
	color: var( --dlc-white, #FBFAF7 ) !important;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 1.05rem 1.9rem;
	box-shadow: none;
	cursor: pointer;
}

.dlc-contact-form .ff-btn-submit:hover,
.dlc-contact-form .ff-btn-submit:focus-visible,
.dlc-contact-form button[ type="submit" ]:hover,
.dlc-contact-form input[ type="submit" ]:hover {
	background-color: var( --dlc-cream, #FAF9F6 ) !important;
	border-color: var( --dlc-gold, #A8874E );
	color: var( --dlc-navy, #1C2B39 ) !important;
}

.dlc-contact-form__mention {
	margin-top: 1.25rem;
	padding-top: 0.9rem;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	max-width: none;
}

/* --------------------------------------------------------------------------
   HOME PAGE

   Masthead, then the register of situations. The two things the client looks
   at first.
   -------------------------------------------------------------------------- */

body.home .wp-block-post-title {
	margin-top: clamp( 2.5rem, 6vw, 5rem );
	margin-bottom: 1.75rem;
}

body.home .dlc-hero {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-weight: 400;
	line-height: 1.45;
	padding-top: 1.6rem;
	border-top: 1px solid var( --dlc-gold, #A8874E );
	margin-bottom: 2.5rem;
}

/* The two calls to action are two separate button groups in the content, so
   they stack. Above 48rem they are set inline so they read as one pair: the
   appointment and the telephone, which on this site is the conversion. If the
   content ever changes shape, they simply stack again. */
@media ( min-width: 48rem ) {
	body.home .dlc-hero + .wp-block-buttons,
	body.home .dlc-hero + .wp-block-buttons + .wp-block-buttons {
		display: inline-flex;
		vertical-align: top;
		margin-block: 0;
	}

	body.home .dlc-hero + .wp-block-buttons + .wp-block-buttons {
		margin-left: 0.6rem;
	}
}

body.home .dlc-hero ~ .wp-block-buttons ~ h2 {
	margin-top: clamp( 3.5rem, 7vw, 5.5rem );
}

/* The home page is an entry, not an article: it carries no section numbers,
   so its titles carry the hierarchy on their own. 44px against the 78px of
   the plate and the 27px of the sub-heads: 1.77 and 1.63, both clear of the
   1.25 the direction sets between two levels. */
body.home .wp-block-post-content > h2 {
	font-size: clamp( 1.875rem, 3.4vw, 2.75rem );
	letter-spacing: -0.02em;
}

/* Le titre qui ouvre ce registre laisse son filet aux colonnes. Deux filets
   d'or a vingt-deux pixels l'un de l'autre, le premier entier et le second
   brise par l'ecart des colonnes, se lisent comme une erreur : le registre
   ouvre deja chaque entree par le sien. */
body.home .wp-block-post-content > h2:has( + .wp-block-columns:not( :has( .dlc-card ) ) ) {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Two claims of speciality, side by side: two entries of a register, each
   opened by a gold rule. */
body.home .wp-block-columns:not( :has( .dlc-card ) ) > .wp-block-column {
	border-top: 1px solid var( --dlc-gold, #A8874E );
	padding-top: 1.1rem;
}

body.home .wp-block-columns:not( :has( .dlc-card ) ) .wp-block-heading {
	margin-bottom: 0.5rem;
}

/* ---- Votre situation: a register of cases, not a grid of tiles ----------

   The content ships six boxes in two rows of three columns. Six identical
   rectangles side by side is the single most recognisable shape of a
   generated page, so the rows are unstacked into one continuous list that
   runs the full width of the column: a gold number, the case in its own
   words, a rule under each line, and the direction of travel on the right.
   One reads a list of situations, not a gallery of thumbnails.

   The paper ground and the box padding come from the block attributes and
   from an inline style, hence the !important on those two declarations and
   nowhere else.
   ----------------------------------------------------------------------- */

.wp-block-columns:has( > .wp-block-column > .dlc-card ) {
	display: block;
	margin-top: 1.75rem;
}

.wp-block-columns:has( > .wp-block-column > .dlc-card ) + .wp-block-columns:has( > .wp-block-column > .dlc-card ) {
	margin-top: 0;
}

/* The closing rule of the register: the last row of cases, whatever the
   number of rows. */
.wp-block-columns:has( > .wp-block-column > .dlc-card ):not( :has( + .wp-block-columns > .wp-block-column > .dlc-card ) ) {
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

.wp-block-columns:has( > .wp-block-column > .dlc-card ) > .wp-block-column {
	display: block;
	margin: 0;
}

.dlc-card {
	display: flex;
	align-items: baseline;
	gap: 1.15rem;
	background-color: transparent !important;
	padding: 1.15rem 0.35rem 1.15rem 0 !important;
	border: 0;
	border-top: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	counter-increment: dlc-case;
	transition: background-color 0.12s ease, padding-left 0.12s ease;
}

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

.dlc-card > p {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	line-height: 1.3;
}

.dlc-card__link {
	text-decoration: none;
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-card::after {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 0.45rem;
	height: 0.45rem;
	border-top: 1px solid var( --dlc-gold, #A8874E );
	border-right: 1px solid var( --dlc-gold, #A8874E );
	transform: rotate( 45deg );
	transition: transform 0.12s ease;
}

.dlc-card:hover {
	background-color: var( --dlc-paper, #F1EFE9 ) !important;
	border-color: var( --dlc-gold, #A8874E );
	padding-left: 0.65rem !important;
}

.dlc-card:hover .dlc-card__link {
	text-decoration: underline;
	text-decoration-color: var( --dlc-gold, #A8874E );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.dlc-card:has( .dlc-card__link:focus-visible ) .dlc-card__link {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Actualites: the list at the foot of the home page, and the blog index
   -------------------------------------------------------------------------- */

.dlc-latest-posts {
	margin-top: clamp( 3.5rem, 7vw, 5.5rem );
	padding-top: 0;
}

.dlc-latest-posts > h2,
.wp-block-query-title {
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --dlc-gold, #A8874E );
	margin-bottom: 1.75rem;
}

.wp-block-post-template > li {
	border-top: 1px solid var( --dlc-hairline, #DAD5C9 );
	padding-top: 1rem;
}

.wp-block-post-template .wp-block-post-title {
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
	font-size: var( --wp--preset--font-size--large, 1.5rem );
	line-height: 1.25;
	letter-spacing: -0.006em;
	max-width: none;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var( --dlc-gold, #A8874E );
}

.wp-block-post-template .wp-block-post-date {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

.wp-block-post-template .wp-block-post-excerpt {
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.65;
	color: var( --dlc-slate, #5A6B7B );
}

/* --------------------------------------------------------------------------
   Separator: a hairline, never a decorative flourish
   -------------------------------------------------------------------------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var( --dlc-gold, #A8874E );
	opacity: 1;
	margin-block: 3rem;
}

.wp-block-separator.is-style-wide {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Quote: a hearing citation, between two hairlines
   -------------------------------------------------------------------------- */

.wp-block-quote {
	margin-block: 2.5rem;
}

.wp-block-quote > :last-child {
	margin-bottom: 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --dlc-slate, #5A6B7B );
}

/* -------------------------------------------------------------------------
 * Portrait on the person page.
 *
 * The brief asks for a photo directly under the H1, followed by the figures
 * line. Framed like a document photograph: square corners, no shadow, a
 * hairline, and a width that keeps it a portrait rather than a banner.
 * ---------------------------------------------------------------------- */

.dlc-portrait {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	margin-inline: 0 auto;
	max-width: 19rem;
}

.dlc-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	border: 1px solid var(--dlc-rule, #dad5c9);
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 47.99rem) {
	.dlc-portrait {
		max-width: 13rem;
	}
}

/* ==========================================================================
   COMPOSITION: the plate, the bands, the figure

   Version 1 held nineteen pages in a single 610px column of cream, top to
   bottom. The direction was right, the composition was not: no change of
   scale, no full width band, no device. What follows is the answer, and it
   rests on three things only.

   1. THE PLATE. Every page opens on an ink band that runs the full width of
      the screen: the trail, then the title at up to 110px in Spectral, then
      the direct answer. It is the first page of a judgment, not a web hero.

   2. THE FIGURE. 64 EUR. 0,22 mg/l. 1 600 a 16 000 EUR. The amounts are the
      product of this site, so they are set as graphic matter: Spectral, on
      the tabular track, one to three steps above the running size, and very
      large in the opening scale, which leaves the column for a band of its
      own. No competitor of this trade does it, and it costs no image.

   3. THE ALTERNATION. Ink, cream, paper, cream, paper, cream, ink. A page of
      1 800 words needs a floor under each of its parts.

   Coming out of the column is always a matter of ground, never of line
   length: inside every band the prose keeps its 65 to 75 signs.
   -------------------------------------------------------------------------- */

:root {
	--dlc-gutter: var( --wp--style--root--padding-left, 1.75rem );
	--dlc-shell: 1360px;
	/* 740 depuis le 09/10/2026. Troisieme reglage, et le deuxieme sur la meme
	   plainte : 610, puis 680 le 01/10, et la cliente trouvait toujours la page
	   trop vide sur ordinateur. Mesure sur le rendu avant de bouger, et non sur
	   le CSS : 69 signes par ligne a 680 px, 78 a 740. La charte ecrit « la
	   prose garde ses 65 a 75 signes », on en sort donc de trois. C'est un
	   arbitrage de la cliente contre la direction, assume et ecrit ici. */
	--dlc-column: 740px;

	/* ONE LEFT EDGE.

	   The document has a single left margin, the one the prose column sets,
	   and everything that leaves the column starts on it: the title at 110px,
	   the direct answer, the opening scale, the register of cases, the
	   questions. Only the right edge moves, out to the width of the shell.
	   That is what a sheet of paper does, and it is what keeps a full width
	   band from reading as a second, unrelated page.

	   Both values are pure lengths resolved against the viewport, so nothing
	   here depends on 100vw and nothing can overshoot by the width of a
	   scrollbar. See the note on the content block below for why. */
	/* LA MARGE GAUCHE CESSE DE GRANDIR AVEC L'ECRAN.

	   Sans le plafond, ce bord vaut la moitie de ce qui reste a cote de la
	   colonne, donc il suit la fenetre sans limite : mesure le 09/10/2026,
	   380 px de vide a gauche sur un ecran de 1440, 620 px sur un 1920, ou le
	   document n'occupait plus que 47 % de la page. Plafonne a 280 px, il
	   occupe 78 % a 1440 et 71 % a 1920.

	   Le plafond ne mord qu'au-dela d'environ 1300 px : en dessous, c'est la
	   moitie de la place restante qui l'emporte, et le comportement est
	   inchange. */
	--dlc-edge-left: max(
		var( --dlc-gutter, 1.75rem ),
		min( 280px, calc( ( 100% - var( --dlc-column, 740px ) ) / 2 ) )
	);
	--dlc-edge-right: max( var( --dlc-gutter, 1.75rem ), calc( ( 100% - var( --dlc-shell, 1360px ) ) / 2 ) );
}

/* main spans the viewport and holds no padding of its own, so a band is just
   a block child: no negative margin, no 100vw, nothing that can overshoot by
   the width of a scrollbar. */
.dlc-main {
	padding-inline: 0;
}

/* Bands butt against each other and against the prose. The block gap of the
   site would otherwise slip a strip of cream between two grounds, which
   reads as a mistake rather than as a rhythm. */
.dlc-main > * {
	margin-block-start: 0;
}

/* The global padding comes off the content block and moves onto the column
   itself and onto each band. Two reasons, and the second is the one that
   matters: a percentage inside a band resolves against the band's containing
   block, so as long as the content block is padded, every band computing its
   own left edge would be off by exactly that padding. With the padding on the
   column, 100% is the viewport, on every band, at every width. */
.dlc-main > .wp-block-post-content {
	padding-inline: 0;
}

/* Core hands an alignfull child of a padded block a negative margin equal to
   that padding. The padding is gone, so the margin has to go with it, or the
   band hangs 28px off each side of the screen. */
.dlc-main > .wp-block-post-content > .alignfull {
	margin-inline: 0;
	max-width: none;
}

.wp-block-post-content.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
	max-width: min( var( --dlc-column, 740px ), 100% - 2 * var( --dlc-gutter, 1.75rem ) );
}

.wp-block-post-content.is-layout-constrained > .alignwide {
	max-width: min( var( --dlc-shell, 1360px ), 100% - 2 * var( --dlc-gutter, 1.75rem ) );
}

/* LA PROSE SE POSE SUR LE BORD, elle n'est plus centree.

   Le layout `constrained` de WordPress donne deux marges automatiques a chaque
   enfant, en `!important`, ce qui centre la colonne dans la fenetre. Tant que
   le bord gauche valait la moitie de la place restante, centre et pose sur le
   bord revenaient au meme. Depuis que ce bord est plafonne, les deux divergent,
   et laisser les paragraphes centres les mettrait a un endroit pendant que les
   bandes partiraient d'un autre : la regle du bord unique tomberait, et
   `qa/harnais/alignement.py` le verrait.

   SEULEMENT `margin-left`. La regle qui elargit un titre introduisant un
   tableau pose son propre `margin-right: var( --dlc-edge-right ) !important` ;
   ecrire ici `margin-right: auto` l'ecraserait et les titres fileraient
   jusqu'au bord de la fenetre. Mesure pendant l'essai du 09/10/2026. */
.wp-block-post-content.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
	margin-left: var( --dlc-edge-left ) !important;
}

/* The signature of the article closes it on cream, under the last band. The
   band's own bottom rule and the rule of the signature would otherwise land
   seven pixels apart. */
.dlc-main > .dlc-colophon {
	margin-block-start: clamp( 2.5rem, 5vw, 4rem );
}

/* Core zeroes the top margin of the first block of the content, which is what
   keeps the answer plate welded to the masthead. Any other opening block is a
   sheet of paper starting under an ink plate, and needs the air to say so. */
.wp-block-post-content.is-layout-constrained > :first-child:not( .dlc-band ):not( .dlc-lede ) {
	margin-block-start: clamp( 2.5rem, 5vw, 4rem );
}

/* A block that spreads without becoming a band: same left edge, same right
   edge, the ground of the page underneath. Core would hand an alignwide two
   auto margins and centre it on the shell, which is the one edge this
   document does not have. */
.wp-block-post-content.is-layout-constrained > .dlc-spread {
	max-width: none;
	margin-left: var( --dlc-edge-left ) !important;
	margin-right: var( --dlc-edge-right ) !important;
}

/* A rule under a heading says how wide what follows is. When the heading
   opens a spread or the register, the rule follows them out to the right
   edge instead of stopping at the measure of a column nothing below it
   uses. */
.wp-block-post-content.is-layout-constrained > h2:has( + .dlc-spread ),
.wp-block-post-content.is-layout-constrained > h2:has( + .dlc-register ),
/* Et desormais les baremes, pour la meme raison et parce que le client l'a
   vu : un titre dont le filet s'arretait a 1025 annoncait un tableau qui
   courait jusqu'a 1412. Trois cent quatre-vingt-sept pixels de decalage entre
   une ligne et ce qu'elle annonce, ca se remarque avant le contenu. */
.wp-block-post-content.is-layout-constrained > h2:has( + .wp-block-table ),
/* La bande des baremes, nommement : la bande des questions frequentes garde
   la mesure et son titre doit la garder aussi. Nomme et non devine par un
   :has() imbrique, qui est invalide et fait jeter la regle entiere, celle qui
   marchait comprise. */
.wp-block-post-content.is-layout-constrained > h2:has( + .dlc-band--scale ) {
	max-width: none;
	margin-left: var( --dlc-edge-left ) !important;
	margin-right: var( --dlc-edge-right ) !important;
}

/* Every band, every plate: the same left edge, the same right edge. */
.dlc-masthead,
.dlc-band,
.dlc-register,
.dlc-lede {
	padding-left: var( --dlc-edge-left );
	padding-right: var( --dlc-edge-right );
}

/* --------------------------------------------------------------------------
   THE PLATE
   -------------------------------------------------------------------------- */

.dlc-masthead {
	padding-block: clamp( 2rem, 4vw, 3.5rem ) clamp( 2.5rem, 5vw, 4.5rem );
}

.dlc-masthead__inner > * {
	margin-block-start: 0;
}

/* The scale. Version 1 topped out at 56px, which is a heading, not an
   opening. Fluid from 40px on a phone to 110px on a laptop, with the line
   measure of a display line, around twenty signs, so a long title breaks
   where a compositor would break it and never where the viewport decides. */
.dlc-masthead .wp-block-post-title,
.dlc-masthead h1 {
	margin: 0;
	/* 9.6em became 18em on 11/10/2026: the practice reads a title that sits
	   in a narrow strip of a wide plate as sad, and asked for it to follow
	   the width of the page. balance keeps the lines even. This overrules the
	   twenty-sign display line described above. */
	max-width: min( 100%, 18em );
	color: var( --dlc-white, #FBFAF7 );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 2.25rem, 5.4vw, 4.75rem );
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.028em;
	text-wrap: balance;
	/* Never a hyphen in a display line: hyphens:auto lets the browser break
	   "routiere" in two purely to even out three lines it could have evened
	   out by itself. Measured at 375px, the longest word of the file
	   ("confidentialite", fifteen signs at the 40px floor) holds the column
	   with room to spare, so the only safety net needed is the one that fires
	   when a word genuinely cannot fit. break-word, never anywhere: anywhere
	   also shrinks the min-content width and crushes the title in a grid. */
	hyphens: manual;
	overflow-wrap: break-word;
}

@media ( max-width: 30rem ) {
	.dlc-masthead .wp-block-post-title,
	.dlc-masthead h1 {
		text-wrap: pretty;
	}
}

/* The trail, on ink. Off white would compete with the title, so it is set in
   the light grey of the palette, 9.1:1, with the current page in light gold
   at 6.5:1. */
.dlc-masthead .wp-block-dlc-breadcrumbs {
	margin-block: 0 clamp( 1.5rem, 3vw, 2.5rem );
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-masthead .dlc-breadcrumbs__link {
	color: var( --dlc-mist, #C9D2DA );
}

.dlc-masthead .dlc-breadcrumbs__link:hover,
.dlc-masthead .dlc-breadcrumbs__link:focus-visible {
	color: var( --dlc-white, #FBFAF7 );
	border-bottom-color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-masthead .wp-block-dlc-breadcrumbs [ aria-current="page" ] {
	color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-masthead .dlc-breadcrumbs__item + .dlc-breadcrumbs__item::before {
	border-top-color: var( --dlc-goldlight, #C9AE79 );
	border-right-color: var( --dlc-goldlight, #C9AE79 );
}

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

/* --------------------------------------------------------------------------
   The plate with a portrait: the person page and the home page.

   On a lawyer's site the face is an argument, and an editorial direction with
   no image at all is exactly the tic this project set out to avoid. The
   photograph is the featured image of the page, so Isabelle can change it
   from the editor without touching a template.
   -------------------------------------------------------------------------- */

.dlc-masthead--portrait .dlc-masthead__inner,
.dlc-masthead--home .dlc-masthead__inner {
	display: grid;
	gap: clamp( 2rem, 4vw, 3.5rem );
	align-items: end;
}

/* LA SECONDE COLONNE NE S'OUVRE QUE S'IL Y A UNE PHOTO. core/post-featured-image
   ne rend rien du tout, pas meme une enveloppe, quand la page n'a pas d'image
   mise en avant : une grille a deux colonnes ecrite sans condition comprimerait
   alors le titre pour reserver la place d'un vide. Le gabarit page-simple sert
   aussi les deux pages legales, qui n'en portent aucune, et la garde vaut aussi
   pour l'accueil le jour ou quelqu'un retire son portrait. */
@media ( min-width: 48rem ) {
	.dlc-masthead--portrait .dlc-masthead__inner:has( .dlc-masthead__photo img ),
	.dlc-masthead--home .dlc-masthead__inner:has( .dlc-masthead__photo img ) {
		grid-template-columns: minmax( 0, 1fr ) minmax( 12rem, 22rem );
	}
}

/* On a tablet the plate has 700px to share: a 352px portrait would take half
   of it and the title would be the illustration. The portrait gives the
   column back until the page is wide enough for both. */
@media ( min-width: 48rem ) and ( max-width: 61.99rem ) {
	.dlc-masthead--portrait .dlc-masthead__inner:has( .dlc-masthead__photo img ),
	.dlc-masthead--home .dlc-masthead__inner:has( .dlc-masthead__photo img ) {
		grid-template-columns: minmax( 0, 1fr ) minmax( 10rem, 15rem );
	}
}

/* Une plaque dont le titre tient en deux mots. La hauteur de la bande est
   donnee par la photo : a 352 px de large, son cadre 4/5 fait 440 px de haut,
   et « Me contacter » laisse alors 300 px d'encre vide au-dessus de lui. La
   photo passe donc en appui, pas en portrait d'ouverture. */
.dlc-masthead--aside .dlc-masthead__inner:has( .dlc-masthead__photo img ) {
	grid-template-columns: minmax( 0, 1fr ) minmax( 9rem, 16rem );
}

.dlc-masthead__text > * {
	margin-block-start: 0;
}

/* The photograph sits on the baseline of the band, cropped in portrait, with
   the gold rule of the file over it. No radius, no shadow, no vignette. */
.dlc-masthead__photo {
	margin: 0;
	border-top: 3px solid var( --dlc-gold, #A8874E );
}

.dlc-masthead__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: 0;
}

/* On a phone the plate is one column, so the portrait takes the width it
   needs to read as a face and not one pixel more: at 20rem its 4/5 crop
   pushes the claim and the two calls to action a full screen down. */
@media ( max-width: 47.99rem ) {
	.dlc-masthead__photo {
		max-width: 16rem;
	}
}

/* The home page opens wider: it is the page the visitor lands on, and the
   only one with no trail above the title. */
.dlc-masthead--home {
	padding-block: clamp( 2.5rem, 5vw, 4.75rem ) clamp( 2.5rem, 5vw, 4.75rem );
}

/* A plate that carries a portrait gives a third of its width to it, so its
   title is set below the size the article plates take: measured on the
   render, this is the largest size at which the longest word of the file
   ("circulation", "specialiste", "Pechard,") still holds one line in the
   column that is left. A title that hyphenates is a title set too large for
   its column, so hyphenation is turned off here and kept only on a phone,
   where the plate is one column and the title is at its floor. */
.dlc-masthead--home .wp-block-post-title,
.dlc-masthead--portrait .wp-block-post-title {
	font-size: clamp( 2.125rem, 4.1vw, 3.5rem );
	max-width: none;
}



/* --------------------------------------------------------------------------
   THE BANDS
   -------------------------------------------------------------------------- */

.dlc-band {
	padding-block: clamp( 2.5rem, 5.5vw, 4.5rem );
	margin-block: clamp( 3rem, 6vw, 5rem );
}

/* Leaving the column never means spreading prose over 900px: the ground goes
   full width, the measure does not move. */
.dlc-band__inner--column {
	max-width: var( --dlc-column, 680px );
}

.dlc-band__inner > :first-child {
	margin-top: 0;
}

.dlc-band__inner > :last-child {
	margin-bottom: 0;
}

/* ---- The direct answer: the foot of the ink plate ------------------------

   It is the passage answer engines quote, so it opens the document rather
   than sitting in a box inside it. Butts against the masthead above: one
   plate, two registers. */
.dlc-band--answer {
	background-color: var( --dlc-navy, #1C2B39 );
	color: var( --dlc-white, #FBFAF7 );
	padding-block: 0 clamp( 2.75rem, 5.5vw, 4.75rem );
	margin-block: 0;
}

.wp-block-post-content > .dlc-band--answer:first-child {
	margin-top: 0;
}

.dlc-band--answer .dlc-short-answer {
	background-color: transparent !important;
	border: 0 !important;
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) ) !important;
	padding: clamp( 1.75rem, 3.5vw, 2.5rem ) 0 0 !important;
	margin: 0 !important;
}

.dlc-band--answer .dlc-short-answer::before {
	color: var( --dlc-goldlight, #C9AE79 );
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0.9rem;
}

.dlc-band--answer .dlc-short-answer > p {
	color: var( --dlc-white, #FBFAF7 );
	font-size: clamp( 1.125rem, 1.7vw, 1.375rem );
	line-height: 1.5;
	letter-spacing: -0.004em;
}

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

.dlc-band--answer :focus-visible {
	outline-color: var( --dlc-goldlight, #C9AE79 );
}

/* ---- The opening scale: the monument of figures ------------------------- */

.dlc-band--scale {
	background-color: var( --dlc-paper, #F1EFE9 );
	border-block: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

/* A band that opens right under its own heading says the heading names it.
   The gold rule of the heading is the only gold rule of that junction: two,
   thirty pixels apart, read as a printing fault. */
.wp-block-post-content > h2 + .dlc-band,
.wp-block-post-content > h3 + .dlc-band {
	margin-top: clamp( 1.75rem, 3.5vw, 2.75rem );
}

.dlc-band--scale .wp-block-table {
	margin-block: 0;
}

/* ONE right edge, for the scales too. The six column scale used to push its
   band 132 px past the document's right edge, to keep its amounts on a single
   line; the column went from 610 to 680 px on 01/10/2026 and gave it those
   pixels back on the LEFT. Measured again at 1440, 1280, 1024 and 820 px on
   the only table concerned: identical line count, identical worst cell, no
   scroll. The exception bought nothing and cost the alignment a reader sees,
   so it is gone. Reinstate it only against a fresh measurement. */

/* The pinned first column of a scrolling scale takes the ground of the page
   underneath it; on the band the ground is paper. */
@media ( max-width: 56rem ) {
	.dlc-band--scale .wp-block-table tbody tr > *:first-child {
		background-color: var( --dlc-paper, #F1EFE9 );
	}
}

/* ---- The warning: the ink beat in the middle of a long page ------------- */

.dlc-band--warning {
	background-color: var( --dlc-navy, #1C2B39 );
	padding-block: 0;
}

.dlc-band--warning .dlc-warning {
	padding-inline: 0 !important;
	padding-block: clamp( 2.25rem, 4.5vw, 3.5rem ) !important;
	margin: 0 !important;
	border-top: 0 !important;
}

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

.dlc-band--faq,
.dlc-band--form {
	background-color: var( --dlc-paper, #F1EFE9 );
	border-block: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
}

/* The form already carries its own paper ground and its own gold rule from
   the composition of the forms lot; on the band they would double up. */
.dlc-band--form .dlc-contact-form {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.dlc-band--faq .wp-block-dlc-faq {
	margin-block: 0;
}

/* ---- The tally of the person page --------------------------------------- */

.dlc-band--tally {
	background-color: var( --dlc-paper, #F1EFE9 );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	padding-block: clamp( 2rem, 4vw, 3.25rem );
	margin-top: 0;
}

.dlc-tally {
	display: grid;
	gap: clamp( 1.25rem, 3vw, 2.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.dlc-tally__item {
	margin: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var( --dlc-gold, #A8874E );
}

.dlc-tally .dlc-fig {
	display: block;
	font-size: clamp( 2rem, 3.9vw, 3.25rem );
	line-height: 1;
}

.dlc-tally__label {
	display: block;
	margin-top: 0.35rem;
	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 );
}

/* An entry with no figure carries its own weight: Spectral at the size of a
   section title, so the three cells of the tally read as one register. */
.dlc-tally__label--solo {
	margin-top: 0;
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.75rem, 3.4vw, 2.75rem );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-transform: none;
	color: var( --dlc-navy, #1C2B39 );
}

/* ---- The register of situations, on the home page ----------------------- */

/* The content ships the six cases as two rows of three columns. They are
   already unstacked into one continuous list further up this file; the band
   gives that list the full width of the screen and a paper ground, which is
   what turns it from a list into the index of the file.

   The rules pair the rows by adjacency rather than by :first-of-type, which
   would count every div of the page: the open rule goes on any register not
   preceded by one, the closing rule on any register not followed by one. Add
   a third row of cases and it still holds. */
.dlc-register {
	background-color: var( --dlc-paper, #F1EFE9 );
	margin-block: 0;
	border-top: 3px solid var( --dlc-gold, #A8874E );
	padding-top: clamp( 1.5rem, 3vw, 2.5rem );
	padding-bottom: clamp( 1.5rem, 3vw, 2.5rem );
}

.dlc-register + .dlc-register {
	border-top: 0;
	padding-top: 0;
}

.dlc-register:has( + .dlc-register ) {
	padding-bottom: 0;
}

.wp-block-columns.dlc-register:has( + .dlc-register ) {
	border-bottom: 0;
}

/* Full width, one case per line: the label can finally be set at the size of
   a section title rather than at the size of a caption. */
.dlc-register .dlc-card > p {
	font-size: clamp( 1.3125rem, 2.4vw, 1.9375rem ) !important;
	letter-spacing: -0.012em;
}

.dlc-register .dlc-card::before {
	font-size: clamp( 1.625rem, 2.4vw, 2rem );
	width: 2.6ch;
}

.dlc-register .dlc-card {
	padding-block: clamp( 1.1rem, 2vw, 1.55rem ) !important;
}

/* The hover ground of a case is the paper of the page; on the paper band it
   has to be the cream, or nothing happens under the pointer. */
.dlc-register .dlc-card:hover {
	background-color: var( --dlc-cream, #FAF9F6 ) !important;
}

/* --------------------------------------------------------------------------
   THE FIGURE

   Spectral, tabular, negative tracking: a published amount, not a cell of a
   spreadsheet. The class is posed server side on the cells of a scale that
   hold a quantity and nothing else, so it follows the content wherever it is
   edited and never has to be written by hand.
   -------------------------------------------------------------------------- */

.dlc-fig {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.015em;
	line-height: 1.08;
	color: var( --dlc-navy, #1C2B39 );
}

/* --------------------------------------------------------------------------
   THE LEDE: the ink band that continues the plate on the home page
   -------------------------------------------------------------------------- */

.dlc-lede {
	padding-block: clamp( 2.25rem, 4.5vw, 3.5rem ) clamp( 2.5rem, 5vw, 4rem ) !important;
	margin-block: 0 !important;
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

/* The band already holds the left edge, so its blocks fill it instead of
   being centred inside it by the constrained layout. */
.dlc-lede > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.dlc-lede .dlc-hero {
	color: var( --dlc-white, #FBFAF7 );
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-size: clamp( 1.375rem, 2.6vw, 2.125rem ) !important;
	line-height: 1.38;
	letter-spacing: -0.008em;
	margin: 0 0 clamp( 1.75rem, 3vw, 2.5rem );
	/* A claim at 34px over 830px would run to sixty signs a line. Around
	   thirty five is the measure of a display line. */
	max-width: min( 100%, 17em ) !important;
}

.dlc-lede .wp-block-buttons {
	gap: 0.85rem;
}

.dlc-lede .wp-block-button__link.has-gold-background-color {
	background-color: var( --dlc-white, #FBFAF7 );
	border-color: var( --dlc-white, #FBFAF7 );
	color: var( --dlc-navy, #1C2B39 );
}

.dlc-lede .wp-block-button__link.has-gold-background-color:hover,
.dlc-lede .wp-block-button__link.has-gold-background-color:focus-visible {
	background-color: transparent;
	border-color: var( --dlc-goldlight, #C9AE79 );
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-lede .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var( --dlc-goldlight, #C9AE79 );
	color: var( --dlc-white, #FBFAF7 );
}

.dlc-lede .is-style-outline .wp-block-button__link:hover,
.dlc-lede .is-style-outline .wp-block-button__link:focus-visible {
	background-color: var( --dlc-white, #FBFAF7 );
	border-color: var( --dlc-gold, #A8874E );
	color: var( --dlc-navy, #1C2B39 );
}

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