/**
 * LL AUTO Booking — tunnel de réservation.
 *
 * Conçu en 375px d'abord ; les media queries ajoutent le confort au-delà.
 * Toutes les couleurs viennent de docs/brand-brief.md.
 */

:root {
	--llab-color-primary: #064d8d;
	--llab-color-primary-dark: #043663;
	--llab-color-primary-light: #0a6cb8;
	--llab-color-secondary: #13b4eb;
	--llab-color-secondary-dark: #0f93c0;
	--llab-color-text: #010607;

	--llab-bg-dark: #032b4f;
	--llab-bg-darker: #021c33;
	--llab-bg-light: #ffffff;
	--llab-bg-subtle: #f2f7fb;
	--llab-border: #dbe6f0;

	/*
	 * Champs de saisie. Deux jetons distincts de --llab-bg-light et
	 * --llab-border : un champ n'est pas une carte, et faire varier l'un ne doit
	 * pas déplacer l'autre.
	 *
	 * --llab-field-border porte un canal alpha (0x2B = 17 %) : la bordure se
	 * compose avec le fond qu'elle traverse et reste juste sur un champ posé
	 * sur blanc comme sur --llab-bg-subtle, sans deuxième valeur à maintenir.
	 */
	--llab-field-bg: #fbfbfc;
	--llab-field-border: #3341552B;
	--llab-text-muted: #334155;
	--llab-text-on-dark: #eef6fc;

	--llab-success: #16a34a;
	/*
	 * Vert de TEXTE, distinct du vert de fond ci-dessus.
	 *
	 * #16a34a ne mesure que 3,30:1 sur blanc : il passe pour un aplat portant
	 * du texte blanc — c'est l'usage des badges — mais échoue AA dès qu'il sert
	 * lui-même de couleur de texte. #15803d monte à 5,02:1 sur blanc et 4,65:1
	 * sur --llab-bg-subtle, les deux fonds où la remise s'affiche.
	 */
	--llab-success-text: #15803d;
	--llab-warning: #f59e0b;
	--llab-danger: #dc2626;

	--llab-radius-card: 16px;
	--llab-radius-btn: 12px;
	--llab-radius-field: 10px;
	--llab-shadow: 0 4px 24px rgba(6, 77, 141, 0.1);
	--llab-shadow-hover: 0 8px 32px rgba(6, 77, 141, 0.18);
	--llab-transition: 200ms ease;

	/*
	 * Le plugin n'embarque aucune police : le thème charge Poppins et
	 * l'applique au body, on en hérite. Aucune famille n'est nommée en dur —
	 * changer la police du site n'imposera donc aucune retouche ici.
	 *
	 * Les deux variables restent distinctes à dessein : redifférencier les
	 * titres du texte courant ne demandera qu'une ligne dans ce bloc.
	 */
	--llab-font-heading: inherit;
	--llab-font-body: inherit;
}

/* ------------------------------------------------------------------
 * Socle
 * ------------------------------------------------------------------ */

.llab-app {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 96px;
	color: var(--llab-color-text);
	font-family: var(--llab-font-body);
	font-size: 16px;
	line-height: 1.65;
}

.llab-app *,
.llab-app *::before,
.llab-app *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------
 * 🔴 Les éléments de formulaire n'héritent pas de la police du document
 *
 * Les navigateurs appliquent leur propre famille aux contrôles de
 * formulaire : un <input>, un <select>, un <textarea> ou un <button> reste
 * en police système même quand le body est en Poppins. Sans cette règle,
 * tous les champs et boutons du plugin trancheraient avec le reste.
 * ------------------------------------------------------------------ */

.llab-app button,
.llab-app input,
.llab-app select,
.llab-app textarea,
.llab-app optgroup {
	font-family: inherit;
}

/*
 * Elementor pose fréquemment une typographie de bouton et de champ via son
 * kit, avec des règles du type `.elementor-kit-42 button` dont la spécificité
 * (0,2,0) bat la règle générique ci-dessus (0,1,1). On repasse devant en
 * combinant classe et type — même technique que pour les boutons-liens, et
 * même raison : voir l'entrée du 2026-08-11 dans docs/errors-log.md.
 *
 * Les contrôles sans classe dédiée — quantité d'option, pagination — sont
 * listés nommément : eux non plus ne doivent pas échapper à l'héritage.
 */
.llab-app input.llab-input,
.llab-app select.llab-input,
.llab-app textarea.llab-input,
.llab-app button.llab-btn,
.llab-app button.llab-nav-item,
.llab-app button.llab-segmented__btn,
.llab-app .llab-addon__qty input,
.llab-app .llab-pagination button {
	font-family: inherit;
}

/* Focus visible — jamais supprimé, y compris sur les cartes cliquables. */
.llab-app :focus-visible {
	outline: 2px solid var(--llab-color-secondary);
	outline-offset: 2px;
}

.llab-app h2,
.llab-app h3 {
	font-family: var(--llab-font-heading);
	line-height: 1.2;
	margin: 0 0 8px;
}

.llab-step__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--llab-color-primary);
}

/*
 * Titre de sous-section — « Options complémentaires », « Règlement »,
 * « Votre véhicule ».
 *
 * 🔴 Sélecteur classe + type : 0,2,1. La valeur de 32px était déjà correcte,
 * mais `.llab-substep__title` seul pèse 0,1,0 et perdait contre une règle de
 * kit Elementor du type `.elementor-kit-42 h3 { margin: 0 }` (0,2,0). Le titre
 * venait alors chevaucher la grille au-dessus. Ce n'était pas une valeur
 * manquante, c'était une valeur écrasée — voir docs/errors-log.md, 2026-08-11.
 *
 * 32px marque un changement de section, conformément à l'échelle de
 * brand-brief.md.
 */
.llab-app h3.llab-substep__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--llab-color-primary);
	margin-top: 32px;
}

.llab-step__hint {
	margin: 0 0 24px;
	color: var(--llab-text-muted);
	font-size: 14px;
}

.llab-loading {
	color: var(--llab-text-muted);
	font-size: 14px;
}

.llab-step[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * Barre de progression
 * ------------------------------------------------------------------ */

.llab-progress {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.llab-progress__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	text-align: center;
}

/* Filet reliant les jalons, tracé derrière les pastilles. */
.llab-progress__item::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--llab-border);
	z-index: 0;
}

.llab-progress__item:first-child::before {
	left: 50%;
}

.llab-progress__item:last-child::before {
	right: 50%;
}

.llab-progress__dot {
	position: relative;
	z-index: 1;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--llab-bg-light);
	border: 2px solid var(--llab-border);
	color: var(--llab-text-muted);
	font-family: var(--llab-font-heading);
	font-size: 13px;
	font-weight: 700;
	transition: var(--llab-transition);
}

.llab-progress__label {
	font-size: 11px;
	color: var(--llab-text-muted);
	line-height: 1.3;
}

.llab-progress__item.is-current .llab-progress__dot {
	background: var(--llab-color-secondary);
	border-color: var(--llab-color-secondary);
	color: #fff;
}

.llab-progress__item.is-current .llab-progress__label {
	color: var(--llab-color-primary);
	font-weight: 600;
}

.llab-progress__item.is-done .llab-progress__dot {
	background: var(--llab-color-primary);
	border-color: var(--llab-color-primary);
	color: #fff;
}

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

.llab-alert,
.llab-notice {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--llab-radius-field);
	font-size: 15px;
}

.llab-alert {
	background: #fdecec;
	border-left: 4px solid var(--llab-danger);
	color: #7f1d1d;
}

.llab-alert[hidden] {
	display: none;
}

.llab-alert p {
	margin: 0;
}

/* Issues proposées sous un message d'erreur — connexion, réinitialisation.
   Sélecteur doublé pour passer devant `.llab-alert p` ci-dessus, plutôt que
   de recourir à !important que la charte proscrit. */
.llab-alert .llab-alert__actions {
	margin-top: 8px;
	font-size: 14px;
}

/* Même teinte que le message : le contraste sur #fdecec reste largement
   au-dessus du seuil AA, et le soulignement porte l'affordance. */
.llab-alert__actions a {
	color: #7f1d1d;
	font-weight: 600;
	text-decoration: underline;
}

.llab-alert__actions span {
	margin: 0 6px;
	opacity: 0.6;
}

.llab-notice {
	background: var(--llab-bg-subtle);
	border-left: 4px solid var(--llab-color-secondary);
	color: var(--llab-color-primary-dark);
}

.llab-notice[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * Cartes sélectionnables — catégories et formules
 * ------------------------------------------------------------------ */

.llab-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.llab-card {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: 16px;
	background: var(--llab-bg-light);
	border: 2px solid var(--llab-border);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: var(--llab-transition);
}

.llab-card:hover {
	border-color: var(--llab-color-primary-light);
	box-shadow: var(--llab-shadow-hover);
}

.llab-card.is-selected {
	border-color: var(--llab-color-secondary);
	background: var(--llab-bg-subtle);
}

.llab-card.is-selected::after {
	content: '✓';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--llab-color-secondary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.llab-card__media {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: var(--llab-radius-field);
	margin-bottom: 12px;
	background: var(--llab-bg-subtle);
}

.llab-card__code {
	display: inline-block;
	min-width: 26px;
	padding: 2px 8px;
	margin-bottom: 6px;
	border-radius: 999px;
	background: var(--llab-color-primary);
	color: #fff;
	font-family: var(--llab-font-heading);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.llab-card__name {
	display: block;
	font-family: var(--llab-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--llab-color-primary);
	margin-bottom: 4px;
}

.llab-card__desc,
.llab-card__duration {
	display: block;
	font-size: 14px;
	color: var(--llab-text-muted);
}

.llab-card__price {
	display: block;
	margin-top: 8px;
	font-family: var(--llab-font-heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--llab-color-primary);
}

/* ------------------------------------------------------------------
 * Étape 1 — véhicule enregistré
 * ------------------------------------------------------------------ */

.llab-vehicle-group[hidden],
.llab-switch-vehicle[hidden],
.llab-category-block[hidden],
.llab-save-vehicle[hidden],
.llab-save-vehicle .llab-grid-2[hidden] {
	display: none;
}

/*
 * Groupe de véhicules enregistrés — « Votre véhicule » et « Vos véhicules
 * enregistrés ». Le conteneur n'est PAS une grille : il porte un titre puis
 * une `.llab-cards` interne. Les cartes tombent ainsi exactement sur les
 * mêmes colonnes que la liste des catégories, plus bas dans l'étape.
 *
 * ⚠️ Ne pas remettre de `max-width` sur ces cartes. Une largeur fixe ne peut
 * pas coïncider avec une colonne en `1fr`, qui vaut une fraction du conteneur
 * et change avec la fenêtre : c'est précisément ce qui désalignait la carte du
 * véhicule par défaut avec les catégories.
 */
/*
 * Marge basse et non `+ .llab-vehicle-group` : les deux groupes ne sont pas
 * adjacents, le lien « Utiliser un autre véhicule » s'intercale entre eux et
 * le sélecteur frère direct ne matcherait jamais.
 */
.llab-vehicle-group {
	margin-bottom: 24px;
}

/*
 * Exception : dans un groupe de véhicules, le titre ouvre le bloc et n'a rien
 * à détacher au-dessus.
 *
 * ⚠️ Même poids que la règle générale — 0,2,1 — sinon elle ne gagnerait plus
 * une fois celle-ci passée en classe + type. Placée après, elle l'emporte à
 * égalité de spécificité.
 */
.llab-app .llab-vehicle-group h3.llab-substep__title {
	margin-top: 0;
}

.llab-switch-vehicle {
	margin: 16px 0 24px;
}

/* Bouton qui se lit comme un lien : l'action est secondaire, mais elle garde
   une cible tactile correcte. */
.llab-linkish {
	min-height: 44px;
	padding: 10px 0;
	background: none;
	border: 0;
	color: var(--llab-color-primary);
	font-family: var(--llab-font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.llab-save-vehicle {
	margin-top: 24px;
	padding: 16px;
	background: var(--llab-bg-subtle);
	border-radius: var(--llab-radius-card);
}

.llab-save-vehicle .llab-checkbox {
	margin-bottom: 0;
}

.llab-save-vehicle .llab-grid-2 {
	margin-top: 16px;
}

/* ------------------------------------------------------------------
 * Options complémentaires
 * ------------------------------------------------------------------ */

.llab-addons {
	display: grid;
	gap: 8px;
}

.llab-addon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background: var(--llab-bg-light);
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-field);
	transition: var(--llab-transition);
}

.llab-addon.is-selected {
	border-color: var(--llab-color-secondary);
	background: var(--llab-bg-subtle);
}

.llab-addon__check {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--llab-color-primary);
}

.llab-addon__body {
	flex: 1 1 auto;
	min-width: 0;
}

.llab-addon__name {
	display: block;
	font-weight: 600;
	cursor: pointer;
}

.llab-addon__price {
	display: block;
	font-family: var(--llab-font-heading);
	font-weight: 700;
	color: var(--llab-color-primary);
	font-size: 15px;
}

.llab-addon__qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
}

.llab-addon__qty[hidden] {
	display: none;
}

/*
 * Le champ quantité ne porte aucune classe : fond et bordure lui viennent du
 * bloc `.llab-app .llab-addon__qty input` plus haut, seule source de ces deux
 * valeurs. Ne remettre ici ni `background` ni `border` — ils divergeraient.
 */
.llab-addon__qty input {
	width: 72px;
	min-height: 44px;
	padding: 8px;
	font-size: 16px;
	border-radius: var(--llab-radius-field);
}

/* ------------------------------------------------------------------
 * Calendrier
 * ------------------------------------------------------------------ */

.llab-calendar {
	background: var(--llab-bg-light);
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-card);
	padding: 16px;
	box-shadow: var(--llab-shadow);
}

.llab-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.llab-calendar__month {
	font-size: 18px;
	font-weight: 600;
	color: var(--llab-color-primary);
	text-transform: capitalize;
	margin: 0;
}

.llab-calendar__nav {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--llab-bg-subtle);
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-btn);
	color: var(--llab-color-primary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: var(--llab-transition);
}

.llab-calendar__nav:hover:not(:disabled) {
	background: var(--llab-color-primary);
	color: #fff;
}

.llab-calendar__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.llab-calendar__weekdays,
.llab-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.llab-calendar__weekdays {
	margin-bottom: 4px;
}

.llab-calendar__weekdays span {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--llab-text-muted);
	padding: 4px 0;
}

.llab-day {
	aspect-ratio: 1;
	min-height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	border-radius: var(--llab-radius-field);
	background: var(--llab-bg-subtle);
	color: var(--llab-color-text);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	transition: var(--llab-transition);
}

.llab-day:hover:not(:disabled) {
	border-color: var(--llab-color-primary-light);
}

/* Jours passés, dimanches, journées bloquées et journées complètes :
   l'API ne les renvoie pas, ils arrivent donc ici désactivés. */
.llab-day:disabled {
	background: transparent;
	color: #b9c4cd;
	cursor: not-allowed;
	text-decoration: line-through;
}

.llab-day.is-empty {
	background: transparent;
	border-color: transparent;
	cursor: default;
}

.llab-day.is-selected {
	background: var(--llab-color-secondary);
	border-color: var(--llab-color-secondary-dark);
	color: #fff;
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Créneaux
 * ------------------------------------------------------------------ */

.llab-slots {
	margin-top: 24px;
}

.llab-slots__list {
	display: grid;
	gap: 8px;
}

.llab-slot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 12px 16px;
	background: var(--llab-bg-light);
	border: 2px solid var(--llab-border);
	border-radius: var(--llab-radius-field);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: var(--llab-transition);
}

.llab-slot:hover {
	border-color: var(--llab-color-primary-light);
}

.llab-slot.is-selected {
	border-color: var(--llab-color-secondary);
	background: var(--llab-bg-subtle);
}

.llab-slot__label {
	font-weight: 600;
}

.llab-slot__range {
	color: var(--llab-text-muted);
	font-size: 14px;
}

/* ------------------------------------------------------------------
 * Champs de formulaire
 * ------------------------------------------------------------------ */

.llab-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

.llab-field {
	margin: 0 0 16px;
}

.llab-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--llab-color-primary);
}

.llab-required {
	color: var(--llab-danger);
}

/* 16px minimum : en dessous, iOS zoome au focus. */
/*
 * Géométrie du champ. Fond et bordure sont volontairement absents d'ici : ils
 * vivent dans le bloc `.llab-app` ci-dessous, seule source de ces deux valeurs.
 */
.llab-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: var(--llab-radius-field);
	color: var(--llab-color-text);
	font-family: var(--llab-font-body);
	font-size: 16px;
	line-height: 1.5;
	transition: var(--llab-transition);
}

/* ------------------------------------------------------------------
 * Fond et bordure des champs — source unique
 *
 * Couvre les trois types, plus le champ quantité des options, qui est le seul
 * du plugin à ne porter aucune classe : il est ciblé par son conteneur.
 *
 * ⚠️ Sélecteurs classe + type sous `.llab-app` (0,2,1) : les règles de kit
 * Elementor du type `.elementor-kit-42 input` pèsent 0,2,0 et imposeraient
 * sinon leur propre fond et leur propre bordure. Voir docs/errors-log.md.
 * ------------------------------------------------------------------ */

.llab-app input.llab-input,
.llab-app textarea.llab-input,
.llab-app select.llab-input,
.llab-app .llab-addon__qty input {
	background: var(--llab-field-bg);
	border: 1px solid var(--llab-field-border);
}

/*
 * États du champ.
 *
 * 🔴 Spécificité 0,3,1, à ne pas redescendre en dessous de 0,2,1.
 *
 * Le bloc de base ci-dessus pèse 0,2,1. Réécrire ces états en `.llab-input:focus`
 * (0,2,0), comme ils l'étaient à l'origine, les rendrait PERDANTS : la bordure
 * de focus et celle d'erreur seraient écrasées par la bordure de repos, et un
 * champ en erreur cesserait de se signaler.
 *
 * Les pages d'authentification portaient jusqu'au 19 août 2026 une exception
 * `border-color: transparent` en 0,3,1, contre laquelle ces règles devaient
 * aussi gagner. L'exception a été supprimée — tous les champs du plugin ont
 * désormais le même traitement — mais la spécificité reste à 0,3,1 : elle ne
 * coûte rien et laisse la marge intacte.
 *
 * L'outline de `:focus-visible` demeure la garantie première ; cette bordure la
 * renforce, elle ne la remplace pas.
 */
.llab-app input.llab-input:focus,
.llab-app textarea.llab-input:focus,
.llab-app select.llab-input:focus {
	border-color: var(--llab-color-primary-light);
}

.llab-app input.llab-input[aria-invalid='true'],
.llab-app textarea.llab-input[aria-invalid='true'],
.llab-app select.llab-input[aria-invalid='true'] {
	border-color: var(--llab-danger);
	background: #fffafa;
}

textarea.llab-input {
	min-height: 96px;
	resize: vertical;
}

.llab-help {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--llab-text-muted);
}

.llab-field-error {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--llab-danger);
}

.llab-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 15px;
}

.llab-checkbox input {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--llab-color-primary);
}

.llab-checkbox a {
	color: var(--llab-color-primary);
	text-decoration: underline;
}

.llab-checkbox--required.is-invalid label {
	color: var(--llab-danger);
}

/* Piège anti-robot : hors du flux visuel, mais pas en display:none. */
.llab-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Récapitulatif
 * ------------------------------------------------------------------ */

.llab-summary {
	background: var(--llab-bg-subtle);
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-card);
	padding: 16px;
}

.llab-summary__group + .llab-summary__group {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--llab-border);
}

.llab-summary__heading {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--llab-text-muted);
	margin: 0 0 6px;
}

.llab-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
}

.llab-summary__row--total {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--llab-color-primary);
}

.llab-summary__muted {
	color: var(--llab-text-muted);
}

/* ------------------------------------------------------------------
 * Règlement
 * ------------------------------------------------------------------ */

.llab-payment {
	display: grid;
	gap: 8px;
}

.llab-payment__option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 12px 16px;
	border: 2px solid var(--llab-border);
	border-radius: var(--llab-radius-field);
	background: var(--llab-bg-light);
}

.llab-payment__option.is-available {
	cursor: pointer;
	border-color: var(--llab-color-secondary);
	background: var(--llab-bg-subtle);
}

.llab-payment__option.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.llab-payment__option input {
	width: 22px;
	height: 22px;
	accent-color: var(--llab-color-primary);
}

.llab-payment__icon {
	font-size: 20px;
}

.llab-payment__label {
	font-weight: 600;
}

.llab-payment__soon {
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--llab-border);
	color: var(--llab-text-muted);
	font-size: 12px;
	white-space: nowrap;
}

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

/* ------------------------------------------------------------------
 * Pile de boutons — composant partagé
 *
 * 🔴 Source unique de l'espacement entre boutons, pour tout le plugin. Le
 * motif avait été recopié quatre fois — `.llab-actions`, `.llab-job__actions`,
 * `.llab-vehicle__actions`, `.llab-media__actions` — et oublié à trois autres
 * endroits, où les boutons se touchaient bord à bord. Les quatre classes
 * historiques sont désormais des alias de ce bloc : une seule valeur à changer.
 *
 * `gap` sur un conteneur flex, jamais `margin-bottom` sur chaque bouton : pas
 * de marge résiduelle sous le dernier élément, et aucune fusion de marges à
 * anticiper.
 *
 * Échelle en multiples de 8, conformément à brand-brief.md :
 *   — 8px  entre deux boutons d'un même groupe ;
 *   — 16px entre un bouton d'action et la liste qu'il commande (--command).
 *
 * ⚠️ Préfixé de `.llab-app` : les règles de kit Elementor du type
 * `.elementor-kit-42 div` pèsent 0,2,0 et battraient une classe seule.
 * ------------------------------------------------------------------ */

/*
 * 🔴 `align-items: flex-start` — sans quoi la pile CHANGE la largeur des
 * boutons qu'elle contient.
 *
 * Un conteneur flex en colonne étire ses enfants sur toute la largeur par
 * défaut (`align-items: stretch`). Or la pleine largeur, dans ce plugin, se
 * demande explicitement par `.llab-btn--block`, qui pose `width: 100%`. Sans
 * cette ligne, un bouton sans `--block` — « Nouveau code », « Choisir une
 * image » — passait de sa largeur naturelle à toute la largeur de la carte.
 *
 * Avec `flex-start`, chaque bouton garde la largeur qu'il avait : les `--block`
 * s'étendent toujours par leur `width: 100%`, les autres restent au format de
 * leur libellé. La pile ne règle que l'espacement, ce qui est son seul rôle.
 */
/*
 * 🔴 `align-items: stretch` — la valeur par défaut, ici explicite pour qu'on ne
 * la « corrige » pas.
 *
 * Un `flex-start` avait été posé sur ce conteneur pour empêcher un bouton sans
 * `--block` de s'étirer sur toute la largeur. Effet de bord : la pile ne
 * contient pas que des boutons. Sur /mon-compte, c'est le FORMULAIRE de mot de
 * passe entier qui est l'un de ses enfants — sans classe ni largeur, il se
 * rétrécissait à son contenu, entraînant ses trois champs et son bouton avec
 * lui. « Me déconnecter » y échappait, `--block` lui donnant `width: 100%`.
 *
 * La contrainte de largeur appartient donc au bouton, jamais au conteneur :
 * voir la règle suivante. Tout autre enfant — formulaire, div, liste — retrouve
 * ainsi le comportement de bloc qu'il avait avant l'introduction de la pile.
 */
.llab-app .llab-btn-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

/*
 * Seul un bouton dépourvu de `--block` garde sa largeur de contenu. C'est le
 * cas de « Nouveau code » : il commande une liste, il n'a pas à barrer l'écran.
 *
 * `:not()` ne pèse que par son argument — sélecteur en 0,4,0, largement au-delà
 * des règles de kit Elementor.
 */
.llab-app .llab-btn-stack > .llab-btn:not(.llab-btn--block) {
	align-self: flex-start;
}

/*
 * La barre du tunnel garde `stretch` : ses boutons n'ont pas `--block` et
 * s'étendent depuis toujours par l'étirement du conteneur. Lui appliquer
 * `flex-start` les rétrécirait — ce serait un changement, pas une correction.
 */
.llab-app .llab-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * Bouton qui commande la liste placée juste en dessous — « Nouveau code »,
 * « Ajouter un véhicule ». L'écart est plus large que dans une pile de boutons :
 * il marque que l'élément suivant n'est pas un bouton frère.
 */
.llab-app .llab-btn-stack--command {
	gap: 16px;
}

/*
 * Rangée horizontale. Les boutons se partagent la largeur au-delà de 768px,
 * puis repassent en colonne pleine largeur en dessous.
 *
 * 🔴 Le passage en colonne est explicite, et non laissé au seul `flex-wrap`.
 * Avec le seul retour à la ligne, deux boutons sur trois peuvent tenir côte à
 * côte et le troisième passer seul dessous : la rangée se lit alors de travers.
 * C'est le cas qui échappe quand on ne teste qu'en desktop.
 */
.llab-app .llab-btn-stack--row,
.llab-app .llab-job__actions,
.llab-app .llab-vehicle__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Ces deux rangées se partageaient déjà la largeur avant la mise en commun :
 * `flex: 1 1 auto` et `min-width: 120px` reprennent à l'identique ce que
 * portaient `.llab-job__actions .llab-btn` et `.llab-vehicle__actions .llab-btn`.
 *
 * ⚠️ `.llab-media__actions` est volontairement absente : elle n'avait aucune
 * de ces deux déclarations, ses boutons étaient à leur largeur naturelle. Les y
 * ajouter les avait étirés. Sa définition reste locale, dans llab-admin.css.
 */
.llab-app .llab-btn-stack--row > .llab-btn,
.llab-app .llab-job__actions > .llab-btn,
.llab-app .llab-vehicle__actions > .llab-btn {
	flex: 1 1 auto;
	min-width: 120px;
	margin-top: 0;
}

/* Padding conservé de l'ancienne règle `.llab-job__actions .llab-btn`. */
.llab-app .llab-job__actions > .llab-btn {
	padding: 12px 16px;
}

@media (max-width: 767px) {
	.llab-app .llab-btn-stack--row,
	.llab-app .llab-job__actions,
	.llab-app .llab-vehicle__actions,
	.llab-app .llab-media__actions {
		flex-direction: column;
	}
}

/* Barre d'action du tunnel : la pile, plus son détachement du contenu. */
.llab-actions {
	margin-top: 32px;
}

/*
 * Au-delà de 768px, la barre passe en rangée : « Retour » à gauche, le bouton
 * d'avancement — « Suivant » ou « Confirmer ma réservation » — à droite. C'est
 * le motif habituel d'un tunnel sur desktop, et il donne au bouton
 * d'avancement son poids visuel sans l'étirer sur toute la page.
 *
 * En colonne sous cette largeur, inchangé : boutons empilés, pleine largeur,
 * ce qui reste la bonne disposition au pouce.
 */
@media (min-width: 768px) {
	.llab-app .llab-actions {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/*
	 * 🔴 `margin-left: auto` sur les deux boutons d'avancement, en plus du
	 * `space-between`.
	 *
	 * À l'étape 1, « Retour » est masqué : la barre ne contient plus qu'un
	 * enfant visible, et `space-between` le colle alors à GAUCHE — un bouton
	 * « Suivant » en bas à gauche, sans rien en face. La marge automatique
	 * absorbe l'espace libre et le maintient à droite dans tous les cas, qu'il
	 * ait un voisin ou non.
	 *
	 * Les deux règles coexistent sans se battre : les marges automatiques sont
	 * résolues avant `justify-content`, le résultat visuel est identique quand
	 * les deux boutons sont présents.
	 */
	.llab-app .llab-actions > .llab-actions__advance {
		margin-left: auto;
	}
}

.llab-btn {
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--llab-radius-btn);
	font-family: var(--llab-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: var(--llab-transition);
}

.llab-btn[hidden] {
	display: none;
}

.llab-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.llab-btn--primary {
	background: var(--llab-color-secondary);
	color: #fff;
	font-weight: 600;
}

/* Survol, focus et actif : la couleur est réaffirmée à chaque état. Un thème
   qui redéfinit `button:hover` sans toucher à `button` laisserait sinon
   réapparaître un libellé sombre au passage de la souris. */
.llab-btn--primary:hover:not(:disabled) {
	background: var(--llab-color-secondary-dark);
	color: #fff;
}

.llab-btn--primary:focus-visible,
.llab-btn--primary:active {
	background: var(--llab-color-secondary-dark);
	color: #fff;
}

.llab-btn--secondary {
	background: var(--llab-color-primary);
	color: #fff;
}

.llab-btn--secondary:hover:not(:disabled) {
	background: var(--llab-color-primary-dark);
}

.llab-btn--ghost {
	background: transparent;
	border-color: var(--llab-color-primary);
	color: var(--llab-color-primary);
}

.llab-btn--ghost:hover:not(:disabled) {
	background: var(--llab-bg-subtle);
}

/* ------------------------------------------------------------------
 * Barre de total collante
 * ------------------------------------------------------------------ */

.llab-total-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--llab-bg-darker);
	color: var(--llab-text-on-dark);
	box-shadow: 0 -4px 24px rgba(2, 28, 51, 0.3);
	padding: 12px 16px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.llab-total-bar[hidden] {
	display: none;
}

.llab-total-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.llab-total-bar__label {
	font-size: 14px;
}

/* Cyan sur fond sombre : contraste conforme. */
.llab-total-bar__amount {
	font-family: var(--llab-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--llab-color-secondary);
}

/* ------------------------------------------------------------------
 * Lien « Déjà client ? » de l'étape 4 du tunnel
 * ------------------------------------------------------------------ */

.llab-login-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--llab-bg-subtle);
	border-left: 4px solid var(--llab-color-secondary);
	border-radius: var(--llab-radius-field);
	font-size: 15px;
}

.llab-login-prompt[hidden] {
	display: none;
}

.llab-login-prompt a {
	color: var(--llab-color-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Composants partagés — dashboard manager, espace client, confirmation
 *
 * Ils vivaient dans admin/css/llab-admin.css, qui n'est pas chargée sur
 * /mon-compte : les onglets, badges et états vides y apparaissaient sans
 * style. Leur place est ici, dans la feuille de base que toutes les pages
 * du plugin chargent.
 *
 * ⚠️ Les éléments interactifs sont volontairement préfixés de `.llab-app`.
 * Elementor et beaucoup de thèmes posent des règles du type
 * `.elementor-kit-42 button` (spécificité 0,2,0) qui battent une simple
 * classe (0,1,0). Le préfixe rétablit l'égalité, et le sélecteur de type
 * — `button.llab-tab` — la tranche définitivement, sans !important que la
 * charte proscrit.
 * ------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------
 * Code promo — étape 5 du tunnel
 * ------------------------------------------------------------------ */

.llab-promo {
	margin: 24px 0;
}

/*
 * Champ et bouton côte à côte. En colonne sous 480 px : à 375 px, un bouton
 * « Appliquer » à côté d'un champ laisse au champ une largeur où le code n'est
 * plus lisible en entier.
 */
.llab-promo__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.llab-promo__row .llab-input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.llab-app .llab-promo__row button.llab-btn {
	flex: 0 0 auto;
	min-height: 48px;
}

.llab-promo__feedback {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

.llab-promo__feedback.is-success {
	color: var(--llab-success);
}

.llab-promo__feedback.is-error {
	color: var(--llab-danger);
}

.llab-promo__feedback[hidden][hidden] {
	display: none;
}

/*
 * Ligne de remise : lue comme un gain, donc en vert — mais le vert de TEXTE,
 * pas celui des badges, qui échouerait AA sur fond blanc.
 */
.llab-summary__discount {
	color: var(--llab-success-text);
	font-weight: 600;
}

@media (max-width: 479px) {
	.llab-promo__row {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------
 * Coquille de tableau de bord — barre latérale + zone de contenu.
 *
 * Partagée par /gestion et /mon-compte : même squelette, mêmes classes,
 * mêmes règles de repli mobile. Les deux écrans ne diffèrent que par leurs
 * entrées de navigation et leurs panneaux.
 *
 * Le shell casse volontairement la largeur limitée de `.llab-app` : un
 * dashboard occupe la place disponible, contrairement au tunnel qui reste
 * en colonne lisible.
 * ------------------------------------------------------------------ */

/*
 * ⚠️ Sélecteur doublé volontairement — `.llab-app.llab-shell` pèse 0,2,0.
 * `llab-admin.css` et `llab-account.css` se chargent APRÈS cette feuille et
 * posent chacune `.llab-admin { padding-bottom: 48px }` / `.llab-account
 * { padding-bottom: 48px }` en 0,1,0. À égalité de spécificité, la feuille
 * la plus tardive gagnerait : il faut donc passer devant, sans !important
 * que la charte proscrit. Même raison pour `max-width`, que `.llab-app`
 * plafonne à 1200px alors qu'un dashboard prend la place disponible.
 */
.llab-app.llab-shell {
	display: flex;
	align-items: flex-start;
	max-width: none;
	min-height: 70vh;
	padding: 0;
	background: var(--llab-bg-subtle);
	border-radius: var(--llab-radius-card);
	overflow: hidden;
}

/* --- Barre latérale ------------------------------------------------ */

/*
 * Colonne flex : c'est ce qui permet au bouton de déconnexion, en dernier
 * enfant, de se coller au bas par `margin-top: auto`. Sur un écran court, la
 * marge automatique retombe à zéro et le bouton suit simplement les entrées de
 * navigation — le comportement voulu sur téléphone.
 */
.llab-shell__sidebar {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	width: 260px;
	align-self: stretch;
	padding: 20px 12px;
	background: var(--llab-bg-light);
	border-right: 1px solid var(--llab-border);
}

.llab-shell__brand {
	flex-shrink: 0;
	padding: 0 12px 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--llab-border);
	color: var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.llab-shell__brand span {
	display: block;
	color: var(--llab-text-muted);
	font-size: 13px;
	font-weight: 500;
}

/*
 * `flex-shrink: 0` : dans une colonne à hauteur contrainte — la barre est en
 * `height: 100%` sur mobile — les enfants flex se compriment par défaut. Les
 * douze entrées du manager verraient alors leur hauteur rabotée sous les 48 px
 * exigés. On préfère faire défiler la barre.
 */
.llab-shell__nav {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * ⚠️ Spécificité : `.llab-app button.llab-nav-item` pèse 0,2,1 et passe
 * devant les règles de kit Elementor du type `.elementor-kit-42 button`
 * (0,2,0). Sans le sélecteur de type, la barre latérale hériterait des
 * fonds, bordures et majuscules du thème. Voir l'entrée du 2026-08-11 dans
 * docs/errors-log.md.
 */
.llab-app button.llab-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--llab-radius-btn);
	color: var(--llab-text-muted);
	font-family: var(--llab-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: var(--llab-transition);
}

.llab-app button.llab-nav-item:hover {
	background: var(--llab-bg-subtle);
	color: var(--llab-color-text);
}

.llab-app button.llab-nav-item.is-active {
	background: var(--llab-bg-subtle);
	color: var(--llab-color-primary);
	font-weight: 600;
}

.llab-nav-item__icon {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

/*
 * Les icônes prennent la couleur du texte : une seule règle de couleur par
 * état sur le bouton parent suffit, et le SVG suit.
 */
.llab-nav-item__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.llab-nav-item__label {
	flex: 1 1 auto;
}

/* Pastille de compteur — cyan de marque, texte blanc en 600 (brand-brief). */
.llab-nav-item__count {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--llab-color-secondary);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

/* Pastille client posée par le JS : masquée tant qu'aucun compte n'existe. */
.llab-nav-item__count[hidden][hidden] {
	display: none;
}

/*
 * Déconnexion — une action, pas une section. Elle vit hors du `role="tablist"`
 * et n'a ni `data-tab` ni `aria-selected` : la lui donner ferait annoncer par
 * les lecteurs d'écran un onglet de plus qui n'ouvre aucun panneau.
 *
 * ⚠️ C'est un lien, donc `.llab-app a.llab-nav-logout` en 0,2,1 — une règle de
 * kit `.elementor-kit-42 a` pèse 0,2,0 et imposerait sinon sa couleur, son
 * soulignement et parfois ses majuscules. Même mécanique qu'au 2026-08-11.
 */
.llab-app a.llab-nav-logout {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-radius: var(--llab-radius-btn);
	color: var(--llab-text-muted);
	font-family: var(--llab-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: var(--llab-transition);
}

/*
 * Le filet et la poussée vers le bas vivent sur un séparateur dédié, pas sur
 * une bordure du lien : sinon le trait se déplacerait avec le fond au survol,
 * et la marge automatique se battrait avec le fond coloré.
 */
.llab-shell__divider {
	flex-shrink: 0;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--llab-border);
}

.llab-app a.llab-nav-logout:hover,
.llab-app a.llab-nav-logout:focus-visible {
	background: rgba(220, 38, 38, 0.08);
	color: var(--llab-danger);
}

.llab-nav-logout__icon {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.llab-nav-logout__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Zone de contenu ---------------------------------------------- */

.llab-shell__main {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.llab-shell__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	background: var(--llab-bg-light);
	border-bottom: 1px solid var(--llab-border);
}

.llab-shell__heading {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--llab-color-text);
	font-family: var(--llab-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.llab-shell__user {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--llab-text-muted);
	font-size: 14px;
	font-weight: 500;
}

.llab-shell__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--llab-color-primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
}

.llab-shell__content {
	flex: 1 1 auto;
	padding: 24px;
}

/*
 * Chaque panneau devient une carte blanche. Le sélecteur porte `.llab-shell`
 * pour ne pas toucher aux `.llab-panel` d'autres écrans s'il en apparaît.
 */
.llab-shell .llab-panel {
	padding: 24px;
	background: var(--llab-bg-light);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
}

/*
 * Attribut doublé : 0,3,0. Une règle de kit `.elementor-kit-42 section`
 * (0,2,0) ou notre propre `.llab-shell .llab-panel` (0,2,0) rendrait sinon
 * visible un panneau masqué — c'est le bug des trois boutons du tunnel, même
 * mécanique. Voir docs/errors-log.md.
 */
.llab-shell .llab-panel[hidden][hidden] {
	display: none;
}

/*
 * Panneau transparent : pour les écrans d'accueil, qui empilent plusieurs
 * blocs — rangée de statistiques, carte de bienvenue, puis liste. Une carte
 * blanche contenant d'autres cartes blanches n'a aucun sens visuel.
 */
.llab-shell .llab-panel--flush {
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

/* Carte autonome, à l'intérieur d'un panneau transparent. */
.llab-shell__card {
	padding: 24px;
	background: var(--llab-bg-light);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
}

/* Deux cartes empilées — « Mes informations » puis « Mot de passe ». */
.llab-shell__card + .llab-shell__card {
	margin-top: 24px;
}

/* --- Bouton hamburger et voile ------------------------------------- */

/*
 * Masqué au-dessus de 900px par `display: none`, réaffiché dans la requête
 * média. Le type est nommé pour la même raison que les entrées de nav.
 */
.llab-app button.llab-shell__burger {
	display: none;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--llab-border);
	border-radius: var(--llab-radius-btn);
	color: var(--llab-color-primary);
	cursor: pointer;
	box-shadow: none;
}

.llab-shell__burger svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.llab-shell__overlay {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(2, 28, 51, 0.5);
	border: 0;
	padding: 0;
}

.llab-shell__overlay[hidden][hidden] {
	display: none;
}

/* Bouton de fermeture interne à la barre latérale, mobile uniquement. */
.llab-app button.llab-shell__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0 0 8px auto;
	background: transparent;
	border: 0;
	border-radius: var(--llab-radius-btn);
	color: var(--llab-text-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

/* --- Cartes de statistiques --------------------------------------- */

.llab-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 0 0 24px;
}

.llab-stat {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
	background: var(--llab-bg-light);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
}

.llab-stat__body {
	flex: 1 1 auto;
	min-width: 0;
}

.llab-stat__value {
	display: block;
	color: var(--llab-color-primary);
	font-family: var(--llab-font-heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

.llab-stat__label {
	display: block;
	margin-top: 4px;
	color: var(--llab-text-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

/* Icône discrète : cyan à 12 %, jamais un aplat plein. */
.llab-stat__icon {
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--llab-radius-btn);
	background: rgba(19, 180, 235, 0.12);
	color: var(--llab-color-secondary);
}

.llab-stat__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Carte de bienvenue client ------------------------------------ */

.llab-welcome {
	padding: 24px;
	margin: 0 0 24px;
	background: var(--llab-bg-dark);
	border-radius: var(--llab-radius-card);
	box-shadow: var(--llab-shadow);
	color: var(--llab-text-on-dark);
}

.llab-welcome__greeting {
	margin: 0 0 16px;
	color: var(--llab-text-on-dark);
	font-family: var(--llab-font-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.llab-welcome__label {
	margin: 0 0 6px;
	color: var(--llab-color-secondary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.llab-welcome__title {
	margin: 0 0 8px;
	color: var(--llab-text-on-dark);
	font-family: var(--llab-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.llab-welcome__meta {
	margin: 0;
	color: var(--llab-text-on-dark);
	font-size: 15px;
	line-height: 1.5;
}

.llab-welcome__actions {
	margin-top: 20px;
}

.llab-welcome[hidden][hidden] {
	display: none;
}

/* --- Repli mobile -------------------------------------------------- */

/*
 * 🔴 Sous 900px, la barre latérale sort du flux et glisse depuis la gauche.
 * Le gérant travaille sur /gestion depuis son téléphone : c'est le cas
 * d'usage principal, pas une dégradation acceptable.
 */
@media (max-width: 899px) {
	/*
	 * Sélecteur doublé comme la règle de base : une requête média ne change
	 * rien à la spécificité. Un simple `.llab-shell` (0,1,0) resterait derrière
	 * le `.llab-app.llab-shell` (0,2,0) plus haut, et la barre latérale ne
	 * sortirait jamais du flux.
	 */
	.llab-app.llab-shell {
		display: block;
		border-radius: 0;
		overflow: visible;
	}

	.llab-shell__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 40;
		width: 280px;
		max-width: 86vw;
		height: 100%;
		padding: 16px 12px;
		border-right: 1px solid var(--llab-border);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform var(--llab-transition);
	}

	.llab-shell__sidebar.is-open {
		transform: translateX(0);
	}

	/*
	 * Repli sans JavaScript : si le script ne se charge pas, la barre reste
	 * visible dans le flux plutôt que d'enfermer la navigation derrière un
	 * bouton mort.
	 */
	.llab-shell--no-js .llab-shell__sidebar {
		position: static;
		width: auto;
		max-width: none;
		height: auto;
		transform: none;
	}

	.llab-app button.llab-shell__burger,
	.llab-app button.llab-shell__close {
		display: inline-flex;
	}

	.llab-shell--no-js button.llab-shell__burger,
	.llab-shell--no-js button.llab-shell__close {
		display: none;
	}

	.llab-shell__header {
		padding: 12px 16px;
	}

	.llab-shell__heading {
		font-size: 18px;
	}

	/* Le nom passe à la trappe, l'avatar reste : la place est comptée. */
	.llab-shell__user span {
		display: none;
	}

	.llab-shell__content {
		padding: 16px;
	}

	.llab-shell .llab-panel {
		padding: 16px;
	}

	.llab-shell .llab-panel--flush {
		padding: 0;
	}

	.llab-shell__card {
		padding: 16px;
	}

	.llab-stats {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 12px;
	}

	.llab-stat {
		padding: 16px;
	}

	.llab-stat__value {
		font-size: 24px;
	}
}

/* Au-delà, aucun voile ni panneau glissant : la barre est toujours là. */
@media (min-width: 900px) {
	.llab-shell__overlay {
		display: none;
	}
}

/* Badges de statut — couleurs de brand-brief.md. */
.llab-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.llab-badge--pending {
	background: var(--llab-warning);
	color: var(--llab-color-text);
}

.llab-badge--confirmed {
	background: var(--llab-success);
}

.llab-badge--in_progress {
	background: var(--llab-color-secondary);
	color: #fff;
}

.llab-badge--completed {
	background: var(--llab-text-muted);
}

.llab-badge--cancelled,
.llab-badge--no_show {
	background: var(--llab-danger);
}

.llab-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: var(--llab-border);
	color: var(--llab-color-primary-dark);
}

.llab-tag--guest {
	background: #fdecec;
	color: #7f1d1d;
}

/* État vide — jamais un tableau vide. */
.llab-empty {
	padding: 32px 16px;
	text-align: center;
	background: var(--llab-bg-subtle);
	border-radius: var(--llab-radius-card);
	color: var(--llab-text-muted);
	font-size: 16px;
}

/* Variante « Bientôt disponible » : une fonctionnalité à venir, pas une
   absence de données. Volontairement sobre et sans bouton — il n'y a rien à
   faire sur cet écran tant qu'elle n'est pas activée. */
.llab-empty--soon {
	padding: 48px 24px;
}

.llab-empty__title {
	margin: 0 0 8px;
	font-family: var(--llab-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--llab-color-primary);
}

.llab-empty--soon p:last-child {
	max-width: 46ch;
	margin: 0 auto;
	line-height: 1.6;
}

/* Variantes de bouton communes. */
.llab-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

.llab-btn--danger {
	background: transparent;
	border-color: var(--llab-danger);
	color: var(--llab-danger);
}

.llab-btn--danger:hover:not(:disabled) {
	background: #fdecec;
}

/* ------------------------------------------------------------------
 * Boutons rendus par une balise <a>
 *
 * 🔴 C'est ici que se jouait le bouton « Réserver une intervention »
 * apparaissant en aplat cyan sans texte : Elementor impose une couleur de
 * lien globale plus spécifique que `.llab-btn--primary`, et le libellé
 * prenait la couleur du fond. Le sélecteur `.llab-app a.llab-btn--primary`
 * (0,2,1) reprend la main sur `.elementor-kit-N a` (0,2,0).
 * ------------------------------------------------------------------ */

/* <a> est inline par nature : sans inline-block, son padding et sa hauteur de
   frappe n'existent pas. Un <button>, lui, est déjà inline-block — poser un
   display dessus ne servait à rien et contredisait l'attribut hidden. */
.llab-app a.llab-btn {
	display: inline-block;
}

.llab-app a.llab-btn,
.llab-app button.llab-btn {
	text-decoration: none;
	line-height: 24px;
}

.llab-app a.llab-btn--block,
.llab-app button.llab-btn--block {
	display: block;
}

.llab-app a.llab-btn--primary,
.llab-app button.llab-btn--primary {
	background: var(--llab-color-secondary);
	color: #fff;
	font-weight: 600;
}

/* Les trois états, à la même spécificité renforcée (0,3,1 avec la
   pseudo-classe) : le kit Elementor pose souvent un `a:hover` de 0,2,1 qui
   battrait une règle de 0,1,1. */
.llab-app a.llab-btn--primary:hover,
.llab-app button.llab-btn--primary:hover,
.llab-app a.llab-btn--primary:focus-visible,
.llab-app button.llab-btn--primary:focus-visible,
.llab-app a.llab-btn--primary:active,
.llab-app button.llab-btn--primary:active {
	background: var(--llab-color-secondary-dark);
	color: #fff;
}

.llab-app a.llab-btn--secondary,
.llab-app button.llab-btn--secondary {
	background: var(--llab-color-primary);
	color: #fff;
}

.llab-app a.llab-btn--ghost,
.llab-app button.llab-btn--ghost {
	background: transparent;
	color: var(--llab-color-primary);
}

.llab-app a.llab-btn--danger,
.llab-app button.llab-btn--danger {
	background: transparent;
	color: var(--llab-danger);
}

/* ------------------------------------------------------------------
 * Tablette et desktop
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.llab-app {
		font-size: 17px;
		padding-bottom: 32px;
	}

	.llab-step__title {
		font-size: 36px;
	}

	.llab-substep__title {
		font-size: 24px;
	}

	.llab-progress__label {
		font-size: 13px;
	}

	.llab-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.llab-cards--services {
		grid-template-columns: repeat(2, 1fr);
	}

	.llab-addons {
		grid-template-columns: repeat(2, 1fr);
	}

	.llab-grid-2 {
		grid-template-columns: 1fr 1fr;
	}

	.llab-slots__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.llab-slot {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.llab-actions {
		flex-direction: row;
		justify-content: space-between;
	}

	.llab-actions .llab-btn {
		min-width: 200px;
	}

	/* Sur grand écran, le total se pose dans le flux plutôt qu'en barre fixe. */
	.llab-total-bar {
		position: sticky;
		bottom: 16px;
		margin-top: 32px;
		border-radius: var(--llab-radius-card);
	}
}

@media (min-width: 1024px) {
	.llab-cards--services {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------------------------
 * Préférence de mouvement réduit
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.llab-app * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------
 * L'attribut hidden est souverain — à garder en DERNIER
 *
 * 🔴 Le `[hidden] { display: none }` de la feuille du navigateur a une
 * spécificité nulle : n'importe laquelle de nos règles de `display` posée sur
 * une classe l'emporte. Or le JS pilote l'affichage des étapes, des panneaux,
 * des boutons d'étape et des blocs de l'étape 1 par cet attribut.
 *
 * Symptômes observés faute de cette règle : « Retour » et « Confirmer ma
 * réservation » visibles dès l'étape 1 — `.llab-app button.llab-btn` posait un
 * `display: inline-block` (0,2,1) qui battait `.llab-btn[hidden]` (0,2,0) — et
 * la liste des autres véhicules affichée alors que replié, `.llab-cards`
 * posant un `display: grid`.
 *
 * L'attribut est répété volontairement : `[hidden][hidden]` porte la
 * spécificité à 0,3,0 et passe devant nos propres règles, sans recourir au
 * !important que la charte proscrit.
 *
 * Les règles `[hidden]` des sections ci-dessus restent en place : elles
 * documentent l'intention composant par composant. Celle-ci est le filet.
 * ------------------------------------------------------------------ */

.llab-app [hidden][hidden] {
	display: none;
}