/**
 * Site shell: header, main navigation, footer, fixed mobile action bar.
 *
 * Loaded on every page because the shell is on every page. Anything that
 * belongs to a single block or to the body of a page lives in content.css.
 * Every custom property carries a literal fallback: a var() with no fallback
 * makes the whole declaration disappear if the preset is ever renamed.
 *
 * The letterhead is the idea: a gold rule across the top of the sheet, the
 * name, the telephone, then the table of contents of the file underneath.
 */

: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 );

	--dlc-hairline: #DAD5C9;
	--dlc-hairline-strong: #BFB8A6;
	--dlc-hairline-dark: rgba( 251, 250, 247, 0.24 );

	/*
	 * Colour of the focus ring, and the only place it is decided. Gold was
	 * used here and it does not pass: 2,93:1 on the paper and 2,20:1 on the
	 * mist, under the 3:1 a non-text indicator owes. Ink gives 12,56:1 on the
	 * paper, light gold 6,75:1 on the ink, and no single colour clears 3:1 on
	 * both. So the value is inherited rather than listed: an ink band declares
	 * it once below and everything inside follows, including what is added to
	 * that band later.
	 */
	--dlc-focus: var( --dlc-navy, #1C2B39 );

	/* Height reserved under the page for the fixed mobile action bar. */
	--dlc-bar-height: 4.6rem;
	--dlc-shell-width: 1120px;
}

/* --------------------------------------------------------------------------
   Global
   -------------------------------------------------------------------------- */

/* Editorial underline: ink text, gold rule. Gold type on cream is 3.2:1,
   below AA, so the gold never carries the meaning. */
.wp-site-blocks a:where( :not( .wp-element-button ) ) {
	text-decoration-color: var( --dlc-gold, #A8874E );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wp-site-blocks a:where( :not( .wp-element-button ) ):hover,
.wp-site-blocks a:where( :not( .wp-element-button ) ):focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Every ink surface of the site, in one list. `has-navy-background-color` is
 * core's own class and it carries the masthead, the conversion band, the
 * footer and the warning frame of the patterns, so a page built in the editor
 * is covered without touching this file. The others are the ink zones this
 * theme paints in CSS.
 */
.has-navy-background-color,
.dlc-band--answer,
.dlc-band--warning,
.dlc-mobile-bar,
.wp-block-table thead,
.dlc-releve__band--bilan,
.dlc-releve__band--garde,
.dlc-releve__table tr.is-retenu {
	--dlc-focus: var( --dlc-goldlight, #C9AE79 );
}

/*
 * Two exceptions inside the menu, and they are the reason this is settled on
 * the render and not on the class names. The responsive container carries the
 * ink class at all times, but it only paints ink once the burger overlay is
 * open: closed, on a wide screen, its six items sit on the cream of the
 * letterhead, where light gold reaches 2,03:1. The dropdown under them, on the
 * other hand, really is an ink panel. A declaration on the element beats an
 * inherited one whatever the specificity, so the order of these two rules
 * carries no weight.
 */
.wp-block-navigation__responsive-container:not( .is-menu-open ) {
	--dlc-focus: var( --dlc-navy, #1C2B39 );
}

.wp-block-navigation__submenu-container {
	--dlc-focus: var( --dlc-goldlight, #C9AE79 );
}

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

/* --------------------------------------------------------------------------
   Clickable line
   Used by the register of situations on the home page. The whole line is the
   target, but the markup keeps a single real <a href> with the label as its
   text: that is what a crawler and a screen reader read, and it is what
   survives if this file never loads. The overlay is the link's own ::after,
   not a wrapper element, so nothing about the block markup is invalid in the
   editor.
   -------------------------------------------------------------------------- */

.dlc-card {
	position: relative;
}

.dlc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The link itself only wraps the words, so its focus ring would trace the
   text and not the line the pointer can hit. Move the ring onto the line. */
.dlc-card:has( .dlc-card__link:focus-visible ) {
	outline: 3px solid var( --dlc-focus, #1C2B39 );
	outline-offset: 2px;
}

.dlc-card:has( .dlc-card__link:focus-visible ) .dlc-card__link:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.dlc-header {
	background-color: var( --dlc-cream, #FAF9F6 );
	border-top: 4px solid var( --dlc-gold, #A8874E );
	border-bottom: 1px solid var( --dlc-hairline-strong, #BFB8A6 );
	padding-block: 1.35rem 0;
}

/* Letterhead layout: name and telephone on the first row, the file's table of
   contents on the second. The menu labels come from the brief and are long, a
   single row wraps badly well before the 1120px shell width. */
.dlc-header__inner {
	gap: 1rem;
}

.dlc-logo {
	display: inline-flex;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 0;
}

/* An SVG with no CSS width collapses to zero inside a flex container. */
.dlc-logo__svg,
.dlc-footer__logo {
	display: block;
	height: 2.7rem;
	width: auto;
	max-width: 100%;
	aspect-ratio: 770 / 135;
	flex: 0 0 auto;
}

.dlc-header__call {
	flex: 0 0 auto;
}

/* The telephone in the letterhead is a line of the head, not a call to
   action competing with the page: rule under it, ink type, nothing filled. */
.dlc-header__call .wp-block-button__link {
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var( --dlc-gold, #A8874E );
	color: var( --dlc-navy, #1C2B39 );
	padding: 0.3rem 0.1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	white-space: nowrap;
}

.dlc-header__call .wp-block-button__link:hover,
.dlc-header__call .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var( --dlc-navy, #1C2B39 );
	border-bottom-color: var( --dlc-navy, #1C2B39 );
}

@media ( min-width: 782px ) {
	.dlc-nav {
		flex: 1 1 100%;
		margin-top: 1.15rem;
		padding-top: 0;
		border-top: 1px solid var( --dlc-hairline, #DAD5C9 );
	}
}

@media ( max-width: 781px ) {
	.dlc-logo__svg {
		height: 2.2rem;
	}

	.dlc-header {
		padding-block: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Main navigation

   The overlay colours (ink background, off white text) are block attributes,
   so core prints them as preset classes carrying !important. Those classes
   land on the desktop container too, which would paint the whole header ink,
   and on the dropdown panel, which is where we actually want them. So:
   neutralise the container while the overlay is closed, and let the panel
   keep them.
   -------------------------------------------------------------------------- */

.dlc-nav .wp-block-navigation__container {
	column-gap: 1.9rem;
	row-gap: 0.2rem;
}

.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) {
	background-color: transparent !important;
	color: inherit !important;
}

/* Top level, on the cream letterhead. Spaced capitals, the register of a
   table of contents. */
.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var( --dlc-navy, #1C2B39 );
	text-decoration: none;
	padding-block: 0.95rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	border-bottom: 3px solid transparent;
	transition: border-color 0.12s ease;
}

.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var( --dlc-gold, #A8874E );
}

.dlc-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.dlc-nav .wp-block-navigation__submenu-icon {
	padding: 0 0 0 0.3rem;
	color: var( --dlc-gold, #A8874E );
}

/* Dropdown: a flat ink panel under a gold rule. No rounded corners, no
   decorative shadow. Off white on ink is 15:1. */
.dlc-nav .wp-block-navigation__submenu-container {
	border: 0;
	border-top: 3px solid var( --dlc-gold, #A8874E );
	border-radius: 0;
	padding-block: 0.4rem;
}

/* Core pins the open panel to min-width 200px through a five class selector
   with an attribute, which is too narrow for labels like "Conduire sans
   permis ou sans assurance". Matching that specificity would mean copying
   core internals into this file, so one documented override instead. Scoped
   to the closed responsive container, because inside the burger overlay a
   20rem panel would overflow a 360px screen. */
.dlc-nav .wp-block-navigation__responsive-container:not( .is-menu-open ) .wp-block-navigation__submenu-container {
	min-width: 21rem !important;
	max-width: min( 26rem, 90vw );
}

.dlc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var( --dlc-white, #FBFAF7 );
	padding: 0.6rem 1.2rem;
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	border-bottom: 0;
	border-left: 3px solid transparent;
}

.dlc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dlc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: rgba( 251, 250, 247, 0.12 );
	border-left-color: var( --dlc-gold, #A8874E );
	color: var( --dlc-white, #FBFAF7 );
}

/* Visual divider before the last dropdown entry. The class comes from the
   block attribute, the :last-child rule is the belt and braces version. */
.dlc-nav .wp-block-navigation__submenu-container > .dlc-nav__divider,
.dlc-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
	margin-top: 0.45rem;
	padding-top: 0.45rem;
}

/* Burger button and overlay. */
.dlc-nav .wp-block-navigation__responsive-container-open {
	color: var( --dlc-navy, #1C2B39 );
	padding: 0.4rem;
}

.dlc-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

.dlc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var( --dlc-white, #FBFAF7 );
	border-bottom: 0;
	border-left: 0;
	padding-block: 0.5rem;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Gold rail marking the depth of the dropdown inside the burger overlay.
   Core sets the padding of this container through a five class selector,
   hence the six classes here. If core ever changes, the site loses a
   decorative rail and nothing else. */
.dlc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	border: 0;
	border-left: 2px solid var( --dlc-gold, #A8874E );
	border-radius: 0;
	padding-left: 1.25rem;
	padding-right: 0;
	margin-left: 0.15rem;
}

.dlc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem;
}

.dlc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   The colophon of the document: the same gold rule that opens the sheet
   closes it.
   -------------------------------------------------------------------------- */

.dlc-footer {
	border-top: 4px solid var( --dlc-gold, #A8874E );
	padding-block: 4rem 2.5rem;
	padding-inline: var( --wp--preset--spacing--40, 1.75rem );
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.7;
}

.dlc-footer__title {
	font-family: var( --wp--preset--font-family--sans, sans-serif );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --dlc-goldlight, #C9AE79 );
	margin: 0 0 1.1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dlc-footer__links li + li {
	margin-top: 0.55rem;
}

.dlc-footer a {
	color: var( --dlc-mist, #C9D2DA );
	text-decoration-color: var( --dlc-goldlight, #C9AE79 );
}

.dlc-footer__links a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

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

.dlc-footer a:hover,
.dlc-footer a:focus-visible {
	color: var( --dlc-white, #FBFAF7 );
	text-decoration-color: var( --dlc-white, #FBFAF7 );
}

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

.dlc-footer__logo {
	height: 3.1rem;
	margin-bottom: 1.6rem;
}

.dlc-nap {
	margin: 0;
	line-height: 1.95;
	overflow-wrap: break-word;
}

.dlc-footer__legal {
	margin-top: 3.25rem;
	padding-top: 1.35rem;
	border-top: 1px solid var( --dlc-hairline-dark, rgba( 251, 250, 247, 0.24 ) );
}

.dlc-footer__legal-links {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var( --dlc-mist, #C9D2DA );
}

@media ( max-width: 781px ) {
	.dlc-footer {
		padding-block: 3rem 2rem;
	}

	.dlc-footer__col--nap {
		order: -1;
	}
}

/* --------------------------------------------------------------------------
   Fixed mobile action bar
   The most important conversion element of the site. It must never cover the
   end of the content, so the footer reserves its height underneath.
   -------------------------------------------------------------------------- */

/* Doubled class on purpose: core prints `body .is-layout-flex{display:flex}`,
   which is (0,1,1) and beats a single class selector. */
.dlc-mobile-bar.dlc-mobile-bar {
	display: none;
}

@media ( max-width: 781px ) {
	.dlc-header__call.dlc-header__call {
		display: none;
	}

	.dlc-mobile-bar.dlc-mobile-bar {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 40;
		background-color: var( --dlc-navy, #1C2B39 );
		border-top: 3px solid var( --dlc-gold, #A8874E );
		padding: 0.55rem 0.7rem;
		padding-bottom: calc( 0.55rem + env( safe-area-inset-bottom, 0px ) );
	}

	.dlc-mobile-bar__actions {
		gap: 0.55rem;
		flex-wrap: nowrap;
	}

	.dlc-mobile-bar .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	.dlc-mobile-bar .wp-block-button__link {
		display: block;
		width: 100%;
		padding: 0.95rem 0.4rem;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-align: center;
		/* anywhere would let a long label shred the button */
		overflow-wrap: break-word;
	}

	/* Appeler: solid off white on ink, 15:1. */
	.dlc-mobile-bar__call .wp-block-button__link {
		background-color: var( --dlc-white, #FBFAF7 );
		border-color: var( --dlc-white, #FBFAF7 );
		color: var( --dlc-navy, #1C2B39 );
	}

	/* Verifier ma couverture: outlined off white on ink, 15:1. */
	.dlc-mobile-bar__cover .wp-block-button__link {
		background-color: transparent;
		border-color: var( --dlc-white, #FBFAF7 );
		color: var( --dlc-white, #FBFAF7 );
	}

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

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

	/* Clearance so the bar never hides the end of the page. */
	.dlc-footer {
		padding-bottom: calc( var( --dlc-bar-height, 4.6rem ) + 1.5rem + env( safe-area-inset-bottom, 0px ) );
	}

	html {
		scroll-padding-bottom: calc( var( --dlc-bar-height, 4.6rem ) + 1rem );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* --------------------------------------------------------------------------
   LE NUMERO DE TELEPHONE

   Atkinson Hyperlegible Next barre ses zeros. Ce n'est pas une fonctionnalite
   OpenType qu'on desactive, c'est le dessin meme de la fonte, choisie pour la
   basse vision : mesure le 09/10/2026, `font-feature-settings: "zero" 0`
   et `"zero" 1` rendent exactement la meme largeur. La cliente ne veut pas de
   ces zeros barres, et le seul moyen est de changer de fonte pour ce chiffre.

   Spectral, donc, ce qui n'est pas un pis-aller : sur ce site TOUS les chiffres
   sont en Spectral, c'est le deuxieme element signature de la direction. Un
   numero de telephone est un chiffre.

   Le selecteur prend les quatre parties du gabarit et les boutons poses dans
   le corps des pages, sans avoir a les enumerer.
   -------------------------------------------------------------------------- */

a[href^="tel:"] {
	font-family: var( --wp--preset--font-family--serif, Georgia, serif );
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.04em;
}