/*
Theme Name: FS Location
Theme URI: https://correctonet.be
Author: Correctonet
Author URI: https://correctonet.be
Description: Thème sur mesure pour FS LOCATION, activité de location de véhicules utilitaires de FS Concept. Conçu pour fonctionner avec l'extension FSLOCATION, dont il met en page le catalogue, le planning et le formulaire de demande. Intègre un mode maintenance avec lien de prévisualisation. Aucune police ni service externe : rien à déclarer au RGPD.
Version: 2.10.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fslocation
Tags: business, custom-logo, custom-menu, one-column, two-columns, right-sidebar, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Jetons
   ========================================================================== */

:root {
	--bleu: #1270B8;
	--bleu-fonce: #0E5B96;
	--bleu-clair: #E8F1F8;
	--bleu-pale: #F3F8FC;
	--ink: #232F38;
	--ink-2: #4A5761;
	--gris: #5B6B7F;   /* 5,45:1 sur blanc — l'ancien #7A8792 était à 3,68:1 */
	--trait: #DCE3E8;
	--trait-clair: #EDF1F4;
	--fond: #FFFFFF;
	--fond-2: #F7F9FB;
	--ambre: #C77E12;
	--vert: #2E7D57;

	--rayon: 10px;
	--rayon-l: 16px;
	--ombre: 0 1px 2px rgba(35, 47, 56, .05), 0 12px 32px -20px rgba(35, 47, 56, .3);
	--ombre-forte: 0 2px 4px rgba(35, 47, 56, .06), 0 24px 48px -24px rgba(35, 47, 56, .35);

	--police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--largeur: 1180px;
	--gouttiere: 24px;
	/* Décélération exponentielle : l'arrivée est franche puis se pose,
	   sans rebond. Une courbe linéaire se lit comme une latence. */
	--sortie: cubic-bezier(.16, 1, .3, 1);

	/* Hauteur de l'en-tête collant. Sert à ne pas masquer l'élément
	   qui reçoit le focus au clavier (WCAG 2.2 — 2.4.11). */
	--entete-h: 92px;
}

html { scroll-padding-top: var(--entete-h); }

/* ==========================================================================
   2. Réinitialisation mesurée
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--fond);
	color: var(--ink);
	font-family: var(--police);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--bleu-fonce); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bleu); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 2px;
	border-radius: 3px;
}

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.018em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.ecran-lecteur {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.lien-evitement {
	position: absolute; left: -9999px; top: 0;
	z-index: 100;
	padding: .7em 1.2em;
	background: var(--ink); color: #fff;
	font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { left: 12px; top: 12px; color: #fff; }

/* ==========================================================================
   3. Structure
   ========================================================================== */

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 var(--gouttiere);
}

.conteneur-etroit { max-width: 760px; margin: 0 auto; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-fond { background: var(--fond-2); }
.section-bleu { background: var(--bleu-pale); }

.section-tete { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-tete h2 { margin-bottom: .45em; }
.section-tete p { color: var(--ink-2); margin: 0; font-size: 1.06rem; }

.surtitre {
	display: block;
	margin: 0 0 .8rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bleu);
}

/* ==========================================================================
   4. En-tête
   ========================================================================== */

.entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--trait);
}

/* La barre d'en-tête est plus large que la colonne de contenu : avec sept
   entrées de menu, l'accès à l'espace client et le bouton d'appel, 1180 px
   ne suffisaient plus — mesuré, il manquait 126 px et le bouton d'appel
   sortait de l'écran. Un en-tête plus large que le texte est un parti pris
   courant, et il évite de sacrifier une entrée de menu. */
.entete-rangee {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 76px;
	max-width: 1340px;
	/*
	 * padding-block, pas padding : la règle raccourcie remétait la
	 * gouttière horizontale de .conteneur à zéro, et la marque se
	 * retrouvait collée au bord gauche de l'écran pendant que le reste
	 * du site était bien aligné. Les propriétés logiques évitent aussi
	 * d'avoir à tout refaire si le site passe un jour en RTL.
	 */
	padding-block: .6rem;
}

/* ---------- La marque ----------
   Le logo officiel, celui des camionnettes, vectorisé depuis le PDF du
   graphiste. Les lettres FS sont évidées du bloc : elles prennent la
   couleur du fond, donc le même dessin tient sur clair comme sur sombre
   et il n'y a pas deux logos à garder synchronisés.

   On règle la HAUTEUR et on laisse la largeur suivre : le logo complet et
   sa version sans baseline n'ont pas le même rapport, et c'est la hauteur
   qui doit rester constante d'un endroit à l'autre. */

.marque {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: 0 0 auto;
	line-height: 1;
	border-radius: 6px;
}

.marque-image {
	display: block;
	height: 2.5rem;
	width: auto;
	/* Les attributs width/height du balisage réservent la place avant le
	   chargement — sans ce max-width, un écran étroit laisserait le logo
	   pousser l'en-tête au-delà du bord. */
	max-width: 100%;
	transition: opacity .15s ease;
}

/* Sans la baseline, le dessin est plus court : on lui rend un peu de
   hauteur pour que « LOCATION » pèse le même poids qu'ailleurs. */
.marque-image-compacte { height: 2.3rem; }

/*
 * Sur un téléphone, l'en-tête tient quatre choses sur une ligne : la
 * marque, Menu, l'espace client et le bouton d'appel. Un logo trop large
 * fait basculer le bouton d'appel sur une deuxième ligne — mesuré à 390 px.
 * On ramène donc la marque à la largeur qu'occupait l'ancienne.
 */
@media (max-width: 600px) {
	.marque-image { height: 1.95rem; }
	.marque-image-compacte { height: 1.7rem; }
}

/* Un logo ne change pas de couleur au survol — il n'est pas un lien
   ordinaire. Un léger retrait suffit à dire qu'il est cliquable. */
.marque:hover .marque-image { opacity: .72; }

.marque:focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 3px;
}

/* Le pied de page a de la place : le logo complet, baseline comprise. */
.marque-blanche .marque-image { height: 3.4rem; }

/* ---------- L'ancienne marque dessinée en CSS ----------
   Conservée pour la page de maintenance, qui est un fichier autonome
   servi sans le thème et ne peut donc charger aucun fichier image. */

.marque-sceau {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .5rem;
	background: var(--ink);
	color: #fff;
	font-size: 1.32rem;
	font-weight: 800;
	/* Le carré est serré : les deux lettres doivent se toucher presque. */
	letter-spacing: -.03em;
	/* Le tracking négatif décale le bloc vers la gauche : on le recentre. */
	text-indent: -.03em;
}

.marque-mot {
	font-size: 1.42rem;
	font-weight: 800;
	letter-spacing: -.012em;
	color: var(--ink);
	transform: translateY(.02em);
}

/* Un logo téléversé dans WordPress est borné comme la marque du thème. */
.custom-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.custom-logo { height: 2.5rem; width: auto; max-width: 15rem; object-fit: contain; }

@media (forced-colors: active) {
	.marque-sceau {
		border: 1px solid CanvasText;
		forced-color-adjust: none;
		background: CanvasText;
		color: Canvas;
	}
}

.marque-texte {
	font-size: 1.15rem; font-weight: 700; color: var(--ink);
	letter-spacing: -.01em; text-decoration: none;
}

.nav-principale { margin-left: auto; }
.nav-principale ul {
	display: flex; align-items: center; gap: 1.6rem;
	list-style: none; margin: 0; padding: 0;
}
.nav-principale a {
	color: var(--ink-2); text-decoration: none;
	font-size: .95rem; font-weight: 600;
	padding: .3rem 0;
	border-bottom: 2px solid transparent;
	/* Un libellé de menu ne se coupe pas en deux. Sans cela, à l'étroit,
	   « Comment ça marche » passait sur deux lignes et déformait la
	   rangée entière au lieu de déclencher le repli. */
	white-space: nowrap;
}
.nav-principale a:hover,
.nav-principale li.courante > a,
.nav-principale .current-menu-item > a {
	color: var(--bleu); border-bottom-color: var(--bleu);
}

.entete-appel {
	display: inline-flex; align-items: center; gap: .5rem;
	flex: 0 0 auto;
	padding: .6rem 1.15rem;
	background: var(--bleu); color: #fff;
	border-radius: var(--rayon);
	font-size: .95rem; font-weight: 600; text-decoration: none;
	white-space: nowrap;
}
.entete-appel:hover { background: var(--bleu-fonce); color: #fff; }
.entete-appel svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* L'accès à l'espace client : une porte, pas un appel à l'action. Il est
   discret par construction — le visiteur qui vient louer ne doit pas
   hésiter entre deux boutons bleus. */
.entete-espace {
	display: inline-flex; align-items: center; gap: .45rem;
	flex: 0 0 auto;
	padding: .6rem .85rem;
	color: var(--ink-2);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	font-size: .92rem; font-weight: 600; text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease;
}
.entete-espace:hover { color: var(--bleu); border-color: var(--bleu); }
.entete-espace svg { width: 16px; height: 16px; flex: 0 0 16px; }

.bascule-menu {
	display: none;
	margin-left: auto;
	padding: .55rem .8rem;
	background: var(--fond); color: var(--ink);
	border: 1px solid var(--trait); border-radius: var(--rayon);
	font: inherit; font-size: .9rem; font-weight: 600;
	cursor: pointer;
}

/* Sept entrées ne tiennent pas à côté de la marque et du bouton
   d'appel sous 1 160 px : le menu se replie avant de passer sur deux
   lignes, pas une fois qu'il déborde. Seuil relevé à 1380 px le 2 novembre :
   l'accès à l'espace client occupe 147 px de plus, et le menu horizontal ne
   tenait plus en dessous. Sous ce seuil, « Espace client » et le téléphone
   restent visibles en toutes lettres — ce sont les deux choses qu'un
   visiteur cherche. */
@media (max-width: 1380px) {
	.bascule-menu { display: block; }
	.nav-principale {
		display: none;
		width: 100%;
		margin: 0;
		order: 3;
		padding-bottom: .8rem;
	}
	.nav-principale.est-ouvert { display: block; }
	.nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-principale li { border-top: 1px solid var(--trait-clair); }
	.nav-principale a { display: block; padding: .8rem 0; border-bottom: 0; white-space: normal; }
	.entete-rangee { flex-wrap: wrap; }
	.entete-espace { order: 1; }
	.entete-appel { order: 2; }
}

@media (max-width: 560px) {
	.entete-appel .appel-texte { display: none; }
	.entete-appel { padding: .6rem .8rem; }
	.entete-espace .espace-texte { display: none; }
	.entete-espace { padding: .6rem .7rem; }
	.custom-logo { height: 2.1rem; }

	/* Trois éléments dans une rangée de 320 px : l'écart de 1,5 rem du
	   bureau faisait déborder le bouton d'appel hors de l'écran. */
	.entete-rangee { gap: .7rem; }
	.marque-sceau { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; border-radius: .45rem; }
	.marque-mot { font-size: 1.18rem; }
	.bascule-menu { padding: .5rem .7rem; font-size: .86rem; }
}

@media (max-width: 360px) {
	.entete-rangee { gap: .5rem; }
	.marque-mot { font-size: 1.05rem; }
}

/* ==========================================================================
   5. Bandeau d'accueil
   ========================================================================== */

.bandeau {
	position: relative;
	padding: clamp(2.5rem, 5.5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(120% 90% at 88% 8%, var(--bleu-clair) 0%, transparent 62%),
		var(--fond);
	overflow: hidden;
}

.bandeau-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.bandeau h1 { margin-bottom: .5em; }
.bandeau h1 .accent { color: var(--bleu); }

.bandeau-chapeau {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--ink-2);
	max-width: 46ch;
	margin-bottom: 1.8rem;
}

.bandeau-arguments {
	display: flex; flex-wrap: wrap; gap: .55rem .7rem;
	list-style: none; margin: 0 0 2rem; padding: 0;
}
.bandeau-arguments li {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .35rem .8rem .4rem;
	background: var(--fond); border: 1px solid var(--trait);
	border-radius: 100px;
	font-size: .87rem; font-weight: 600; color: var(--ink-2);
}
.bandeau-arguments li::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--bleu); flex: 0 0 7px;
}

.bandeau-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.bandeau-visuel { position: relative; }
.bandeau-visuel svg { width: 100%; height: auto; }

@media (max-width: 880px) {
	.bandeau-grille { grid-template-columns: 1fr; }
	.bandeau-visuel { order: -1; max-width: 460px; }
}

/* Signature de marque, reprise du marquage des véhicules */
.bandeau-signature {
	margin: 0 0 .9rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bleu);
}

/* La photo du fourgon, détourée, posée à même le fond du bandeau */
.bandeau-visuel img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 880px) {
	.bandeau-visuel { max-width: none; }
}

/* La gamme, reprise de la charte FS Location */
.bandeau-texte-seul { max-width: var(--largeur); }
.bandeau-texte-seul .bandeau-chapeau { max-width: 56ch; }

.bandeau-gamme {
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--trait);
}

.bandeau-gamme img {
	width: 100%;
	height: auto;
	display: block;
}

.bandeau-baseline {
	margin: 1.1rem 0 0;
	text-align: center;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bleu);
}

/* Silhouette servie à la place d'une photo manquante */
.fsl-bloc .fsl-carte-visuel .fsl-silhouette,
.fsl-carte-visuel .fsl-silhouette {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14% 10% 12%;
	background: transparent;
}

/* ==========================================================================
   6. Boutons
   ========================================================================== */

.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .78em 1.5em;
	border: 1px solid transparent; border-radius: var(--rayon);
	font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bouton-primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton-primaire:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }

.bouton-secondaire { background: var(--fond); border-color: var(--trait); color: var(--ink); }
.bouton-secondaire:hover { border-color: var(--bleu); color: var(--bleu); }

.bouton-fantome { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.bouton-fantome:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.bouton-large { width: 100%; }

/* ==========================================================================
   7. Réassurance
   ========================================================================== */

.reassurance {
	border-top: 1px solid var(--trait);
	border-bottom: 1px solid var(--trait);
	background: var(--fond-2);
}

.reassurance-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 0;
}

.reassurance-item {
	display: flex; align-items: flex-start; gap: .9rem;
	padding: 1.6rem 1.5rem 1.7rem;
	border-right: 1px solid var(--trait-clair);
}
.reassurance-item:last-child { border-right: 0; }

.reassurance-item .picto {
	flex: 0 0 34px; width: 34px; height: 34px;
	color: var(--bleu);
}
.reassurance-item .picto svg { width: 100%; height: 100%; }

.reassurance-item b { display: block; font-size: .98rem; margin-bottom: .1rem; }
.reassurance-item span { font-size: .89rem; color: var(--ink-2); line-height: 1.45; }

@media (max-width: 900px) {
	.reassurance-item { border-right: 0; border-bottom: 1px solid var(--trait-clair); }
	.reassurance-item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   8. Étapes
   ========================================================================== */

/* ---------- Les trois étapes, sur un fil ----------
   C'est une séquence : l'ordre est l'information. Le fil la montre, les
   numéros la nomment. Le tracé du fil à l'arrivée est le seul moment
   animé composé du site — tout le reste n'est que du retour d'état. */

.etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	counter-reset: etape;
	list-style: none;
	margin: 0;
	padding: 0;
}

.etapes-fil {
	grid-template-columns: repeat(3, 1fr);
	padding-top: 3.1rem;
}
.etape {
	counter-increment: etape;
	position: relative;
	padding: 1.6rem 1.6rem 1.7rem;
	background: var(--fond);
	border: 1px solid var(--trait);
	border-radius: var(--rayon-l);
}

.etape::before {
	content: counter(etape);
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	margin-bottom: 1rem;
	background: var(--bleu-clair); color: var(--bleu-fonce);
	border-radius: 50%;
	font-size: 1.05rem; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.etapes-fil .etape {
	/* Avec un fil et des nœuds, l'encadré ne porte plus rien : il éloigne
	   le texte de la ligne et ajoute une boîte là où la séquence suffit. */
	position: relative;
	padding: 0 1.25rem 0 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.etapes-fil .etape::before {
	position: absolute;
	top: -3.1rem;
	left: 0;
	margin: 0;
	width: 40px;
	height: 40px;
	background: var(--bleu);
	color: #fff;
}

/* Chaque étape trace elle-même le segment qui la relie à la suivante.
   Aucun pourcentage à deviner : le trait suit la grille, quelle que
   soit la largeur et quel que soit le nombre d'étapes. */
.etapes-fil .etape::after {
	content: "";
	position: absolute;
	top: calc(-3.1rem + 19px);
	left: 52px;
	width: calc(100% - 52px + 1.5rem);
	height: 2px;
	background: var(--bleu);
	opacity: .3;
	transform-origin: left center;
}

.etapes-fil .etape:last-child::after { content: none; }

.etapes-fil .etape h3 { margin-top: 0; }

/* ---------- Le moment composé : le fil se trace à l'arrivée ----------
   Armé par .js-anim seulement. Sans script, ou en mouvement réduit, le
   fil et les nœuds sont en place dès le premier rendu. */

.js-anim .etapes-fil .etape::after {
	transform: scaleX(0);
	transition: transform 420ms var(--sortie);
}

.js-anim .etapes-fil.vu .etape::after { transform: scaleX(1); }

.js-anim .etapes-fil .etape::before {
	opacity: 0;
	transform: scale(.55);
	transition: opacity 240ms var(--sortie), transform 240ms var(--sortie);
}

.js-anim .etapes-fil.vu .etape::before {
	opacity: 1;
	transform: scale(1);
}

/* La cadence suit le tracé : un nœud s'allume quand le trait l'atteint. */
.js-anim .etapes-fil.vu .etape:nth-child(1)::before { transition-delay: 40ms; }
.js-anim .etapes-fil.vu .etape:nth-child(1)::after  { transition-delay: 180ms; }
.js-anim .etapes-fil.vu .etape:nth-child(2)::before { transition-delay: 480ms; }
.js-anim .etapes-fil.vu .etape:nth-child(2)::after  { transition-delay: 600ms; }
.js-anim .etapes-fil.vu .etape:nth-child(3)::before { transition-delay: 900ms; }

/* En colonne, le fil devient vertical et passe à gauche du texte. */
@media (max-width: 879px) {
	.etapes-fil {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding-top: 0;
		padding-left: 3.5rem;
	}

	.etapes-fil .etape { padding-right: 0; }

	.etapes-fil .etape::before {
		top: -2px;
		left: -3.5rem;
	}

	.etapes-fil .etape::after {
		top: 44px;
		left: calc(-3.5rem + 19px);
		width: 2px;
		height: calc(100% - 44px + 2.25rem);
		transform-origin: center top;
	}

	.js-anim .etapes-fil .etape::after { transform: scaleY(0); }
	.js-anim .etapes-fil.vu .etape::after { transform: scaleY(1); }
}

/* ==========================================================================
   9. Ce qui est inclus
   ========================================================================== */

.inclus-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.liste-cochee { list-style: none; margin: 0; padding: 0; }
.liste-cochee li {
	display: grid; grid-template-columns: 24px 1fr; gap: .8rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--trait-clair);
	font-size: 1rem;
}
.liste-cochee li:first-child { padding-top: 0; }
.liste-cochee .coche { color: var(--vert); padding-top: 3px; }
.liste-cochee .coche svg { width: 18px; height: 18px; }
.liste-cochee b { display: block; }
.liste-cochee span.detail { display: block; font-size: .9rem; color: var(--gris); }

.encart-tarif {
	padding: 1.6rem 1.7rem 1.75rem;
	background: var(--ink); color: #fff;
	border-radius: var(--rayon-l);
	box-shadow: var(--ombre-forte);
}
.encart-tarif h3 { color: #fff; }
.encart-tarif p { color: rgba(255,255,255,.78); font-size: .95rem; }
.encart-tarif dl {
	display: grid; gap: 0; margin: 1.2rem 0 1.4rem;
	border-top: 1px solid rgba(255,255,255,.16);
}
.encart-tarif dl > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .65rem 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.encart-tarif dt { font-size: .93rem; color: rgba(255,255,255,.72); }
.encart-tarif dd {
	margin: 0; font-weight: 700; font-size: 1.02rem;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 880px) {
	.inclus-grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Questions fréquentes
   ========================================================================== */

.faq { border-top: 1px solid var(--trait); }
.faq details {
	border-bottom: 1px solid var(--trait);
	background: var(--fond);
}
.faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem .2rem;
	font-size: 1.05rem; font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	flex: 0 0 12px; width: 12px; height: 12px;
	border-right: 2px solid var(--bleu);
	border-bottom: 2px solid var(--bleu);
	transform: rotate(45deg);
	transition: transform .18s ease;
	margin-right: 4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .reponse {
	padding: 0 .2rem 1.35rem;
	color: var(--ink-2);
	max-width: 74ch;
}
.faq .reponse p:last-child { margin-bottom: 0; }

/* Le renvoi vers la page complète, sous l'extrait de l'accueil. */
.faq-suite { margin: 1.35rem 0 0; }
.lien-fleche {
	display: inline-flex; align-items: center; gap: .45rem;
	font-weight: 600; color: var(--bleu);
	text-decoration: none;
}
.lien-fleche::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s var(--sortie);
}
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche:hover::after { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
	.lien-fleche::after { transition: none; }
}

/* ==========================================================================
   11. Contact
   ========================================================================== */

.contact-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

.contact-bloc {
	padding: 1.5rem 1.6rem 1.6rem;
	background: var(--fond);
	border: 1px solid var(--trait);
	border-radius: var(--rayon-l);
}
.contact-bloc h3 { font-size: 1.05rem; margin-bottom: .7em; }
.contact-bloc p, .contact-bloc li { font-size: .96rem; color: var(--ink-2); }
.contact-bloc a { font-weight: 600; }

.horaires { list-style: none; margin: 0; padding: 0; }
.horaires li {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--trait-clair);
}
.horaires li:last-child { border-bottom: 0; }
.horaires .jour { color: var(--ink); font-weight: 600; }
.horaires .heure { font-variant-numeric: tabular-nums; }
.horaires .ferme { color: var(--gris); }

/* ==========================================================================
   12. Appel à l'action de bas de page
   ========================================================================== */

.rappel {
	padding: clamp(2.75rem, 5vw, 4rem) 0;
	background: var(--bleu);
	color: #fff;
}
.rappel-grille {
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; flex-wrap: wrap;
}
.rappel h2 { color: #fff; margin-bottom: .3em; }
.rappel p { color: rgba(255,255,255,.86); margin: 0; max-width: 52ch; }
.rappel .bouton-primaire { background: #fff; border-color: #fff; color: var(--bleu-fonce); }
.rappel .bouton-primaire:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rappel-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ==========================================================================
   13. Pied de page
   ========================================================================== */

.pied {
	background: var(--ink);
	color: rgba(255,255,255,.68);
	padding: clamp(2.75rem, 5vw, 4rem) 0 1.75rem;
	font-size: .94rem;
}

.pied-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 2.25rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid rgba(255,255,255,.13);
}

.pied .marque { margin-bottom: 1.1rem; }
.pied p { margin: 0 0 .5em; }
.pied h3 {
	color: #fff; font-size: .78rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase;
	margin-bottom: 1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .55rem; }
.pied a { color: rgba(255,255,255,.82); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }

.pied-bas {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding-top: 1.5rem;
	font-size: .84rem;
	color: rgba(255,255,255,.5);
}
.pied-bas p { margin: 0; }

/* ==========================================================================
   14. Pages intérieures, articles, 404
   ========================================================================== */

.page-tete {
	padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.75rem, 3vw, 2.5rem);
	background: var(--fond-2);
	border-bottom: 1px solid var(--trait);
}
.page-tete h1 { margin-bottom: .25em; }
.page-tete .chapeau { color: var(--ink-2); margin: 0; max-width: 62ch; font-size: 1.06rem; }

.contenu { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.contenu-article > * + * { margin-top: 1.1em; }
.contenu-article h2 { margin-top: 2em; }
.contenu-article h3 { margin-top: 1.6em; }
.contenu-article ul, .contenu-article ol { padding-left: 1.35em; }
.contenu-article li { margin-bottom: .45em; }
.contenu-article blockquote {
	margin: 1.6em 0;
	padding: .3em 0 .3em 1.3em;
	border-left: 3px solid var(--bleu);
	color: var(--ink-2);
	font-size: 1.08rem;
}
.contenu-article img { border-radius: var(--rayon); }
.contenu-article table { border-collapse: collapse; width: 100%; font-size: .96rem; }
.contenu-article th, .contenu-article td {
	text-align: left; padding: .6rem .8rem .6rem 0;
	border-bottom: 1px solid var(--trait);
}
.contenu-article th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.contenu-article code {
	background: var(--bleu-clair); color: var(--bleu-fonce);
	padding: .1em .35em; border-radius: 3px; font-size: .9em;
}
.contenu-article :where(figure) { margin: 1.6em 0; }
.contenu-article :where(figcaption) { font-size: .87rem; color: var(--gris); margin-top: .5em; }

.liste-articles { display: grid; gap: 1.25rem; }
.carte-article {
	padding: 1.4rem 1.5rem 1.5rem;
	background: var(--fond); border: 1px solid var(--trait);
	border-radius: var(--rayon-l);
}
.carte-article h2 { font-size: 1.3rem; margin-bottom: .3em; }
.carte-article h2 a { color: var(--ink); text-decoration: none; }
.carte-article h2 a:hover { color: var(--bleu); }
.carte-article .meta { font-size: .85rem; color: var(--gris); margin-bottom: .7em; }

.pagination { margin-top: 2.5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 .6rem;
	background: var(--fond); border: 1px solid var(--trait);
	border-radius: var(--rayon);
	text-decoration: none; font-weight: 600; font-size: .93rem;
	color: var(--ink-2);
}
.pagination .page-numbers.current { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--bleu); color: var(--bleu); }

.erreur-404 { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.erreur-404 .code {
	font-size: clamp(4rem, 12vw, 7rem); font-weight: 700;
	color: var(--bleu-clair); line-height: 1; margin-bottom: .1em;
	letter-spacing: -.04em;
}
.erreur-404 p { color: var(--ink-2); max-width: 48ch; margin-left: auto; margin-right: auto; }

.formulaire-recherche { display: flex; gap: .5rem; margin: 1.5rem auto 0; max-width: 420px; }
.formulaire-recherche input[type="search"] {
	flex: 1; padding: .68rem .85rem;
	border: 1px solid var(--trait); border-radius: var(--rayon);
	font: inherit; font-size: .96rem; background: var(--fond); color: var(--ink);
}

/* ==========================================================================
   15. Raccords avec l'extension FSLOCATION
   ========================================================================== */

.fsl-bloc { margin-bottom: 0; }

.fsl-bloc .fsl-h2 {
	font-family: var(--police);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	letter-spacing: -.018em;
}

.fsl-bloc .fsl-carte { border-radius: var(--rayon-l); box-shadow: var(--ombre); border-color: var(--trait); }
.fsl-bloc .fsl-carte-visuel { background: var(--bleu-pale); }
.fsl-bloc .fsl-planning-scroll { border-radius: var(--rayon-l); box-shadow: var(--ombre); }
.fsl-bloc .fsl-form { border-radius: var(--rayon-l); background: var(--fond); box-shadow: var(--ombre); }
.fsl-bloc .fsl-btn { border-radius: var(--rayon); font-size: 1rem; padding: .7em 1.3em; }

/* Espacement entre les blocs de l'extension sur la page de location */
.page-location .fsl-bloc + .fsl-bloc { margin-top: clamp(3rem, 6vw, 5rem); }

/* ==========================================================================
   16. Utilitaires
   ========================================================================== */

.centre { text-align: center; }
.centre .section-tete { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.note {
	padding: 1rem 1.2rem;
	background: var(--bleu-clair);
	border-radius: var(--rayon);
	font-size: .95rem;
	color: var(--bleu-fonce);
}

@media print {
	.entete, .pied, .rappel, .bascule-menu { display: none !important; }
	body { font-size: 12pt; }
}

/* ==========================================================================
   Photos de la flotte dans le catalogue de l'extension
   ========================================================================== */

.fsl-photo-flotte {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

/* ==========================================================================
   14. Bande de repères
   ========================================================================== */

.reperes {
	border-block: 1px solid var(--trait);
	background: #fff;
}

.reperes-grille {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 860px) {
	.reperes-grille { grid-template-columns: repeat(4, 1fr); }
}

.repere {
	padding: 2rem 1rem;
	text-align: center;
	border-right: 1px solid var(--trait);
	border-bottom: 1px solid var(--trait);
}

.repere:nth-child(2n) { border-right: 0; }
.repere:nth-last-child(-n+2) { border-bottom: 0; }

@media (min-width: 860px) {
	.repere { border-right: 1px solid var(--trait); border-bottom: 0; }
	.repere:nth-child(2n) { border-right: 1px solid var(--trait); }
	.repere:last-child { border-right: 0; }
}

.repere b {
	display: block;
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
	line-height: 1;
	letter-spacing: -.03em;
}

.repere span {
	display: block;
	margin-top: .5rem;
	font-size: .88rem;
	color: var(--ink-2);
}

/* ==========================================================================
   15. Appel final
   ========================================================================== */

.appel {
	background: var(--bleu-fonce);
	color: #fff;
}

.appel-contenu {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.appel h2 { color: #fff; }

.appel p {
	color: #CFE3F3;
	font-size: 1.08rem;
}

.appel-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 2rem;
}

.appel .bouton-primaire {
	background: #fff;
	color: var(--bleu-fonce);
	border-color: #fff;
}

.appel .bouton-primaire:hover,
.appel .bouton-primaire:focus { background: var(--bleu-clair); color: var(--bleu-fonce); }

.appel .bouton-secondaire {
	background: transparent;
	color: #fff;
	border-color: rgb(255 255 255 / .45);
}

.appel .bouton-secondaire:hover,
.appel .bouton-secondaire:focus {
	background: rgb(255 255 255 / .1);
	color: #fff;
	border-color: #fff;
}

.appel-mention {
	margin: 1.5rem 0 0;
	font-size: .86rem;
	color: #AFD0EA;
}

/* ==========================================================================
   16. Mouvement
   Transform et opacité seulement : tout le reste provoque un recalcul
   de mise en page et saccade sur un téléphone.

   L'état masqué n'est armé que sous .js-anim, posée par l'en-tête
   uniquement si le script peut tourner et que le visiteur n'a pas
   demandé un mouvement réduit. Sans cela, rien n'est jamais caché.
   ========================================================================== */

/*
 * La révélation de section est un réglage d'arrivée, pas un effet : si
 * chaque section entre de la même façon, le site n'a pas un moment
 * animé, il en a quinze, et plus aucun ne se remarque. D'où une course
 * courte — 10 px — et la même décélération que partout ailleurs.
 */
.js-anim .apparait {
	opacity: 0;
	transform: translateY(10px);
}

.apparait.vu {
	opacity: 1;
	transform: none;
	transition: opacity 420ms var(--sortie),
	            transform 420ms var(--sortie);
}

.apparait.vu[data-delai="1"] { transition-delay: 70ms; }
.apparait.vu[data-delai="2"] { transition-delay: 140ms; }
.apparait.vu[data-delai="3"] { transition-delay: 210ms; }

/* Le visuel du bandeau est l'élément LCP : il n'attend jamais le script. */
.bandeau-visuel { animation: fslt-entree 620ms var(--sortie) both; }

@keyframes fslt-entree {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
}

/* Survol des cartes : indique qu'elles sont cliquables. */
.fsl-carte,
.inclus-carte {
	transition: transform 200ms cubic-bezier(.2, 0, 0, 1),
	            box-shadow 200ms cubic-bezier(.2, 0, 0, 1),
	            border-color 200ms cubic-bezier(.2, 0, 0, 1);
}

.fsl-carte:hover,
.inclus-carte:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 48px rgb(20 36 58 / .13);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js-anim .apparait { opacity: 1; transform: none; }
	.bandeau-visuel { animation: none; }
	.fsl-carte:hover,
	.inclus-carte:hover { transform: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Contrastes forcés : les fonds décoratifs disparaissent, les traits restent. */
@media (forced-colors: active) {
	.fsl-carte,
	.inclus-carte,
	.repere { border: 1px solid CanvasText; }
	.bouton { border: 1px solid ButtonText; }
}

/* ==========================================================================
   17. Grain
   Un aplat parfaitement lisse sonne synthétique à l'écran. Quelques
   pour-cent de bruit suffisent à lui donner de la matière, pour le prix
   d'un SVG en ligne — aucune image à charger.
   ========================================================================== */

.bandeau,
.appel { position: relative; overflow: hidden; }

.bandeau::after,
.appel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.appel::after { mix-blend-mode: overlay; opacity: .35; }
.appel > *,
.bandeau > * { position: relative; z-index: 1; }

@media (forced-colors: active) {
	.bandeau::after, .appel::after { display: none; }
}

/* ==========================================================================
   18. Direction « Contraste » — héros sombre, corps clair

   La flotte est noire et blanche, le site était bleu clair : deux univers
   sans rapport. Le héros reprend la vraie charte des véhicules — anthracite,
   typo blanche, bleu en accent — et le reste de la page redevient clair
   pour la lisibilité du catalogue et du planning.

   Ce n'est pas une section sombre posée au hasard au milieu d'une page
   claire : le sombre ouvre la page, le clair la déroule, le sombre la
   referme avec le pied. La bascule est structurelle, pas décorative.
   ========================================================================== */

:root {
	--nuit:        #141C24;
	--nuit-2:      #1C262F;
	--nuit-trait:  #2C3844;
	--sur-nuit:    #F2F6F9;
	--sur-nuit-2:  #A9B8C6;
	--bleu-vif:    #3D9BE0;   /* 6,09:1 sur --nuit : lisible en texte normal */
}

.bandeau-sombre {
	position: relative;
	overflow: hidden;
	background: var(--nuit);
	color: var(--sur-nuit);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
}

/* Halo froid derrière le véhicule, plus une trame fine : un aplat noir
   parfaitement lisse paraît synthétique sur grand écran. */
.bandeau-sombre::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 110% at 72% 18%, rgba(61, 155, 224, .20) 0%, transparent 60%),
		radial-gradient(60% 80% at 10% 100%, rgba(61, 155, 224, .08) 0%, transparent 70%);
	pointer-events: none;
}

.bandeau-sombre::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .55;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.bandeau-sombre > * { position: relative; z-index: 1; }

.bandeau-sombre .surtitre { color: var(--bleu-vif); }
.bandeau-sombre h1 { color: var(--sur-nuit); }
.bandeau-sombre h1 .accent { color: var(--bleu-vif); }
.bandeau-sombre .bandeau-chapeau { color: var(--sur-nuit-2); }

.bandeau-sombre .bandeau-arguments li {
	background: rgba(255, 255, 255, .06);
	border-color: var(--nuit-trait);
	color: var(--sur-nuit);
}

.bandeau-sombre .bandeau-arguments li::before { background: var(--bleu-vif); }

.bandeau-sombre .bouton-secondaire {
	background: transparent;
	color: var(--sur-nuit);
	border-color: rgba(255, 255, 255, .55);   /* 3,52:1 sur --nuit */
}

.bandeau-sombre .bouton-secondaire:hover,
.bandeau-sombre .bouton-secondaire:focus {
	background: rgba(255, 255, 255, .1);
	border-color: #FFF;
	color: #FFF;
}

/* Le véhicule chevauche le titre : c'est ce débord qui fait la
   profondeur. Réservé aux grandes largeurs, où la place existe. */
.bandeau-sombre .bandeau-visuel { margin-bottom: -4%; }

@media (min-width: 1100px) {
	.bandeau-sombre .bandeau-visuel {
		width: 122%;
		max-width: none;
		margin-inline-start: -10%;
		margin-inline-end: -12%;
		margin-bottom: -7%;
	}
}

/* Le fourgon déborde : il ne doit pas pousser la grille ni créer de
   défilement horizontal, d'où overflow:hidden sur la section. */
.bandeau-sombre .bandeau-grille { align-items: center; }

/* La planche des gabarits, en négatif */
.bandeau-sombre .bandeau-gamme { border-top-color: var(--nuit-trait); }
.bandeau-sombre .bandeau-gamme img { filter: brightness(0) invert(1); opacity: .34; }
.bandeau-sombre .bandeau-baseline { color: var(--sur-nuit-2); }

/* Les repères se posent sur le sombre, sans rupture de fond */
.reperes-sombre {
	background: var(--nuit-2);
	border-block-color: var(--nuit-trait);
	color: var(--sur-nuit);
}

.reperes-sombre .repere { border-color: var(--nuit-trait); }
.reperes-sombre .repere span { color: var(--sur-nuit-2); }

@media (forced-colors: active) {
	.bandeau-sombre::before,
	.bandeau-sombre::after { display: none; }
}

/* ==========================================================================
   19. Pages intérieures — en-tête, fil d'Ariane, tableaux
   ========================================================================== */

.tete-page {
	padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.25rem, 5vw, 4rem);
}

.tete-page h1 { margin-bottom: .4em; max-width: 20ch; }
.tete-page .bandeau-chapeau { max-width: 62ch; margin-bottom: 0; }

/* Fil d'Ariane */
.fil-ariane { margin-bottom: 1.25rem; }

.fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
}

.fil-ariane li { display: inline-flex; align-items: center; gap: .6rem; }

.fil-ariane li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .65;
}

.fil-ariane a { color: inherit; text-decoration: none; opacity: .8; }
.fil-ariane a:hover,
.fil-ariane a:focus-visible { opacity: 1; text-decoration: underline; }
.fil-ariane [aria-current="page"] { font-weight: 650; }

.bandeau-sombre .fil-ariane { color: var(--sur-nuit-2); }
.bandeau-sombre .fil-ariane [aria-current="page"] { color: var(--sur-nuit); }

/* Un tableau large ne doit jamais pousser la page : il défile seul,
   avec une barre visible et un repère au clavier. */
.tableau-defilant {
	overflow-x: auto;
	border: 1px solid var(--trait);
	border-radius: var(--rayon-l);
	background: #fff;
}

.tableau-defilant:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.grille-tarifs {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.grille-tarifs th,
.grille-tarifs td {
	padding: .9rem 1rem;
	text-align: right;
	border-bottom: 1px solid var(--trait-clair);
}

.grille-tarifs thead th {
	position: sticky;
	top: 0;
	background: var(--fond-2);
	font-size: .76rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-2);
	border-bottom: 2px solid var(--trait);
}

.grille-tarifs th:first-child,
.grille-tarifs thead th:first-child { text-align: left; }

.grille-tarifs tbody th {
	font-weight: 650;
	white-space: nowrap;
}

.grille-tarifs tbody th a { color: inherit; text-decoration: none; }
.grille-tarifs tbody th a:hover { color: var(--bleu); text-decoration: underline; }
.grille-tarifs tbody tr:last-child th,
.grille-tarifs tbody tr:last-child td { border-bottom: 0; }

.reperes-tarifs {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin-top: 2rem;
}

.reperes-tarifs > div {
	padding: 1.25rem 1.5rem;
	background: var(--fond-2);
	border: 1px solid var(--trait);
	border-radius: var(--rayon-l);
}

.reperes-tarifs b {
	display: block;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: -.03em;
}

.reperes-tarifs span {
	display: block;
	margin-top: .4rem;
	font-size: .9rem;
	color: var(--ink-2);
}

/* ==========================================================================
   20. Prix hors TVA / TVA comprise, et boîte à suggestions
   ========================================================================== */

/* Le balisage des prix vient de l'extension (FSL_Prix) pour que le site et
   les fiches véhicules n'aient qu'une seule façon d'écrire un montant. Le
   thème ne fait que l'aligner dans ses propres contextes. */

.grille-tarifs .fsl-prix,
.encart-tarif .fsl-prix {
	align-items: flex-end;
}

.encart-tarif .fsl-prix-htva { color: inherit; }
.encart-tarif .fsl-prix-ttc { color: rgba(255, 255, 255, .72); }

.cellule-km {
	display: block;
	margin-top: .2rem;
	font-size: .74rem;
	font-weight: 400;
	color: var(--bleu-fonce);
	white-space: nowrap;
}

.detail-caution {
	display: block;
	font-size: .74rem;
	font-weight: 400;
	opacity: .78;
}

/* ---------- Boîte à suggestions ---------- */

.formulaire-suggestion { margin-top: 2rem; }

.formulaire-suggestion .champ { margin: 0 0 1.25rem; }

.formulaire-suggestion label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
}

.formulaire-suggestion .facultatif,
.formulaire-suggestion .requis {
	font-weight: 400;
	color: var(--gris);
}

.formulaire-suggestion input[type="text"],
.formulaire-suggestion input[type="email"],
.formulaire-suggestion textarea {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	color: var(--ink);
	background: var(--fond);
	border: 1px solid var(--trait);
	border-radius: 8px;
}

.formulaire-suggestion textarea { resize: vertical; min-height: 9rem; }

.formulaire-suggestion input:focus-visible,
.formulaire-suggestion textarea:focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 1px;
	border-color: var(--bleu);
}

.champs-paire {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

@media (max-width: 560px) {
	.champs-paire { grid-template-columns: 1fr; }
}

/* Le piège à robots : hors écran, jamais display:none — un champ masqué
   de cette façon reste rempli par les robots et ignoré par les humains. */
.champ-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mention-rgpd {
	margin: 0 0 1.5rem;
	font-size: .88rem;
	color: var(--ink-2);
}

.avis {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	border-radius: 10px;
	border-left: 4px solid;
	font-size: .96rem;
}

.avis-succes {
	background: #EDF7F0;
	border-color: #2E7D4F;
	color: #1C4F32;
}

.avis-erreur {
	background: #FCEFEF;
	border-color: #B3261E;
	color: #7A1A15;
}

@media (forced-colors: active) {
	.avis { border: 1px solid CanvasText; }
}

/* ==========================================================================
   21. Les surfaces dessinées par le navigateur
   ==========================================================================

   La sélection de texte, le curseur de saisie, l'ascenseur, l'anneau de
   focus, le soulignement des liens : tout cela s'affiche avec les valeurs
   par défaut du navigateur, qui n'appartiennent à aucune charte. Les
   habiller coûte vingt lignes et c'est le signe le plus net qu'une page a
   été dessinée plutôt qu'assemblée.
   ========================================================================== */

::selection {
	background: var(--bleu);
	color: #fff;
}

/* Sur fond sombre, la sélection s'inverse pour rester lisible. */
.bandeau-sombre ::selection,
.pied ::selection,
.rappel ::selection {
	background: #fff;
	color: var(--ink);
}

:root {
	/* L'ascenseur suit la palette au lieu du gris système. */
	scrollbar-color: var(--gris) transparent;
	scrollbar-width: thin;
	/* Cases à cocher, boutons radio, curseurs, barres de progression. */
	accent-color: var(--bleu);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--trait);
	border: 3px solid var(--fond);
	border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gris); }

input, textarea, select { caret-color: var(--bleu); }

/* Un soulignement qui passe sous les jambages au lieu de les barrer. */
.contenu-article a:not([class]),
.pied a:not([class]),
p a:not([class]) {
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

/* Un seul anneau de focus pour tout le site, visible sur clair et sombre. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 2px;
	border-radius: 4px;
}

.bandeau-sombre :focus-visible,
.pied :focus-visible,
.rappel :focus-visible {
	outline-color: #fff;
}

/* Un en-tête collant ne doit jamais recouvrir l'élément qui vient de
   recevoir le focus — WCAG 2.2, critère 2.4.11. */
:target,
:focus-visible {
	scroll-margin-top: calc(var(--entete-h) + 1rem);
}

/* Les chiffres d'un même tableau doivent s'aligner en colonne. */
table, .reperes, .grille-tarifs, .encart-tarif { font-variant-numeric: tabular-nums; }

/* Contraste — la signature du bandeau sombre.
   « Votre mobilité en toute confiance » s'affichait en --bleu (#1270B8)
   sur le fond nuit : 3,3:1, sous le seuil de 4,5:1 exigé à cette taille.
   Le bandeau sombre a déjà son bleu clair, --bleu-vif : 6,2:1. */
.bandeau-sombre .bandeau-signature { color: var(--bleu-vif); }