/*
 * FSLOCATION — feuille de style
 * Charte reprise du logo FS Concept : bleu #1270B8, anthracite #232F38.
 * Volontairement peu spécifique pour cohabiter avec n'importe quel thème.
 */

.fsl-bloc {
	--fsl-bleu: #1270B8;
	--fsl-bleu-fonce: #0E5B96;
	--fsl-bleu-clair: #E8F1F8;
	--fsl-ink: #232F38;
	--fsl-ink-2: #4A5761;
	--fsl-gris: #5B6B7F;   /* 5,45:1 sur blanc — l'ancien var(--fsl-gris) était à 3,68:1 */
	--fsl-trait: #DCE3E8;
	--fsl-trait-clair: #EDF1F4;
	--fsl-fond: #FFFFFF;
	--fsl-fond-2: #F7F9FB;
	--fsl-ambre: #C77E12;
	--fsl-ambre-clair: #FBF0DC;
	--fsl-vert: #2E7D57;
	--fsl-rouge: #B3261E;
	--fsl-rayon: 8px;

	box-sizing: border-box;
	margin: 0 0 3.5rem;
	color: var(--fsl-ink);
	font-size: 16px;
	line-height: 1.55;
}

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

.fsl-h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--fsl-ink);
}

.fsl-intro {
	margin: -0.6rem 0 1.5rem;
	color: var(--fsl-ink-2);
	max-width: 60ch;
}

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

/* ---------- Boutons ---------- */

.fsl-bloc .fsl-btn {
	display: inline-block;
	padding: 0.6em 1.15em;
	border: 1px solid transparent;
	border-radius: var(--fsl-rayon);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fsl-bloc .fsl-btn-primaire {
	background: var(--fsl-bleu);
	border-color: var(--fsl-bleu);
	color: #fff;
}

.fsl-bloc .fsl-btn-primaire:hover,
.fsl-bloc .fsl-btn-primaire:focus {
	background: var(--fsl-bleu-fonce);
	border-color: var(--fsl-bleu-fonce);
	color: #fff;
}

.fsl-bloc .fsl-btn-ghost {
	background: transparent;
	border-color: var(--fsl-trait);
	color: var(--fsl-bleu);
}

.fsl-bloc .fsl-btn-ghost:hover,
.fsl-bloc .fsl-btn-ghost:focus {
	background: var(--fsl-bleu-clair);
	border-color: var(--fsl-bleu);
}

.fsl-bloc .fsl-btn-nav {
	background: var(--fsl-fond);
	border-color: var(--fsl-trait);
	color: var(--fsl-ink-2);
	font-size: 0.85rem;
	padding: 0.45em 0.85em;
}

.fsl-bloc .fsl-btn-nav:hover,
.fsl-bloc .fsl-btn-nav:focus {
	border-color: var(--fsl-bleu);
	color: var(--fsl-bleu);
}

.fsl-bloc a:focus-visible,
.fsl-bloc button:focus-visible,
.fsl-bloc select:focus-visible,
.fsl-bloc input:focus-visible,
.fsl-bloc textarea:focus-visible {
	outline: 2px solid var(--fsl-bleu);
	outline-offset: 2px;
}

/* ---------- Catalogue ---------- */

.fsl-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: 1.5rem;
}

.fsl-carte {
	display: flex;
	flex-direction: column;
	background: var(--fsl-fond);
	border: 1px solid var(--fsl-trait);
	border-radius: var(--fsl-rayon);
	overflow: hidden;
}

.fsl-carte-visuel {
	position: relative;
	background: var(--fsl-fond-2);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fsl-carte-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fsl-carte-placeholder {
	width: 62%;
	color: var(--fsl-bleu);
}

.fsl-carte-placeholder svg {
	width: 100%;
	height: auto;
	display: block;
}

.fsl-badge-volume {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--fsl-bleu);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.25em 0.6em;
	border-radius: 4px;
}

.fsl-carte-corps {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.15rem 1.25rem 1.25rem;
	flex: 1;
}

.fsl-carte-titre {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	font-weight: 700;
}

.fsl-carte-titre a {
	color: var(--fsl-ink);
	text-decoration: none;
}

.fsl-carte-titre a:hover {
	color: var(--fsl-bleu);
}

.fsl-carte-desc {
	margin: 0;
	font-size: 0.92rem;
	color: var(--fsl-ink-2);
}

.fsl-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0.85rem 0 0;
	border-top: 1px solid var(--fsl-trait-clair);
}

.fsl-specs div {
	margin: 0;
}

.fsl-specs dt {
	margin: 0;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fsl-gris);
}

.fsl-specs dd {
	margin: 0.1rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.fsl-carte-pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fsl-trait-clair);
}

/* ---------- Prix : hors TVA en évidence, TTC en dessous ----------
   Le montant HTVA est le prix de référence du client professionnel ; le
   TTC reste lisible pour le particulier. Un seul balisage partout, pour
   que deux pages ne puissent pas présenter le même prix autrement. */

.fsl-prix {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.fsl-prix-htva {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--fsl-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fsl-prix-ttc {
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--fsl-gris, #5B6B7F);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fsl-carte-prix {
	margin: 0;
	flex: 1 1 auto;
}

.fsl-carte-prix .fsl-prix-htva {
	font-size: 1.15rem;
}

.fsl-carte-pied .fsl-btn {
	flex: 0 0 auto;
}

.fsl-prix-unite {
	display: block;
	font-size: 0.78rem;
	color: var(--fsl-gris, #5B6B7F);
}

.fsl-tarif-km {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.76rem;
	font-weight: 400;
	color: var(--fsl-bleu-fonce);
}

/* ---------- Arrivage : véhicule louable, pas encore lettré ----------
   La photo est volontairement floue tant que le véhicule n'est pas aux
   couleurs de FS. Sans l'étiquette qui l'explique, le visiteur croirait
   à une image ratée ; avec elle, c'est une information. */

.fsl-badge-arrivage {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	margin: 0;
	background: #1F2A33;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.3em 0.65em;
	border-radius: 4px;
	max-width: 60%;
	z-index: 2;
}

.fsl-visuel-arrivage {
	position: relative;
}

.fsl-note-arrivage {
	margin: 0.6rem 0 0;
	font-size: 0.84rem;
}

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

/* ---------- Planning ---------- */

.fsl-planning-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}

.fsl-planning-tete .fsl-h2 {
	margin: 0;
}

.fsl-nav {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.fsl-legende {
	display: flex;
	align-items: center;
	gap: 0.4rem 1.15rem;
	flex-wrap: wrap;
	margin: 0 0 0.9rem;
	font-size: 0.83rem;
	color: var(--fsl-ink-2);
}

.fsl-puce {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 3px;
	vertical-align: -3px;
	margin-right: 0.15rem;
	border: 1px solid var(--fsl-trait);
}

.fsl-puce-libre { background: var(--fsl-fond); }
.fsl-puce-confirmee { background: var(--fsl-bleu); border-color: var(--fsl-bleu); }
.fsl-puce-demande {
	background: var(--fsl-ambre-clair);
	border-color: var(--fsl-ambre);
	background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(199, 126, 18, 0.55) 3px 6px);
}
.fsl-puce-indispo {
	background: #E7EBEE;
	border-color: var(--fsl-gris);
	background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(122, 135, 146, 0.55) 3px 6px);
}

.fsl-planning-scroll {
	overflow-x: auto;
	border: 1px solid var(--fsl-trait);
	border-radius: var(--fsl-rayon);
	background: var(--fsl-fond);
	-webkit-overflow-scrolling: touch;
}

.fsl-bloc .fsl-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 720px;
	margin: 0;
	font-size: 0.85rem;
	table-layout: fixed;
}

.fsl-bloc .fsl-table th,
.fsl-bloc .fsl-table td {
	border: 0;
	padding: 0;
}

.fsl-col-vehicule {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 190px;
	min-width: 190px;
	background: var(--fsl-fond);
	text-align: left;
	padding: 0.55rem 0.75rem !important;
	border-right: 1px solid var(--fsl-trait) !important;
	border-bottom: 1px solid var(--fsl-trait-clair) !important;
	font-weight: 600;
	vertical-align: middle;
}

thead .fsl-col-vehicule {
	z-index: 3;
	border-bottom: 1px solid var(--fsl-trait) !important;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fsl-gris);
	font-weight: 600;
}

.fsl-veh-nom {
	display: block;
	line-height: 1.25;
	color: var(--fsl-ink);
}

.fsl-veh-immat {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--fsl-gris);
	font-variant-numeric: tabular-nums;
}

.fsl-col-jour {
	width: 30px;
	min-width: 30px;
	padding: 0.4rem 0 0.45rem !important;
	text-align: center;
	background: var(--fsl-fond);
	border-bottom: 1px solid var(--fsl-trait) !important;
	border-left: 1px solid var(--fsl-trait-clair) !important;
	font-weight: 500;
	line-height: 1.15;
}

.fsl-col-jour.fsl-debut-mois,
.fsl-case.fsl-debut-mois {
	border-left: 1px solid var(--fsl-gris) !important;
}

.fsl-dow {
	display: block;
	font-size: 0.62rem;
	text-transform: uppercase;
	color: var(--fsl-gris);
	letter-spacing: 0.04em;
}

.fsl-dom {
	display: block;
	font-size: 0.8rem;
	color: var(--fsl-ink-2);
	font-variant-numeric: tabular-nums;
}

.fsl-mois {
	display: block;
	font-size: 0.58rem;
	color: var(--fsl-bleu);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.fsl-col-jour.fsl-we,
.fsl-case.fsl-we {
	background: var(--fsl-fond-2);
}

.fsl-col-jour.fsl-auj {
	background: var(--fsl-bleu-clair);
}

.fsl-col-jour.fsl-auj .fsl-dom {
	color: var(--fsl-bleu);
	font-weight: 700;
}

.fsl-case {
	height: 38px;
	border-bottom: 1px solid var(--fsl-trait-clair) !important;
	border-left: 1px solid var(--fsl-trait-clair) !important;
	background: var(--fsl-fond);
	position: relative;
}

.fsl-case.fsl-auj::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 2px 0 0 var(--fsl-bleu);
	pointer-events: none;
}

.fsl-case-confirmee,
.fsl-case-en_cours {
	background: var(--fsl-bleu) !important;
}

.fsl-case-en_cours {
	background: var(--fsl-bleu-fonce) !important;
}

.fsl-case-demande {
	background: var(--fsl-ambre-clair) !important;
	background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(199, 126, 18, 0.5) 4px 8px) !important;
}

.fsl-case-indispo {
	background: #E7EBEE !important;
	background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(122, 135, 146, 0.5) 4px 8px) !important;
}

.fsl-case.fsl-premier {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-left: 2px;
}

.fsl-case.fsl-dernier {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* ---------- Messages ---------- */

.fsl-message {
	margin: 0 0 1.75rem;
	padding: 0.95rem 1.15rem;
	border-radius: var(--fsl-rayon);
	border: 1px solid;
	font-size: 0.95rem;
	line-height: 1.5;
}

.fsl-message-succes {
	background: #EAF5EF;
	border-color: #A8CEBB;
	color: #1E5C3E;
}

.fsl-message-erreur {
	background: #FBEDEC;
	border-color: #E0AFAB;
	color: #8C1E18;
}

/* ---------- Formulaire ---------- */

.fsl-form {
	background: var(--fsl-fond-2);
	border: 1px solid var(--fsl-trait);
	border-radius: var(--fsl-rayon);
	padding: 1.5rem;
}

.fsl-leurre {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fsl-form-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem 1.25rem;
}

.fsl-champ {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.fsl-champ-large {
	grid-column: 1 / -1;
}

.fsl-champ label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--fsl-ink-2);
}

.fsl-req {
	color: var(--fsl-bleu);
}

.fsl-bloc .fsl-champ input,
.fsl-bloc .fsl-champ select,
.fsl-bloc .fsl-champ textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--fsl-trait);
	border-radius: 6px;
	background: var(--fsl-fond);
	color: var(--fsl-ink);
	font-size: 0.95rem;
	font-family: inherit;
	line-height: 1.4;
}

.fsl-bloc .fsl-champ textarea {
	resize: vertical;
	min-height: 74px;
}

.fsl-form-pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.35rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--fsl-trait);
}

.fsl-mention {
	margin: 0;
	font-size: 0.8rem;
	color: var(--fsl-gris);
	max-width: 46ch;
}

.fsl-vide {
	padding: 1.5rem;
	background: #F7F9FB;
	border: 1px dashed #DCE3E8;
	border-radius: 8px;
	color: var(--fsl-gris);
}

/* ---------- Fiche véhicule ---------- */

.fsl-fiche-tete {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 780px) {
	.fsl-fiche-tete {
		grid-template-columns: 1fr;
	}
}

.fsl-fiche-visuel {
	background: var(--fsl-fond-2);
	border: 1px solid var(--fsl-trait);
	border-radius: var(--fsl-rayon);
	overflow: hidden;
	aspect-ratio: 16 / 11;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fsl-fiche-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fsl-fiche-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0;
	margin: 1.5rem 0 0;
	border-top: 2px solid var(--fsl-ink);
	border-bottom: 1px solid var(--fsl-trait);
}

.fsl-fiche-specs div {
	padding: 0.7rem 0.9rem 0.75rem;
	border-right: 1px solid var(--fsl-trait-clair);
}

.fsl-fiche-specs div:last-child {
	border-right: 0;
}

.fsl-fiche-specs dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fsl-gris);
	margin: 0 0 0.2rem;
}

.fsl-fiche-specs dd {
	margin: 0;
	font-weight: 700;
	font-size: 1.02rem;
	font-variant-numeric: tabular-nums;
}

.fsl-tarifs {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 1.25rem 0 0;
	padding: 1.1rem 1.25rem;
	background: var(--fsl-bleu-clair);
	border-radius: var(--fsl-rayon);
}

.fsl-tarifs div {
	min-width: 90px;
}

.fsl-tarifs dt {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fsl-bleu-fonce);
	margin: 0 0 0.15rem;
}

.fsl-tarifs dd {
	margin: 0;
	color: var(--fsl-ink);
	font-variant-numeric: tabular-nums;
}

.fsl-tarifs div {
	min-width: 110px;
}

/* ---------- En-tête de page ---------- */

.fsl-page-tete {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0 0 2rem;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid #DCE3E8;
}

.fsl-page-logo {
	/* Le logo réel est plus large que l'ancien sigle : on règle la hauteur
	   et on laisse la largeur suivre, sans dépasser le bord sur mobile. */
	height: 46px;
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.fsl-page-logo { height: 36px; }
}

.fsl-page-accroche {
	margin: 0;
	font-size: 1.05rem;
	color: #4A5761;
	max-width: 52ch;
}

/* ---------- Administration ---------- */

.fsl-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.75rem 1.25rem;
}

.fsl-meta-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.fsl-meta-field input,
.fsl-meta-field select {
	width: 100%;
}

.fsl-suffix {
	font-size: 0.78rem;
	color: var(--fsl-gris);
}

.fsl-admin-nav {
	margin: 1rem 0 1.25rem;
}

.fsl-admin-encart {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem 1.5rem;
	background: #fff;
	border: 1px solid #DCE3E8;
	border-radius: 8px;
}

.fsl-admin-encart h2 {
	margin-top: 0;
}

.fsl-admin-form {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.fsl-admin-form label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: #4A5761;
	margin-bottom: 0.2rem;
}

.fsl-compteur {
	display: inline-block;
	min-width: 22px;
	padding: 0 6px;
	background: #1270B8;
	color: #fff;
	border-radius: 11px;
	font-size: 0.75rem;
	line-height: 20px;
	text-align: center;
	vertical-align: 2px;
}

.fsl-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.fsl-tag-demande { background: #FBF0DC; color: #8A5A0D; }
.fsl-tag-confirmee { background: #E8F1F8; color: #0E5B96; }
.fsl-tag-en_cours { background: #1270B8; color: #fff; }
.fsl-tag-cloturee { background: #EAF5EF; color: #1E5C3E; }
.fsl-tag-refusee,
.fsl-tag-annulee { background: #EEF1F3; color: #6B7A87; }

.fsl-nb-jours {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.72rem;
	color: var(--fsl-gris);
}

.fsl-msg-client {
	font-size: 0.82rem;
	color: var(--fsl-gris);
	font-style: italic;
}

.fsl-rien {
	color: var(--fsl-gris);
}

/* ==========================================================================
   Espace client : liste des locations et accès aux rapports signés.
   ========================================================================== */

.fsl-bloc .fsl-espace-tete {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.fsl-bloc .fsl-espace-tete .fsl-h2 {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Les locations du client : trois sections, pas une grille de pavés

   Le client ne cherche pas « ses locations » : il cherche où en est sa
   demande, ou le véhicule qu'il doit aller chercher, ou un ancien état des
   lieux. Des lignes groupées se parcourent du regard ; des cartes de même
   taille obligent à tout lire.
   -------------------------------------------------------------------------- */

.fsl-bloc .fsl-groupe + .fsl-groupe {
	margin-top: 34px;
}

.fsl-bloc .fsl-groupe-titre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 2px;
	font-size: 17px;
	line-height: 1.3;
}

/* Le compte évite d'avoir à dénombrer les lignes soi-même. */
.fsl-bloc .fsl-groupe-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: #EEF4FA;
	color: #1270B8;
	font-size: 12px;
	font-weight: 700;
}

.fsl-bloc .fsl-groupe-resume {
	margin: 0 0 14px;
	color: var(--fsl-gris);
	font-size: 14px;
}

.fsl-bloc .fsl-locs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ECF1F5;
}

.fsl-bloc .fsl-loc {
	padding: 14px 2px;
	border-bottom: 1px solid #ECF1F5;
}

.fsl-bloc .fsl-loc-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.fsl-bloc .fsl-loc-vehicule {
	margin: 0;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

/* L'étiquette d'état ne doit jamais passer à la ligne toute seule. */
.fsl-bloc .fsl-loc-tete .fsl-tag {
	flex: 0 0 auto;
}

.fsl-bloc .fsl-loc-quand {
	margin: 4px 0 0;
	color: var(--fsl-gris);
	font-size: 14px;
}

.fsl-bloc .fsl-loc-quand .fsl-prix {
	display: inline;
}

.fsl-bloc .fsl-loc-quand .fsl-prix-htva {
	font-size: 14px;
	color: inherit;
}

.fsl-bloc .fsl-loc-quand .fsl-prix-ttc {
	display: inline;
	margin-left: 4px;
}

.fsl-bloc .fsl-loc-sep {
	margin: 0 6px;
	color: #B9C6D2;
}

.fsl-bloc .fsl-loc-mot {
	margin: 6px 0 0;
	font-size: 14px;
	max-width: 70ch;
}

.fsl-bloc .fsl-loc-liens {
	margin: 8px 0 0;
	font-size: 14px;
}

@media (max-width: 560px) {
	.fsl-bloc .fsl-loc-tete {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}


/* ==========================================================================
   Planning — distinction des états sans recours à la couleur seule

   Quatre états codés par quatre teintes claires, c'est quatre cases
   identiques pour un daltonien et sur un écran mal calibré. Chaque état
   porte désormais une trame de forme différente et un glyphe lisible.
   ========================================================================== */

.fsl-case {
	position: relative;
}

.fsl-case::after {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--fsl-ink, #232F38);
}

.fsl-case-demande {
	background: repeating-linear-gradient(45deg,
		rgba(199, 126, 18, .22) 0 5px, #FFF 5px 10px);
	border: 1px solid rgba(199, 126, 18, .85);
}
.fsl-case-demande::after { content: "?"; color: #8A5608; }

.fsl-case-indispo {
	background: repeating-linear-gradient(-45deg,
		rgba(91, 107, 127, .26) 0 5px, #FFF 5px 10px);
	border: 1px solid rgba(91, 107, 127, .85);
}
.fsl-case-indispo::after { content: "\00D7"; color: #3F4D5C; }

.fsl-case-confirmee::after,
.fsl-case-en::after { content: "\2022"; color: #FFF; }

.fsl-puce-demande {
	background: repeating-linear-gradient(45deg,
		rgba(199, 126, 18, .22) 0 4px, #FFF 4px 8px);
	border: 1px solid rgba(199, 126, 18, .85);
}

.fsl-puce-indispo {
	background: repeating-linear-gradient(-45deg,
		rgba(91, 107, 127, .26) 0 4px, #FFF 4px 8px);
	border: 1px solid rgba(91, 107, 127, .85);
}

/* La pastille « libre » était blanche sur blanc, bordure à 1,30:1. */
.fsl-puce-libre {
	background: #FFF;
	border: 1px solid var(--fsl-gris);
}

/* Contrastes forcés : le planning était le seul composant non couvert. */
@media (forced-colors: active) {
	.fsl-case { border: 1px solid CanvasText; }
	.fsl-case::after { color: CanvasText; forced-color-adjust: none; }
}

/* ==========================================================================
   Planning sur téléphone

   À 320 px, la colonne véhicule figée mangeait 190 px des 270 visibles :
   il restait 80 px, soit 2,6 jours sur 28. Le composant central du site
   ne remplissait plus sa fonction.
   ========================================================================== */

@media (max-width: 700px) {
	.fsl-planning-scroll table { min-width: 0; }

	.fsl-col-vehicule {
		width: 104px;
		min-width: 104px;
		max-width: 104px;
	}

	.fsl-veh-nom {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .82rem;
	}

	.fsl-veh-immat { display: none; }

	.fsl-col-jour { width: 22px; min-width: 22px; }
	.fsl-dow { font-size: .72rem; }
	.fsl-dom { font-size: .78rem; }
	.fsl-case::after { font-size: 9px; }
}

/* ==========================================================================
   Erreurs de formulaire par champ

   Un bandeau générique en haut de page ne dit pas QUEL champ est fautif.
   WCAG 3.3.1 demande que l'élément en erreur soit identifié.
   ========================================================================== */

.fsl-bloc .fsl-erreur-champ {
	display: block;
	margin-top: 6px;
	font-size: .86rem;
	font-weight: 600;
	color: #B3261E;
}

.fsl-bloc .fsl-erreur-champ::before {
	content: "\26A0";
	margin-right: 6px;
	font-weight: 700;
}

.fsl-bloc [aria-invalid="true"] {
	border-color: #B3261E;
	box-shadow: 0 0 0 1px #B3261E;
}

@media (forced-colors: active) {
	.fsl-bloc [aria-invalid="true"] { border: 2px solid CanvasText; }
}


/* ==========================================================================
   Lumière de hall sur les cartes véhicules
   ==========================================================================

   Un utilitaire d'occasion se montre sous une lampe qu'on déplace : la
   clarté suit le pointeur et glisse sur la tôle. La lumière tombe donc
   sur la photo, pas sur toute la carte — un halo posé par-dessus le
   texte ne serait qu'une décoration, et une décoration qu'on ne voit
   pas vaut moins que rien.

   Deux garde-fous : l'effet ne s'arme qu'avec un pointeur fin — sur un
   écran tactile il n'y a pas de survol, et un halo figé là où le doigt
   a touché ne veut rien dire — et il disparaît en mouvement réduit.
   Seule l'opacité est animée : rien ne recalcule la mise en page.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	.fsl-carte { --fsl-x: 50%; --fsl-y: 40%; }

	.fsl-carte-visuel {
		position: relative;
		isolation: isolate;
	}

	.fsl-carte-visuel::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		opacity: 0;
		transition: opacity 260ms cubic-bezier(.16, 1, .3, 1);
		background: radial-gradient(
			9rem 9rem at var(--fsl-x) var(--fsl-y),
			rgba(255, 255, 255, .55),
			rgba(18, 112, 184, .16) 45%,
			rgba(18, 112, 184, 0) 72%
		);
		mix-blend-mode: soft-light;
	}

	.fsl-carte:hover .fsl-carte-visuel::after,
	.fsl-carte:focus-within .fsl-carte-visuel::after {
		opacity: 1;
	}

	/* Au clavier il n'y a pas de pointeur : la lampe se pose au centre de
	   la photo plutôt que de rester où la souris l'avait laissée. */
	.fsl-carte:focus-within { --fsl-x: 50%; --fsl-y: 40%; }

	/* La carte elle-même se contente d'un retour d'état sobre. */
	.fsl-carte { transition: border-color 200ms cubic-bezier(.16, 1, .3, 1); }
	.fsl-carte:hover, .fsl-carte:focus-within { border-color: var(--fsl-bleu); }
}

@media (prefers-reduced-motion: reduce) {
	.fsl-carte-visuel::after { display: none; }
}

@media (forced-colors: active) {
	.fsl-carte-visuel::after { display: none; }
}

/* --------------------------------------------------------------------------
   Accès à l'espace client par code
   -------------------------------------------------------------------------- */

/*
 * Le champ du code n'est pas un champ de texte comme un autre : on y tape
 * six chiffres qu'on vient de lire dans un e-mail, souvent sur un autre
 * écran. Gros, espacé, en chiffres à chasse fixe — on relit sa saisie d'un
 * coup d'œil au lieu de compter les caractères.
 */
.fsl-champ-code { max-width: 22rem; }

.fsl-champ-code input {
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: .5em;
	text-align: center;
	text-indent: .5em;           /* compense l'espacement du dernier chiffre */
	font-variant-numeric: tabular-nums;
	padding: .6rem .4rem;
}

.fsl-aide {
	display: block;
	margin-top: .4rem;
	font-size: .85rem;
	color: #4A5761;
}

/* --------------------------------------------------------------------------
   Documents mis à disposition du client
   -------------------------------------------------------------------------- */

.fsl-docs-liste {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

.fsl-doc-lien {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .9rem 1rem;
	border: 1px solid #DCE3EA;
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.fsl-doc-lien:hover,
.fsl-doc-lien:focus-visible {
	border-color: #1270B8;
	box-shadow: 0 1px 10px rgba(18, 112, 184, .12);
}

/* L'extension du fichier tient lieu d'icône : pas d'image à télécharger. */
.fsl-doc-type {
	flex: 0 0 auto;
	min-width: 3.1rem;
	padding: .3rem .45rem;
	border-radius: 6px;
	background: #EEF4FA;
	color: #1270B8;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
}

.fsl-doc-texte { display: grid; gap: .15rem; }
.fsl-doc-titre { font-weight: 600; }
.fsl-doc-desc { color: #4A5761; font-size: .93rem; }
.fsl-doc-meta { color: #6B7A88; font-size: .8rem; }

/* La mention « facultatif » ne doit pas peser autant que l'étiquette. */
.fsl-facultatif { font-weight: 400; color: #6B7A88; }

/* L'état d'une location, dit en une phrase sous son titre. */
.fsl-espace-etat {
	margin: .2rem 0 .9rem;
	color: #4A5761;
	font-size: .93rem;
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Clés d'accès et installation sur le téléphone
   -------------------------------------------------------------------------- */

.fsl-passkey-entree { margin: 0 0 1.5rem; }

/* Le séparateur « ou » : une ligne coupée par un mot, pour dire que les
   deux chemins mènent au même endroit. */
.fsl-ou {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 1.4rem 0 0;
	color: #6B7A88;
	font-size: 14px;
}

.fsl-ou::before,
.fsl-ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #E3E9EF;
}

.fsl-passkey-mot { margin: .6rem 0 0; font-size: 14px; }
.fsl-passkey-mot:empty { display: none; }
.fsl-passkey-succes { color: #1E7A46; }
.fsl-passkey-erreur { color: #B02A37; }
.fsl-passkey-info { color: #4A5761; }

.fsl-appareils-liste {
	list-style: none;
	margin: 1rem 0 1.25rem;
	padding: 0;
	border-top: 1px solid #ECF1F5;
}

.fsl-appareils-liste li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: .7rem 2px;
	border-bottom: 1px solid #ECF1F5;
}

.fsl-appareil-nom { font-weight: 600; }
.fsl-appareil-date { color: #6B7A88; font-size: 14px; }

.fsl-installer {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #ECF1F5;
}

.fsl-installer h3 { margin: 0 0 .2rem; font-size: 16px; }
.fsl-installer .fsl-mention { margin: 0 0 .8rem; }

/* --------------------------------------------------------------------------
   Documents privés : les factures du client
   -------------------------------------------------------------------------- */

/*
 * Même liste que les documents publics, avec une marque discrète : ce qui
 * est là ne regarde que lui. Pas de cadenas criard — un filet de couleur
 * suffit à dire que ce bloc n'est pas le même.
 */
.fsl-documents-prives .fsl-doc-lien {
	border-left: 3px solid #1270B8;
}

.fsl-documents-prives .fsl-doc-type {
	background: #1270B8;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Passer sur son téléphone : le code à scanner
   -------------------------------------------------------------------------- */

.fsl-appairage-zone {
	margin-top: 1.25rem;
	display: grid;
	justify-items: center;
	gap: .5rem;
	padding: 1.25rem;
	border: 1px solid #DCE3EA;
	border-radius: 12px;
	background: #fff;
}

/*
 * Le code est un SVG : il reste net à n'importe quelle taille, et la
 * marge blanche qu'il porte lui-même est ce que les lecteurs attendent.
 */
.fsl-appairage-code svg {
	display: block;
	width: min(260px, 70vw);
	height: auto;
}

.fsl-appairage-zone .fsl-mention {
	margin: 0;
	text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
	.fsl-appairage-zone:not([hidden]) {
		animation: fsl-apparait .2s ease-out;
	}
}

@keyframes fsl-apparait {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}