/* ==========================================================================
   SDE : restylage du formulaire de réservation (plugin sivtc 1.8.7)

   Écrit contre le balisage réel de production, capturé dans
   dev/reference-sivtc/ et rendu par le banc dev/banc-sivtc/.

   Principe : on ne touche pas à la mise en page. Le formulaire s'appuie sur
   la grille Bootstrap, des flottants et des calques en position absolue, et
   tout cela fonctionne. Une première version avait tenté de le passer en
   flex : les champs date et heure s'effondraient et les pastilles de repère
   sortaient de leur champ. Ici on ne change que l'habillage, couleurs,
   bordures, rayons, espacements et typographie.

   Le plugin recourt beaucoup à !important et à des sélecteurs à base d'ID.
   Les règles ci-dessous sont donc volontairement spécifiques, et !important
   n'apparaît que là où il faut passer devant le sien.

   Aucun fichier du plugin n'est modifié : tout se fait par surcharge, ce qui
   survit à ses mises à jour.

   Le formulaire doit être placé dans un conteneur portant la classe
   « sde-booking », ce que fait le widget « Réservation SDE ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   Carte englobante
   -------------------------------------------------------------------------- */
/* La carte doit contenir les flottants du plugin. Toute l'étape 2 est bâtie
   sur des flottants, et son conteneur ne les retenait que par effet de bord,
   parce qu'il portait un fond gris qui en faisait un bloc de formatage. En
   lui rendant sa transparence, ce filet a disparu et le contenu s'échappait
   de la carte blanche. Un dégagement explicite vaut mieux qu'un fond posé
   là pour une autre raison. */
.sde-booking::after {
	content: "";
	display: table;
	clear: both;
}

.sde-booking {
	/* Hauteur des champs de saisie. Elle sert aussi à centrer les calques que
	   le plugin pose en position absolue : ils doivent se caler sur le champ,
	   pas sur leur groupe, qui peut être plus haut. */
	--sde-sivtc-champ: 50px;

	position: relative;
	background: #fff;
	border-radius: var(--sde-radius-card, 15px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	padding: 30px;
}

.sde-booking__title {
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sde-ink, #000);
	margin: 0 0 20px;
}

/* Variante sans carte : le formulaire est posé à même la page. */
.sde-booking--bare {
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Emplacement vide, visible seulement dans l'éditeur Elementor. */
.sde-booking--vide {
	background: none;
	box-shadow: none;
	padding: 0;
}

.sde-booking__notice {
	margin: 0;
	padding: 16px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--sde-radius-box, 10px);
	font-size: 14px;
	color: var(--sde-body, #333);
}

/* --------------------------------------------------------------------------
   On retire le cadre du plugin
   `.sivtc-left-container` porte des bordures de 10 px couleur ardoise et un
   fond blanc : c'est notre carte qui joue ce rôle désormais.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container {
	/* Pas de !important sur `display` : le script du plugin masque l'étape 1
	   avec un `display: none` en ligne quand il affiche l'étape 2, et un
	   !important en feuille bat un style en ligne. Notre sélecteur compte deux
	   classes contre une au plugin, la spécificité suffit déjà. */
	display: block;
	width: 100%;
	max-width: 100% !important;
	margin: 0 !important;
}

.sde-booking .sivtc-form-container .sivtc-left-container {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.sde-booking .sivtc-form {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--sde-font, "Figtree", sans-serif);
}

/* --------------------------------------------------------------------------
   Champs
   Du gris #eeeeee sans bordure vers le champ blanc bordé du design. La hauteur
   de 50 px n'est pas décorative : le bouton de géolocalisation posé à droite
   du champ fait exactement 50 px de haut dans le plugin.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-left-container input[type="text"],
.sde-booking .sivtc-left-container input[type="tel"],
.sde-booking .sivtc-left-container input[type="email"],
.sde-booking .sivtc-left-container input[type="number"],
.sde-booking .sivtc-left-container select {
	background-color: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: var(--sde-radius-box, 10px) !important;
	height: var(--sde-sivtc-champ) !important;
	padding: 0 16px !important;
	width: 100%;
	font-family: var(--sde-font, "Figtree", sans-serif) !important;
	font-size: 15px !important;
	color: var(--sde-ink, #000) !important;
	text-indent: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.3s var(--sde-ease, ease);
}

/* Les deux champs d'adresse portent une pastille à gauche et un bouton à
   droite, tous deux en calque : il leur faut de la place à l'intérieur.

   Le plugin réserve cette place autrement, en poussant le champ de 40 px vers
   la droite et en le rétrécissant à 89 % : sa pastille se retrouve alors à
   côté du champ et non dedans. Il impose cela par identifiant et !important,
   il faut donc un identifiant de notre côté pour reprendre la main. */
.sde-booking input#sivtcStartingAddress,
.sde-booking input#sivtcDestinationAddress,
.sde-booking input.sivtcStopAddress {
	margin-left: 0 !important;
	width: 100% !important;
	padding-left: 50px !important;
	padding-right: 58px !important;
}

.sde-booking .sivtc-left-container input:focus,
.sde-booking .sivtc-left-container select:focus {
	border-color: var(--sde-brand, #002fa7) !important;
	outline: none !important;
	box-shadow: none !important;
}

.sde-booking .sivtc-left-container input::placeholder {
	color: var(--sde-muted, #696969);
	opacity: 1;
}

.sde-booking .sivtc-form-container .has-error,
.sde-booking .sivtc-step-1-outer input.has-error {
	border-color: #ce2529 !important;
}

/* --------------------------------------------------------------------------
   Pastille de repère, à gauche du champ
   Le plugin la pose en `position: absolute` sans décalage, donc collée en haut
   à gauche du groupe. On la centre verticalement dans le champ.

   Piège : le repère doit se centrer sur le CHAMP, pas sur le groupe qui le
   contient. Un `top: 50%` centre sur le groupe, et les deux ne coïncident pas
   partout. La ligne départ mesure 50 px, autant que son champ, donc l'erreur
   ne s'y voit pas ; la ligne destination porte en plus le sélecteur
   « prix à l'heure » (`.sivtcPriceHour-wrapper`) et monte à 62 px, ce qui
   posait le repère 6 px trop bas, mesuré au banc le 01/09/2026.

   D'où un décalage exprimé depuis le haut du groupe, où commence le champ,
   et valant la moitié de sa hauteur.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-input-overlay-group { overflow: visible; }

.sde-booking .sivtc-input-overlay-group .sivtc-overlays {
	top: calc(var(--sde-sivtc-champ) / 2);
	left: 9px;
	transform: translateY(-50%);
	z-index: 2;
}

.sde-booking .sivtc-input-overlay-group .sivtc-overlays .letters {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	background-color: var(--sde-brand, #2c2c2a) !important;
	background-image: var(--sde-brand-sheen) !important;
	color: #fff !important;
	border-radius: 7px;
	font-size: 13px;
}

/* Compensation optique. La pastille est centrée dans le champ et le glyphe
   dans la pastille, mesurés à 0,12 px près l'un et l'autre. Mais le repère
   est une goutte, large en haut et terminée en pointe : sa masse est
   au-dessus du centre de sa boîte, et l'oeil le lit trop haut. Un pixel vers
   le bas rétablit l'équilibre perçu. Deux, et il tombe visiblement bas. */
.sde-booking .sivtc-overlays .letters i {
	position: relative;
	top: 1px;
	padding: 0;
	font-size: 13px;
}

/* Le drapeau n'a pas la même asymétrie : sa hampe touche le bord gauche et
   sa bannière déborde à droite, ce qui déporte son centre de masse de 0,6 px
   vers la droite. Il n'a pas besoin du décalage vertical du repère, mais
   d'une reprise horizontale. */
.sde-booking .sivtc-overlays .letters i.fa-flag {
	top: 0.5px;
	left: -0.5px;
}

/* --------------------------------------------------------------------------
   Onglets « Transfert » / « À l'heure », en tête de l'étape 1

   Oubli du premier restylage, relevé le 03/09/2026 sur une capture pleine
   page : ces onglets gardaient la couleur du plugin. Sur le banc, la valeur
   par défaut de sa feuille, un turquoise `#00d6c2` qui jure avec tout le
   reste ; en production, `#003194` injecté depuis ses réglages, c'est-à-dire
   l'ancien bleu roi abandonné le 02/09 au profit du platine. Les deux sont
   hors palette : d'où une reprise ici plutôt qu'un réglage à changer dans
   l'administration du plugin, qui ne suivrait pas un futur changement de
   couleur de marque.

   La spécificité est calculée pour battre les deux sources : la feuille du
   plugin (`.tabs-type span.active`, deux classes) et le bloc `<style>` qu'il
   injecte en production (`.sivtc-form-container .sivtc-left-container
   .tabs-type span:hover`, trois classes). Le préfixe `.sde-booking` en met
   quatre, sans `!important`.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container .sivtc-left-container .tabs-type {
	background-color: transparent;
	gap: 4px;
}

.sde-booking .sivtc-form-container .sivtc-left-container .tabs-type span {
	background-color: #ececea;
	color: var(--sde-ink, #2c2c2a);
	font-weight: 500;
	transition:
		background-color 0.3s var(--sde-ease, ease),
		color 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-form-container .sivtc-left-container .tabs-type span.active {
	background-color: var(--sde-brand, #2c2c2a);
	background-image: var(--sde-brand-sheen);
	color: #fff;
}

/* Le survol d'un onglet inactif ne doit pas se faire passer pour l'onglet
   actif : la feuille du plugin leur donnait exactement le même fond, ce qui
   laissait croire à un changement d'état qui n'avait pas eu lieu. */
.sde-booking .sivtc-form-container .sivtc-left-container .tabs-type span:hover {
	background-color: #e0e0dd;
	color: var(--sde-ink, #2c2c2a);
}

.sde-booking .sivtc-form-container .sivtc-left-container .tabs-type span.active:hover {
	background-color: var(--sde-brand-hi, #5f5e5a);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Bouton de géolocalisation, à droite du champ
   `.tabs-address` malgré son nom n'est pas un sélecteur d'onglets : il porte
   la cible qui remplit le champ avec la position du visiteur.
   -------------------------------------------------------------------------- */
/* Le bouton occupe toute la hauteur du champ et vient se caler contre son
   bord droit, à l'intérieur de la bordure. */
.sde-booking .sivtc-input-overlay-group .tabs-address {
	top: 1px;
	right: 1px;
	transform: none;
	height: 48px !important;
	width: 46px !important;
	background-color: transparent !important;
	border-radius: 0 9px 9px 0;
	overflow: hidden;
	z-index: 2;
}

.sde-booking .tabs-address span,
.sde-booking .sivtc-form-container .sivtc-left-container .tabs-address span {
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	width: 100%;
	height: 100%;
	background-color: var(--sde-surface, #f2f2f2) !important;
	color: var(--sde-body, #333) !important;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
	transition: background-color 0.3s var(--sde-ease, ease), color 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-form-container .sivtc-left-container .tabs-address span:hover {
	background-color: var(--sde-brand, #2c2c2a) !important;
	background-image: var(--sde-brand-sheen) !important;
	color: #fff !important;
	cursor: pointer;
}

.sde-booking .tabs-address span i,
.sde-booking .tabs-address i.fa {
	padding: 0 !important;
	width: auto;
	font-size: 14px !important;
	line-height: 1 !important;
}

/* Croix d'effacement du champ, que le plugin place en pourcentage. On la
   remet juste à gauche du bouton de géolocalisation. */
.sde-booking .sivtc-step-1-outer span.close-address,
.sde-booking .sivtc-tabs-1 span.close-address {
	top: 50% !important;
	right: 56px !important;
	transform: translateY(-50%);
	background: var(--sde-surface, #f2f2f2);
	color: var(--sde-body, #333);
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Espacement des blocs d'adresse
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-input-overlay-group {
	margin: 0 0 12px !important;
}

/* --------------------------------------------------------------------------
   Rangée « ajouter un arrêt » et « inverser les adresses »
   Le plugin lui met `line-height: 0`, ce qui la fait chevaucher le champ
   au-dessus dès qu'on change les hauteurs.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-extra-stop-and-address-exchange {
	display: flow-root;
	line-height: 1.6 !important;
	margin: 0 0 12px !important;
	padding: 0 2px;
}

.sde-booking .sivtc-extra-stop-and-address-exchange .sivtc-add-extra-stop {
	float: left !important;
	width: auto !important;
}

.sde-booking .sivtc-extra-stop-and-address-exchange .sivtc-switch-departure-arrival-address {
	float: right !important;
	width: auto !important;
}

.sde-booking #sivtc-map-and-vehicle-estimation .sivtc-extra-stop-and-address-exchange .sivtc-add-extra-stop a {
	font-family: var(--sde-font, "Figtree", sans-serif) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--sde-brand, #002fa7) !important;
	text-decoration: none;
	transition: opacity 0.3s var(--sde-ease, ease);
	/* Cible tactile : ce lien ne donnait à cliquer que 17 px de haut, sous le
	   minimum de 24 px de la règle AA. Relevé le 24/09/2026 sur les 13 pages.
	   `inline-flex` plus un remplissage vertical le portent à 29 px sans
	   déplacer le texte, puisque le remplissage est symétrique. */
	display: inline-flex;
	align-items: center;
	padding: 6px 0;
}

.sde-booking .sivtc-extra-stop-and-address-exchange .sivtc-add-extra-stop a:hover { opacity: 0.7; }

.sde-booking .sivtc-switch-departure-arrival-address span.sivtc-switch-address {
	color: var(--sde-muted, #696969);
	transition: color 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-switch-departure-arrival-address span.sivtc-switch-address:hover {
	color: var(--sde-brand, #002fa7);
}

/* --------------------------------------------------------------------------
   Date, heure, minute, aller-retour
   La grille Bootstrap du plugin place déjà correctement ces champs : la date
   sur toute la largeur, l'heure et la minute côte à côte. On ne touche qu'aux
   marges et aux libellés.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container .sivtc-input-group {
	margin: 0 -5px !important;
	padding-left: 0 !important;
	list-style: none;
}

.sde-booking .sivtc-input-group li.sivtc-input-container {
	margin: 0 0 12px !important;
	padding: 0 5px !important;
}

.sde-booking .sivtc-input-group li.sivtc-input-container label {
	font-family: var(--sde-font, "Figtree", sans-serif) !important;
	font-size: 14.4px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	color: var(--sde-body, #333) !important;
	margin: 0 0 6px !important;
}

/* Case aller-retour : le libellé se met à côté, pas au-dessus. Le plugin
   passe ses `li` en `display: inline-block`, il faut donc viser le div
   intérieur et non l'élément de liste. */
.sde-booking .sivtc-input-group li.sivtc-input-container.sivtcDirectionSection {
	min-height: 50px;
	display: flex !important;
	align-items: center;
}

.sde-booking .sivtc-return-direction {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Le plugin met ce libellé en position absolue, ce qui le sort du flux et
   laisse la case à cocher seule sur sa ligne. On le remet dans le flux pour
   qu'il devienne un élément de la rangée. */
.sde-booking .sivtc-return-direction label {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 15px;
	color: var(--sde-body, #333);
	cursor: pointer;
}

.sde-booking .sivtc-return-direction input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	padding: 0 !important;
	accent-color: var(--sde-brand, #002fa7);
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

/* Les champs date et heure portent eux aussi une icône en calque, que le
   plugin cale à `top: 19px` pour un champ plus bas que le nôtre. On la
   recentre et on dégage la place correspondante dans le champ. */
.sde-booking #sivtcPickupTimeContainer i.fa,
.sde-booking #sivtcPickupHourContainer i.fa,
.sde-booking #sivtcReturnPickupTimeContainer i.fa,
.sde-booking #sivtcReturnPickupHourContainer i.fa {
	top: 50% !important;
	left: 16px !important;
	transform: translateY(-50%);
	/* `!important` sur la couleur, et pas seulement sur la position.

	   L'extension injecte en style en ligne
	   `div#sivtc-map-and-vehicle-estimation div#sivtcPickupTimeContainer i`,
	   soit deux identifiants : notre sélecteur à un identifiant perdait, et
	   ces icônes restaient au bleu #013194 de l'extension. Relevé le
	   23/09/2026, c'est ce bleu que le client voit dans le formulaire.

	   Doré sombre et non gris : demande du client, et la valeur est choisie
	   pour tenir le contraste sur les fonds clairs du formulaire. */
	color: var(--sde-or-sombre) !important;
	font-size: 14px;
	z-index: 1;
}

/* Même bleu, même remède, sur l'icône d'heure de la ligne de tarif : elle
   est posée sur un #EEE, le fond le plus clair où le doré doit tenir. */
.sde-booking .sivtcPriceHour-wrapper span.sivtc-hours-icon i,
.sde-booking span.sivtc-hours-icon i.fa {
	color: var(--sde-or-sombre) !important;
}

/* Filet de sécurité pour les accents bleus qui n'apparaissent qu'à l'étape 2
   du tunnel, hors de portée d'un contrôle sur la page d'accueil : libellés
   d'adresse et lettres de repère des points du trajet. */
.sde-booking .tabs-address span,
.sde-booking .tabs-address span i,
.sde-booking .sivtc-overlays .letters {
	color: var(--sde-or-sombre) !important;
}

.sde-booking #sivtcPickupTimeContainer input,
.sde-booking #sivtcPickupHourContainer select,
.sde-booking #sivtcReturnPickupTimeContainer input,
.sde-booking #sivtcReturnPickupHourContainer select {
	padding-left: 42px !important;
}

/* Sélecteur de prix horaire, affiché en mise à disposition seulement.
   Tant qu'il est masqué son conteneur fait zéro pixel de haut, mais l'icône
   qu'il contient est en position absolue et s'en échappait, allant flotter
   par-dessus le champ de date. En rendant le conteneur positionné et
   découpant ce qui dépasse, l'icône disparaît avec lui et revient avec lui. */
.sde-booking .sivtcPriceHour-wrapper {
	position: relative;
	overflow: hidden;
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Bouton d'estimation
   Le plugin le pose en turquoise carré sur 70 % de la largeur.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container .btn-primary {
	width: 100% !important;
	padding: 15px 30px !important;
	background-color: var(--sde-brand, #002fa7) !important;
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen) !important;
	border: 0 !important;
	border-radius: 50px !important;
	color: #fff !important;
	font-family: var(--sde-font-ui, "Inter", sans-serif) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: -0.03em;
	line-height: 1.2 !important;
	transition:
		background-color 0.3s var(--sde-ease, ease),
		transform 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-form-container .btn-primary:hover {
	background-color: var(--sde-brand-hi, #1b4fd1) !important;
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi) !important;
	border-color: transparent !important;
	color: #fff !important;
	transform: translateY(-2px);
}

.sde-booking .sivtc-form .action-buttons-container {
	position: static !important;
	bottom: auto !important;
	margin: 8px 0 0 !important;
	width: 100%;
	text-align: center;
}

.sde-booking .sivtc-estimate-spin { color: var(--sde-brand, #002fa7); }

/* --------------------------------------------------------------------------
   Message d'erreur
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container .alert-warning {
	position: static !important;
	margin: 15px 0 0 !important;
	padding: 12px 16px !important;
	border-radius: var(--sde-radius-box, 10px);
	background: #ce2529 !important;
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 14px;
	font-weight: 500 !important;
	text-align: left;
}

.sde-booking .sivtc-form-feedback {
	margin: 15px 0 0 !important;
	/* Le plugin ne pose pas de couleur de texte ici : elle vient du thème.
	   Sur un fond rouge, s'en remettre à l'héritage est une loterie. */
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   ARRÊTS INTERMÉDIAIRES

   Le script les fabrique au clic sur « Ajouter un arrêt supplémentaire »,
   trois au plus. Le gabarit est connu au caractère près, plugin-script.js
   lignes 3535 à 3585 : la ligne d'arrêt réutilise `.sivtc-input-overlay-group`,
   `.sivtc-overlays`, `.letters` et `.tabs-address`, que cette feuille habille
   déjà. Elle hérite donc du repère centré et du bouton de géolocalisation
   sans une règle de plus.

   Ne diffèrent que deux choses : la croix de suppression, `.close-stop-address`
   au lieu de `.close-address`, et le contenant.
   -------------------------------------------------------------------------- */

/* Le conteneur des arrêts ne retenait pas ses flottants, le plugin posant
   `float: right` sur tout `.sivtc-input-overlay-group`. Sa hauteur restait
   donc nulle, et la rangée « Ajouter un arrêt » remontait à leur niveau pour
   s'y écraser sur 12 px de large. Mesuré au banc le 01/09/2026.

   Piège : `display: flow-root` ne convient pas ici, alors que c'est l'outil
   habituel. En faisant du conteneur un bloc de formatage, il lui interdit de
   chevaucher le flottant du groupe départ qui le précède, et le réduit à
   l'espace restant, c'est-à-dire zéro. Mesuré : 392 px en `block`, 0 px en
   `flow-root`, même élément, même contexte. On dégage donc les flottants
   d'avant avec `clear`, et on contient les siens avec un pseudo-élément, ce
   qui laisse le conteneur en bloc ordinaire. */
.sde-booking .sivtc-next-stop-tab-addresses {
	clear: both;
}

.sde-booking .sivtc-next-stop-tab-addresses::after {
	content: "";
	display: table;
	clear: both;
}

/* Croix de suppression d'un arrêt. Le plugin la place en pourcentage, de 8 %
   à 26 % selon le type de course, ce qui la fait flotter au milieu du champ.
   On la cale comme celle des adresses, juste à gauche de la géolocalisation. */
.sde-booking .sivtc-step-1-outer span.close-stop-address,
.sde-booking .sivtc-tabs-1 span.close-stop-address {
	top: 50% !important;
	right: 56px !important;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--sde-surface, #f2f2f2);
	color: var(--sde-body, #333);
	border-radius: 50%;
	z-index: 3;
	transition: background-color 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-step-1-outer span.close-stop-address:hover,
.sde-booking .sivtc-tabs-1 span.close-stop-address:hover {
	background: #ce2529;
}

/* --------------------------------------------------------------------------
   ÉTATS D'ERREUR

   `updateErrorFields()`, plugin-script.js ligne 2226, pose la classe
   `has-error` à trois endroits selon le champ : sur le champ lui-même pour
   la date, l'heure et la minute ; sur le PARENT pour les deux adresses ;
   sur `.tabs-intermediate-stop` pour un arrêt.

   Le plugin dessine alors `border: 1px solid red` sur ce parent, ce qui
   encadre à angles droits le champ ET son bouton de géolocalisation, en
   doublant la bordure arrondie du champ. On reporte le signal sur le champ.
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-form-container .sivtc-input-overlay-group.has-error {
	border: 0 !important;
}

.sde-booking .sivtc-form-container .sivtc-input-overlay-group.has-error input[type="text"] {
	border-color: #ce2529 !important;
	box-shadow: 0 0 0 3px rgba(206, 37, 41, 0.12) !important;
}

.sde-booking .sivtc-form-container .has-error:not(.sivtc-input-overlay-group) {
	box-shadow: 0 0 0 3px rgba(206, 37, 41, 0.12) !important;
}

/* --------------------------------------------------------------------------
   FENÊTRE D'AVERTISSEMENT, au quatrième arrêt

   Le plugin la montre quand on dépasse trois arrêts. Elle arrive en
   turquoise `#00d6c2` à angles droits, dans la police système, et son
   message tombe à 4,3:1 de contraste, sous le seuil de 4,5:1. Mesuré au banc.

   Ses règles montent à deux identifiants : les nôtres reprennent le même
   chemin et le préfixent de `.sde-booking`.
   -------------------------------------------------------------------------- */
.sde-booking div#sivtcStopModal .modal-dialog {
	width: auto;
	max-width: 420px;
	margin: 12% 16px;
}

.sde-booking div#sivtcStopModal .modal-content {
	border: 0;
	border-radius: var(--sde-radius-card, 15px);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.sde-booking div#sivtcStopModal .modal-header {
	padding: 22px 22px 0;
}

.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-header p {
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sde-ink, #000);
}

.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-header button.sivtc-close-stop-modal {
	color: var(--sde-muted, #696969);
	font-size: 24px;
	right: 18px;
	top: 14px;
	transition: color 0.3s var(--sde-ease, ease);
}

.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-header button.sivtc-close-stop-modal:hover {
	color: var(--sde-ink, #000);
}

/* Le message passait à 4,3:1. Notre encre secondaire le porte à 12,63:1. */
.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-body p#msg_error {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sde-body, #333);
	padding: 14px 22px 22px;
}

.sde-booking div#sivtcStopModal .modal-footer {
	padding: 0 22px 22px;
}

.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-footer button.sivtc-close-stop-intermideate-modal {
	float: none;
	width: 100%;
	padding: 14px 24px;
	background-color: var(--sde-brand, #002fa7);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	border: 0;
	border-radius: 50px;
	color: #fff;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	transition: background-color 0.3s var(--sde-ease, ease);
}

.sde-booking div#sivtc-map-and-vehicle-estimation div#sivtcStopModal .modal-footer button.sivtc-close-stop-intermideate-modal:hover {
	background-color: var(--sde-brand-hi, #1b4fd1);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Étape 2 : rien à déporter.

   Une règle posée ici déportait `.sivtc-second-step-vehicle-map-container`
   à -10 000 px en mode compact, pour retirer la carte Google du héros. Elle
   reposait sur une erreur : la capture de référence était tronquée, et on
   croyait ces conteneurs fabriqués par le script. Ils sont servis par le
   serveur, masqués par un `display: none` en ligne, et ils portent TOUTE
   l'étape 2, pas seulement la carte : la liste des véhicules, le bouton de
   retour et le récapitulatif de la course.

   Mesuré au banc le 01/09/2026 : les résultats atterrissaient à -9 960 px et
   le bouton de retour à -19 721 px, inertes. Cliquer sur « Estimation »
   n'affichait donc rien. La carte n'apparaît de toute façon pas à l'étape 1,
   où il n'y a ni `#map` ni panneau droit : la règle ne servait à rien là où
   elle prétendait agir.

   Le plugin gère lui-même sa mise en page étroite, le panneau droit passant
   de 28,33 % à 100 % par ses propres requêtes de média. On le laisse faire,
   conformément au principe de cette feuille.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ÉTAPE 2 : liste des véhicules et récapitulatif de la course

   Écrit contre les 59 sélecteurs que la feuille du plugin consacre à cette
   étape, relevés dans dev/reference-sivtc/plugin-style.css, et recoupé avec
   la capture de production fournie par le client.

   Deux précautions, apprises de la première version du restylage :

   1. on vise des CLASSES, jamais des structures. Le contenu des cartes
      véhicule est rendu par le PHP du plugin en réponse Ajax : il n'apparaît
      dans aucun HTML servi, donc son imbrication exacte n'est pas vérifiable
      ici. Une règle qui ne dépend que d'une classe tient quelle que soit
      cette imbrication ;
   2. on ne touche pas à la mise en page. Les trois colonnes à 33,33 %
      flottantes et leurs bascules responsives restent au plugin.

   La spécificité est calculée pour passer devant lui sans !important : ses
   règles d'étape 2 montent à un identifiant plus quatre classes, les nôtres
   reprennent son sélecteur et le préfixent de `.sde-booking`.
   -------------------------------------------------------------------------- */

/* Les fonds gris du plugin cèdent la place à la carte blanche du design. */
.sde-booking .sivtc-second-step-vehicle-map-container {
	margin-top: 0;
	padding: 0;
	background-color: transparent;
}

.sde-booking #sivtc-vehicle-with-estimation {
	padding: 0;
	background: transparent;
}

/* Une carte par véhicule. */
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-outer {
	margin-bottom: 20px;
	padding: 24px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--sde-radius-card, 15px);
	background: #fff;
}

.sde-booking #sivtc-vehicle-with-estimation h2 {
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--sde-ink, #000);
	margin: 0 0 14px;
}

/* Ligne passagers, bagages et équipements. Le filet de 2 px gris du plugin
   devient un trait discret. */
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-passanger-suitcase {
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	margin-bottom: 18px;
}

.sde-booking #sivtc-vehicle-with-estimation span.sivtc-each-vehicle-passanger i,
.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-suitcase-outer i {
	color: var(--sde-brand, #002fa7);
}

.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-passanger-outer span,
.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-suitcase-outer span {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 14px;
	color: var(--sde-body, #333);
}

.sde-booking .sivtc-each-vehicle-seats-facality label.sivtc-vehicle-equip {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--sde-body, #333);
	margin-bottom: 8px;
}

/* Le plugin laisse ces libellés sans couleur : ils héritent du thème, ce qui
   les rendait délavés sur l'ancien site. On la pose explicitement. */
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-wifi label,
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-baby-seat label,
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-child-booster label,
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-water-bottle label {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 12px;
	font-weight: 500;
	color: var(--sde-body, #333);
}

/* Aux paliers étroits, le plugin masque ces libellés en `display: none`, ce
   qui les retire aussi aux lecteurs d'écran : il ne reste alors qu'une image
   dont rien ne dit ce qu'elle représente. On les sort de la vue sans les
   sortir de l'arbre d'accessibilité. Le rendu visuel est identique. */
@media (max-width: 991px) {
	.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-wifi label,
	.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-baby-seat label,
	.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-child-booster label,
	.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-water-bottle label {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}
}

/* Les pictogrammes d'équipement sont des images, donc non recolorables. Le
   plugin les pose à 0,6 d'opacité, trop pâle à côté de notre encre. */
.sde-booking div#sivtc-vehicle-with-estimation .sivtc-each-vehicle-seats-facality img {
	opacity: 0.75;
}

/* Les trois arguments de réassurance. */
.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-services-outer ul li.sivtc-each-vehicle-service {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--sde-body, #333);
}

.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-services-outer ul li.sivtc-each-vehicle-service i {
	color: var(--sde-brand, #002fa7);
}

/* Le prix. */
.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-price span {
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sde-ink, #000);
}

/* Bouton « Sélectionner ». Le plugin le pose doré, carré, à 65 % de largeur
   et 31 px de haut avec une hauteur de ligne nulle. On reprend la pilule des
   boutons du design. Le bloc <style> que le plugin injecte vise ce bouton
   par identifiant avec quatre classes : notre sélecteur en compte une de
   plus, ce qui suffit à passer devant sans !important. */
.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-book input.btn.btn-success.booking-button {
	float: none;
	width: 100%;
	height: auto;
	margin-top: 14px;
	padding: 14px 24px;
	background-color: var(--sde-brand, #002fa7);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	border: 0;
	border-radius: 50px;
	color: #fff;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	text-transform: none;
	transition:
		background-color 0.3s var(--sde-ease, ease),
		transform 0.3s var(--sde-ease, ease);
}

.sde-booking #sivtc-vehicle-with-estimation .sivtc-each-vehicle-book input.btn.btn-success.booking-button:hover {
	background-color: var(--sde-brand-hi, #1b4fd1);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi);
	color: #fff;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Panneau droit : retour, récapitulatif, carte
   -------------------------------------------------------------------------- */
.sde-booking .sivtc-right-container.map-display.col-md-4 {
	padding: 0;
	background-color: transparent;
}

/* Bouton « Retour ». Il vit dans le panneau droit, hors de
   #sivtc-vehicle-with-estimation : les règles du plugin qui le visent par
   identifiant ne l'atteignent donc pas, seule sa règle d'élément s'applique.
   On en fait une pilule secondaire, pour ne pas concurrencer « Sélectionner ». */
.sde-booking .sivtc-second-step-vehicle-map-container .sivtc-right-container button.sivtc-step-1-button {
	width: auto;
	min-width: 104px;
	height: auto;
	margin: 0 0 16px;
	padding: 10px 22px;
	background-color: transparent;
	border: 1px solid var(--sde-brand, #002fa7);
	border-radius: 50px;
	color: var(--sde-brand, #002fa7);
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-transform: none;
	transition:
		background-color 0.3s var(--sde-ease, ease),
		color 0.3s var(--sde-ease, ease);
}

.sde-booking .sivtc-second-step-vehicle-map-container .sivtc-right-container button.sivtc-step-1-button:hover {
	background-color: var(--sde-brand, #002fa7);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	color: #fff;
}

.sde-booking .sivtc-right-container.map-display.col-md-4 .sivtc-resume-ride-heading {
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sde-ink, #000);
	margin-bottom: 26px;
}

.sde-booking .sivtc-right-container.map-display.col-md-4 .sivtc-resume-ride-heading::before {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	width: 40%;
}

.sde-booking .sivtc-right-container.map-display.col-md-4 div#map {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--sde-radius-box, 10px);
	overflow: hidden;
}

/* Récapitulatif. Son contenu vient d'une réponse Ajax, on ne connaît pas son
   balisage : les règles restent volontairement génériques. */
.sde-booking .sivtc-extra-info-wrapper {
	margin-top: 18px;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	line-height: 1.7;
	color: var(--sde-body, #333);
}

.sde-booking .sivtc-extra-info-wrapper strong,
.sde-booking .sivtc-extra-info-wrapper b {
	font-weight: 500;
	color: var(--sde-ink, #000);
}

.sde-booking .sivtc-extra-info-wrapper i {
	color: var(--sde-brand, #002fa7);
	margin-right: 4px;
}

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.sde-booking { padding: 24px; }
}