/*
 * Habillage du calculateur, de la page de résultats et de la commande.
 *
 * Il reprend la charte du site, relevée sur les pages en ligne :
 *   fond #06060C, texte blanc, or #FFE08C, Inter pour le texte,
 *   Montserrat pour les titres, boutons en pilule.
 *
 * Tout est porté par .sivtc-plus-skin (le conteneur posé autour du formulaire)
 * ou par body.sivtc-plus-checkout (la commande). Rien ne fuit ailleurs, et
 * désactiver l'extension rend au formulaire son apparence d'origine.
 *
 * Contraste : chaque couleur de texte a été choisie pour dépasser 7:1 sur son
 * fond, soit le niveau AAA. Aucun gris sur fond sombre.
 */

/* =========================================================== 1. Les jetons */

.sivtc-plus-skin,
body.sivtc-plus-checkout {
	--sp-fond: #06060c;
	--sp-carte: #12121c;
	--sp-carte-haute: #1a1a26;
	--sp-encre: #ffffff;          /* 18:1 sur --sp-carte */
	--sp-encre-douce: #d7dae3;    /* 11:1 — jamais en dessous */
	--sp-or: #ffe08c;             /* 12:1 */
	--sp-or-fonce: #f0d38a;
	--sp-or-encre: #06060c;       /* texte sur bouton doré : 13:1 */
	--sp-bord: rgba(255, 255, 255, .18);
	--sp-bord-actif: var(--sp-or);
	--sp-succes: #7ee0a2;
	--sp-alerte: #ff9b9b;
	--sp-rayon: 14px;
	--sp-rayon-champ: 10px;
	--sp-pilule: 100px;
	--sp-ombre: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
	--sp-icone: 22px;
}

/* ====================================================== 2. Le conteneur */

/*
 * Le panneau. Direction assumée : luxe sobre — noir profond, or rare, espace
 * généreux. Une seule touche d'atmosphère, une lueur dorée très basse en haut
 * du panneau, qui donne de la profondeur sans jamais gêner la lecture.
 */
.sivtc-plus-skin {
	position: relative;
	max-width: 1040px;
	margin-inline: auto;
	background-color: var(--sp-carte);
	background-image: radial-gradient(120% 90% at 50% -25%, rgba(255, 224, 140, .11), transparent 62%);
	color: var(--sp-encre);
	border: 1px solid var(--sp-bord);
	border-radius: var(--sp-rayon);
	box-shadow: var(--sp-ombre);
	padding: 36px 32px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
}

/* Un filet doré en haut du panneau : le détail qui signe la gamme. */
.sivtc-plus-skin::before {
	content: '';
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sp-or), transparent);
	opacity: .55;
	pointer-events: none;
}

.sivtc-plus-skin *,
.sivtc-plus-skin *::before,
.sivtc-plus-skin *::after {
	box-sizing: inherit;
}

/*
 * Les conteneurs internes de SIVTC ne doivent plus imposer leur fond clair.
 *
 * SIVTC écrit ses couleurs dans une balise <style> injectée DANS la page, à
 * partir de ses réglages « design du formulaire ». Cette balise passe après
 * notre feuille et gagne à spécificité égale : d'où le !important, qui n'est
 * pas un raccourci mais la seule façon de reprendre la main sans toucher à
 * ses réglages.
 */
.sivtc-plus-skin .sivtc-left-container,
.sivtc-plus-skin .sivtc-right-container,
.sivtc-plus-skin .map-display,
.sivtc-plus-skin .sivtc-second-step-vehicle-map-container,
.sivtc-plus-skin #sivtc-map-and-vehicle-estimation,
.sivtc-plus-skin #sivtc-vehicle-with-estimation,
.sivtc-plus-skin .sivtc-form-container,
.sivtc-plus-skin [class*="sivtc-tabs"] {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--sp-encre) !important;
	max-width: 100%;
}

/* ========================================================= 3. Typographie */

.sivtc-plus-skin h1,
.sivtc-plus-skin h2,
.sivtc-plus-skin h3,
.sivtc-plus-skin h4 {
	font-family: 'Montserrat', 'Inter', sans-serif;
	color: var(--sp-encre);
	letter-spacing: -.01em;
	margin: 0 0 12px;
}

.sivtc-plus-skin p,
.sivtc-plus-skin li,
.sivtc-plus-skin span,
.sivtc-plus-skin div {
	color: inherit;
}

/* Règle de lisibilité du site : sur fond sombre, jamais de gris. */
.sivtc-plus-skin label,
.sivtc-plus-skin .control-label,
.sivtc-plus-skin .sivtc-left-container label,
.sivtc-plus-skin .sivtc-right-container label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 600 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sp-encre) !important;
}

/* ============================================================= 4. Champs */

.sivtc-plus-skin input[type="text"],
.sivtc-plus-skin input[type="email"],
.sivtc-plus-skin input[type="tel"],
.sivtc-plus-skin input[type="number"],
.sivtc-plus-skin input[type="date"],
.sivtc-plus-skin input[type="time"],
.sivtc-plus-skin input[type="search"],
.sivtc-plus-skin select,
.sivtc-plus-skin textarea,
.sivtc-plus-skin .form-control,
.sivtc-plus-skin #sivtcStartingAddress,
.sivtc-plus-skin #sivtcDestinationAddress,
.sivtc-plus-skin #sivtcStartingAddressSelect,
.sivtc-plus-skin #sivtcDestinationAddressSelect,
.sivtc-plus-skin .sivtc-left-container input,
.sivtc-plus-skin .sivtc-left-container select,
.sivtc-plus-skin .sivtc-right-container input,
.sivtc-plus-skin .sivtc-right-container select {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	background-color: var(--sp-carte-haute) !important;
	border: 1px solid var(--sp-bord) !important;
	border-radius: var(--sp-rayon-champ) !important;
	color: var(--sp-encre) !important;
	/* 16 px minimum : en dessous, iOS agrandit la page au premier appui. */
	font-size: 16px !important;
	font-family: inherit;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.sivtc-plus-skin textarea,
.sivtc-plus-skin textarea.form-control {
	min-height: 110px;
	resize: vertical;
}

.sivtc-plus-skin select,
.sivtc-plus-skin select.form-control {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23ffe08c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}

.sivtc-plus-skin input:focus,
.sivtc-plus-skin select:focus,
.sivtc-plus-skin textarea:focus,
.sivtc-plus-skin #sivtcStartingAddress:focus,
.sivtc-plus-skin #sivtcDestinationAddress:focus {
	outline: none;
	border-color: var(--sp-bord-actif) !important;
	box-shadow: 0 0 0 3px rgba(255, 224, 140, .28);
}

.sivtc-plus-skin input::placeholder,
.sivtc-plus-skin textarea::placeholder,
.sivtc-plus-skin #sivtcStartingAddress::placeholder,
.sivtc-plus-skin #sivtcDestinationAddress::placeholder {
	color: #b9becb !important;   /* 7,6:1 sur le fond des champs */
	opacity: 1;
	font-size: 16px !important;
}

.sivtc-plus-skin input[disabled],
.sivtc-plus-skin select[disabled] {
	opacity: .55;
}

/* ------------------------------- Les pastilles d'icône des champs */

/*
 * D'origine, le repère de départ faisait 8 × 14 pixels et celui d'arrivée
 * 14 × 14 : deux tailles, donc deux alignements. Et ils étaient dorés, en
 * pleine lumière, alors que ce ne sont que des repères.
 *
 * Ici chaque repère devient une pastille de 46 × 46 au glyphe NOIR sur fond
 * doré. Le noir sur or donne 13:1 — bien au-delà du niveau AAA — et l'or
 * reste cantonné à de petites surfaces, ce qui le rend précieux au lieu de
 * bruyant.
 */
.sivtc-plus-skin .fa-map-marker,
.sivtc-plus-skin .fa-flag {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px;
	flex: 0 0 auto;
	background: var(--sp-or) !important;
	color: #000000 !important;      /* noir franc, comme demandé */
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 17px !important;
	line-height: 1 !important;
	text-align: center;
}

.sivtc-plus-skin .input-group-addon,
.sivtc-plus-skin .sivtc-input-icon {
	background: transparent !important;
	border: 0 !important;
	padding: 0 10px 0 0 !important;
	display: inline-flex;
	align-items: center;
}

/*
 * Le calendrier et l'horloge sont posés À L'INTÉRIEUR de leur champ, en
 * position absolue. Leur donner une pastille de 46 px les faisait recouvrir
 * le texte saisi. Ils restent donc de simples glyphes dorés, et on réserve
 * au champ la place qu'ils occupent.
 */
.sivtc-plus-skin .fa-calendar,
.sivtc-plus-skin .fa-calendar-o,
.sivtc-plus-skin .fa-clock-o,
.sivtc-plus-skin .fa-clock {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--sp-or) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	pointer-events: none;
}

/*
 * La rangée date / heure / minute.
 *
 * SIVTC la construit en <ul> avec des <li class="col-lg-4"> flottants, et les
 * <select> gardaient une largeur fixe de 96 px : « Heure » s'affichait « He »
 * et « Minute » devenait « Minu ». On passe la liste en rangée souple, on
 * neutralise les flottants, et chaque contrôle occupe toute sa colonne.
 */
/*
 * On NE touche PAS à sa mécanique de mise en page : elle reste en flottants,
 * comme il l'a écrite. Tenter de la passer en flex faisait s'effondrer des
 * colonnes entières. On ne corrige que les largeurs, qui étaient mal réparties.
 *
 * SIVTC donne 5/4/3 douzièmes à la date, l'heure et la minute. Le résultat :
 * des menus de 99 et 81 px où « Heure » et « Minute » ne tenaient pas. La
 * répartition ci-dessous a été mesurée sur la page réelle, texte par texte.
 */
.sivtc-plus-skin .sivtc-input-group > li > div {
	width: 100% !important;
}

.sivtc-plus-skin .sivtc-input-group select {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	padding-right: 30px !important;
	background-position: right 10px center;
	text-overflow: clip;
}

.sivtc-plus-skin .sivtc-input-group > li.col-lg-5 {
	width: 44% !important;
	padding-right: 10px !important;
}

.sivtc-plus-skin .sivtc-input-group > li.sivtc-cstm-time.col-lg-4 {
	width: 33% !important;
	padding-right: 10px !important;
}

.sivtc-plus-skin .sivtc-input-group > li.sivtc-cstm-time.col-lg-3 {
	width: 23% !important;
	padding-right: 0 !important;
}

/*
 * Un menu déroulant natif réserve une marge interne que le calcul ne voit pas :
 * il coupe le texte une quinzaine de pixels avant la largeur annoncée. Les
 * proportions ci-dessus en tiennent compte, vérifiées à l'écran et non
 * seulement au calcul.
 */

/* Le champ de date laisse la place au glyphe posé dessus. */
.sivtc-plus-skin #sivtcPickupTime,
.sivtc-plus-skin #sivtcReturnPickupTime {
	padding-left: 40px !important;
}

/*
 * Le bouton « me localiser » était posé sur un conteneur GRIS #EEEEEE hérité
 * de SIVTC, avec un glyphe blanc dessus : 1,1:1 de contraste, donc invisible.
 * On efface ce fond gris, et le bouton reprend la matière du formulaire.
 */
.sivtc-plus-skin .tabs-address,
.sivtc-plus-skin .sivtc-overlay,
.sivtc-plus-skin .letter,
.sivtc-plus-skin .letters {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	color: var(--sp-encre) !important;
}

.sivtc-plus-skin .tabs-address {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/*
 * Le viseur « me localiser » était en NOIR sur fond sombre : invisible, et
 * inutilisable au clavier. Il passe en blanc, avec une vraie cible de 46 px
 * et un état de survol doré.
 */
.sivtc-plus-skin .fa-crosshairs {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	min-width: 46px;
	background: transparent !important;
	color: #ffffff !important;
	border: 1px solid var(--sp-bord) !important;
	border-radius: 12px !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.sivtc-plus-skin .fa-crosshairs:hover,
.sivtc-plus-skin .fa-crosshairs:focus-visible {
	color: var(--sp-or) !important;
	border-color: var(--sp-or) !important;
	background: rgba(255, 224, 140, .12) !important;
}

/* La ligne adresse : pastille, champ, viseur — tous sur la même base. */
.sivtc-plus-skin .sivtc-input-container,
.sivtc-plus-skin [class*="input-container"] {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ========================================== 5. Cases à cocher et boutons radio */

/*
 * SIVTC applique « height: 50px » à tous les input de son conteneur, ce qui
 * écrasait la case à cocher en un trait de 2 pixels. On la rétablit de force,
 * en taille comme en apparence.
 */
.sivtc-plus-skin input[type="checkbox"],
.sivtc-plus-skin input[type="radio"],
.sivtc-plus-skin .sivtc-left-container input[type="checkbox"],
.sivtc-plus-skin .sivtc-left-container input[type="radio"] {
	width: 22px !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	min-width: 22px !important;
	margin: 0 12px 0 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	vertical-align: middle;
	/*
	 * On laisse le navigateur dessiner la case : sa version native est celle
	 * que les lecteurs d'écran et la navigation au clavier comprennent le
	 * mieux. Seule la couleur de coche est imposée. La case décochée reste
	 * claire sur le fond sombre, donc parfaitement repérable.
	 */
	accent-color: var(--sp-or);
	appearance: auto;
	-webkit-appearance: auto;
	cursor: pointer;
}

/*
 * La ligne « Aller/retour » : SIVTC l'enveloppe dans un <div>, pas dans un
 * <label>. On la met en ligne pour que la case et son texte soient sur la
 * même base, avec une hauteur de cible tactile confortable.
 */
.sivtc-plus-skin .sivtc-return-direction,
.sivtc-plus-skin [class*="return-direction"] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start;
	width: 100% !important;
	min-height: 52px;
	margin: 6px 0 20px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--sp-encre) !important;
}

/*
 * Le libellé est un <label> : la règle générale en fait un bloc au-dessus de
 * son champ, ce qui le décrochait de sa case. Ici il reste sur la ligne.
 */
/*
 * Le vrai coupable du décrochage : SIVTC met ce libellé en position ABSOLUE,
 * à 3 px du haut. Il sortait donc du flux, flottait au-dessus de sa case, et
 * le conteneur ne mesurait plus que la largeur de la case — 34 px. On le
 * remet simplement dans le flux.
 */
.sivtc-plus-skin .sivtc-return-direction label,
.sivtc-plus-skin [class*="return-direction"] label {
	position: static !important;
	top: auto !important;
	left: auto !important;
	display: inline-flex !important;
	align-items: center;
	white-space: nowrap;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--sp-encre) !important;
	cursor: pointer;
}

.sivtc-plus-skin .sivtc-return-direction input[type="checkbox"] {
	order: -1; /* la case avant son libellé, quel que soit l'ordre du HTML */
}

.sivtc-plus-skin label:has(input[type="checkbox"]),
.sivtc-plus-skin label:has(input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--sp-encre);
	cursor: pointer;
}

.sivtc-plus-skin input[type="checkbox"] + span,
.sivtc-plus-skin input[type="checkbox"] + label {
	margin-left: 8px;
	vertical-align: middle;
}

/* ========================================================== 6. Grille */

.sivtc-plus-skin .form-group {
	margin-bottom: 18px;
}

.sivtc-plus-skin .row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -8px;
	margin-right: -8px;
	align-items: flex-end;
}

.sivtc-plus-skin .row > [class*="col-"] {
	padding-left: 8px;
	padding-right: 8px;
	flex: 1 1 100%;
	max-width: 100%;
	float: none;
	min-width: 0;
}

/*
 * Le bouton n'était pas centré, et ce n'était pas un oubli de réglage.
 * SIVTC met sa rangée dans une classe nommée « center » qui ne fait que
 * text-align:center — sans effet sur un élément d'un conteneur flex. En
 * passant la rangée en flex, on héritait donc d'un alignement à gauche.
 * On pose l'intention explicitement.
 */
.sivtc-plus-skin .row.center,
.sivtc-plus-skin .action-buttons-container,
.sivtc-plus-skin [class*="action-buttons"] {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Un bouton d'action large, mais pas démesuré : il reste lisible d'un regard. */
.sivtc-plus-skin .action-buttons-container button,
.sivtc-plus-skin .action-buttons-container .btn,
.sivtc-plus-skin .row.center button,
.sivtc-plus-skin .row.center .btn {
	min-width: 260px;
	max-width: 420px;
}

@media (min-width: 768px) {
	.sivtc-plus-skin .row > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.sivtc-plus-skin .row > .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.sivtc-plus-skin .row > .col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.sivtc-plus-skin .row > .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ========================================================== 7. Onglets */

.sivtc-plus-skin .nav-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 22px;
	padding: 5px;
	list-style: none;
	background: rgba(255, 255, 255, .07);
	border: 0;
	border-radius: var(--sp-pilule);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sivtc-plus-skin .nav-tabs > li {
	flex: 1 1 auto;
	margin: 0;
	float: none;
}

.sivtc-plus-skin .nav-tabs > li > a {
	display: block;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--sp-pilule);
	background: transparent;
	color: var(--sp-encre);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.sivtc-plus-skin .nav-tabs > li > a:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--sp-or);
}

.sivtc-plus-skin .nav-tabs > li.active > a,
.sivtc-plus-skin .nav-tabs > li > a.active {
	background: var(--sp-or);
	color: var(--sp-or-encre);
}

/* ========================================================== 8. Boutons */

/*
 * Ce site force background-color:#d8ebee et color:#000 sur les <button>, et le
 * rose au focus. On neutralise explicitement, focus compris.
 */
.sivtc-plus-skin button,
.sivtc-plus-skin input[type="submit"],
.sivtc-plus-skin .btn,
.sivtc-plus-skin a.btn,
.sivtc-plus-skin a.estimate_vehicles,
.sivtc-plus-skin input.booking-button,
body.sivtc-plus-checkout .woocommerce button.button,
body.sivtc-plus-checkout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background-color: #f0d38a !important;
	background-image: none !important;
	color: #000000 !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	line-height: 1.3 !important;
	text-decoration: none;
	text-transform: none !important;
	white-space: nowrap !important;
	overflow: visible !important;
	box-shadow: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .15s ease;
}

.sivtc-plus-skin button:hover,
.sivtc-plus-skin input[type="submit"]:hover,
.sivtc-plus-skin .btn:hover,
body.sivtc-plus-checkout #place_order:hover {
	filter: brightness(1.08);
	color: var(--sp-or-encre) !important;
}

.sivtc-plus-skin button:focus,
.sivtc-plus-skin button:focus-visible,
.sivtc-plus-skin input[type="submit"]:focus,
.sivtc-plus-skin .btn:focus {
	background-color: var(--sp-or) !important;
	color: var(--sp-or-encre) !important;
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.sivtc-plus-skin button:active,
.sivtc-plus-skin .btn:active {
	transform: translateY(1px);
}

/* Bouton secondaire : contour doré sur fond sombre. */
.sivtc-plus-skin .btn-secondary,
.sivtc-plus-skin .btn-default,
.sivtc-plus-skin a[class*="retour" i],
.sivtc-plus-skin button[class*="retour" i] {
	background-color: transparent !important;
	color: var(--sp-or) !important;
	box-shadow: inset 0 0 0 2px var(--sp-or);
}

/* ============================================ 9. Cartes véhicules */

.sivtc-plus-skin .sivtc-vehicle,
.sivtc-plus-skin .vehicle-box,
.sivtc-plus-skin .vehicle,
.sivtc-plus-skin #sivtc-vehicle-with-estimation > div > div {
	color: var(--sp-encre);
}

/* La carte elle-même : une par véhicule, toutes identiques. */
.sivtc-plus-skin .sivtc-vehicle,
.sivtc-plus-skin .vehicle-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px 24px;
	align-items: center;
	padding: 22px;
	margin: 0 0 16px;
	background: var(--sp-carte-haute);
	border: 1px solid var(--sp-bord);
	border-radius: var(--sp-rayon);
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.sivtc-plus-skin .sivtc-vehicle:hover,
.sivtc-plus-skin .vehicle-box:hover {
	border-color: var(--sp-or);
	box-shadow: 0 0 0 1px var(--sp-or), 0 14px 34px rgba(0, 0, 0, .45);
}

/* Nom de la gamme. */
.sivtc-plus-skin .sivtc-vehicle h2,
.sivtc-plus-skin .sivtc-vehicle h3,
.sivtc-plus-skin .vehicle-box h2,
.sivtc-plus-skin .vehicle-box h3 {
	font-family: 'Montserrat', 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sp-encre);
	margin: 0 0 10px;
}

/* Le prix : le repère visuel principal, en or, chiffres alignés. */
.sivtc-plus-skin .sivtc-price,
.sivtc-plus-skin .vehicle-price,
.sivtc-plus-skin [class*="price" i] {
	font-family: 'Montserrat', 'Inter', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sp-or);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* ==================================== 10. Icônes uniformes */

/*
 * Le défaut d'origine : SIVTC livre wifi.png en 69×53, bottle-of-water.png en
 * 20×51 et baby-seat.png en 36×51. Trois proportions différentes, donc des
 * lignes qui ne s'alignent jamais.
 *
 * On remplace chaque image par un dessin vectoriel au même gabarit — 22×22,
 * même épaisseur de trait, même couleur. `content` sur une <img> remplace le
 * fichier affiché sans toucher au HTML.
 */
.sivtc-plus-skin img[src*="wifi"],
.sivtc-plus-skin img[src*="bottle"],
.sivtc-plus-skin img[src*="baby"],
.sivtc-plus-skin img[src*="booster"],
.sivtc-plus-skin img[src*="child"] {
	width: var(--sp-icone) !important;
	height: var(--sp-icone) !important;
	min-width: var(--sp-icone);
	object-fit: contain;
	vertical-align: middle;
	flex: 0 0 auto;
}

.sivtc-plus-skin img[src*="wifi"] {
	content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 9a16 16 0 0 1 19 0'/%3E%3Cpath d='M6 13a10.5 10.5 0 0 1 12 0'/%3E%3Cpath d='M9.5 16.8a5 5 0 0 1 5 0'/%3E%3Ccircle cx='12' cy='20.5' r='1.2' fill='%23ffe08c' stroke='none'/%3E%3C/svg%3E");
}

.sivtc-plus-skin img[src*="bottle"] {
	content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v3l1.6 2.2A4 4 0 0 1 16.4 10v9a3 3 0 0 1-3 3h-2.8a3 3 0 0 1-3-3v-9a4 4 0 0 1 .8-2.4L10 5z'/%3E%3Cpath d='M7.6 13h8.8'/%3E%3C/svg%3E");
}

.sivtc-plus-skin img[src*="baby"] {
	content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='3'/%3E%3Cpath d='M5 21v-3a7 7 0 0 1 14 0v3'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E");
}

.sivtc-plus-skin img[src*="booster"],
.sivtc-plus-skin img[src*="child"] {
	content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe08c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19v-6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6'/%3E%3Cpath d='M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E");
}

/* La rangée d'équipements : même hauteur, même espacement, aucun décalage. */
.sivtc-plus-skin .sivtc-vehicle-features,
.sivtc-plus-skin .vehicle-features,
.sivtc-plus-skin [class*="equip" i] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Chaque équipement est une pastille : icône à gauche, libellé à droite,
 * hauteur fixe. C'est ce qui supprime le décalage entre les lignes.
 */
.sivtc-plus-skin .sivtc-vehicle-features > *,
.sivtc-plus-skin .vehicle-features > * {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 5px 12px 5px 8px;
	background: rgba(255, 224, 140, .10);
	border: 1px solid rgba(255, 224, 140, .28);
	border-radius: var(--sp-pilule);
	font-size: 13px;
	font-weight: 600;
	color: var(--sp-encre);
	white-space: nowrap;
}

/* Capacités (passagers, bagages) : même gabarit que les équipements. */
.sivtc-plus-skin .sivtc-vehicle i,
.sivtc-plus-skin .vehicle-box i {
	color: var(--sp-or);
	font-size: 16px;
	width: var(--sp-icone);
	text-align: center;
	flex: 0 0 auto;
}

/*
 * Photo de véhicule manquante : SIVTC sort une image cassée quand le fichier
 * n'est plus dans la médiathèque. On la masque plutôt que d'afficher une
 * vignette brisée. Remettre les photos reste préférable.
 */
.sivtc-plus-skin #sivtc-vehicle-with-estimation img:not([src*="."]) {
	display: none !important;
}

/* Bandeau des moyens de paiement : discret, aligné, jamais déformé. */
.sivtc-plus-skin img[src*="payment-methods"] {
	height: 26px;
	width: auto;
	max-width: 100%;
	opacity: .92;
	display: block;
	margin: 10px 0 0;
}

/* ============================ 10 bis. La page de résultats, en vrai */

/*
 * Ces classes sont celles que SIVTC produit réellement dans sa réponse — elles
 * ne portent pas les noms génériques auxquels on s'attendrait. Chaque règle
 * ci-dessous a été mesurée sur la page, pas déduite.
 *
 * Le défaut le plus grave : SIVTC écrit ces textes en NOIR. Sur le panneau
 * sombre, les noms de véhicule, le titre du résumé et toutes les adresses
 * tombaient à 1,1:1 — invisibles. Dix textes étaient concernés.
 */
.sivtc-plus-skin h2,
.sivtc-plus-skin h3,
.sivtc-plus-skin h4,
.sivtc-plus-skin .sivtc-resume-ride-heading,
.sivtc-plus-skin .sivtc-extra-info,
.sivtc-plus-skin .sivtc-extra-info *,
.sivtc-plus-skin .sivtc-each-vehicle-name,
.sivtc-plus-skin .sivtc-each-vehicle-name * {
	color: var(--sp-encre) !important;
}

/* La carte d'un véhicule. */
.sivtc-plus-skin .sivtc-each-vehicle-outer {
	background: var(--sp-carte-haute) !important;
	border: 1px solid var(--sp-bord) !important;
	border-radius: var(--sp-rayon) !important;
	padding: 22px !important;
	margin: 0 0 18px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sivtc-plus-skin .sivtc-each-vehicle-outer:hover {
	border-color: var(--sp-or) !important;
	box-shadow: 0 0 0 1px var(--sp-or), 0 14px 34px rgba(0, 0, 0, .45) !important;
}

.sivtc-plus-skin .sivtc-each-vehicle-name,
.sivtc-plus-skin .sivtc-each-vehicle-outer h2 {
	font-family: 'Montserrat', 'Inter', sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Le prix : le repère principal de la page. */
.sivtc-plus-skin .sivtc-each-vehicle-price,
.sivtc-plus-skin .sivtc-each-vehicle-price span {
	color: var(--sp-or) !important;
	font-family: 'Montserrat', 'Inter', sans-serif !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
}

/*
 * La rangée des équipements. SIVTC empile l'icône au-dessus de son libellé,
 * ce qui cassait la ligne en deux. Chaque équipement devient une pastille :
 * icône à gauche, texte à droite, hauteur fixe.
 */
.sivtc-plus-skin .sivtc-each-vehicle-seats-facality {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.sivtc-plus-skin .sivtc-each-vehicle-seats-facality > div {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	min-height: 34px;
	margin: 0 !important;
	padding: 5px 14px 5px 10px;
	background: rgba(255, 224, 140, .10);
	border: 1px solid rgba(255, 224, 140, .28);
	border-radius: var(--sp-pilule);
	white-space: nowrap;
}

.sivtc-plus-skin .sivtc-each-vehicle-seats-facality > div > label {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
	line-height: 1 !important;
	text-transform: uppercase;
	color: var(--sp-encre) !important;
}

.sivtc-plus-skin .sivtc-vehicle-equip {
	margin: 0 6px 0 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sp-encre-douce) !important;
	align-self: center;
}

/* Le titre du résumé, à droite. */
.sivtc-plus-skin .sivtc-resume-ride-heading {
	font-family: 'Montserrat', 'Inter', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sivtc-plus-skin .sivtc-extra-info {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* ================================== 11. Résumé de la course et carte */

.sivtc-plus-skin .sivtc-right-container,
.sivtc-plus-skin [class*="resume" i],
.sivtc-plus-skin [class*="summary" i] {
	background: var(--sp-carte-haute);
	border: 1px solid var(--sp-bord);
	border-radius: var(--sp-rayon);
	padding: 22px;
}

.sivtc-plus-skin .gm-style,
.sivtc-plus-skin [id*="map" i]:not([class*="marker" i]) {
	border-radius: var(--sp-rayon-champ);
	overflow: hidden;
}

/* Les lignes du résumé : libellé au-dessus, valeur lisible en dessous. */
.sivtc-plus-skin .sivtc-right-container p,
.sivtc-plus-skin .sivtc-right-container div {
	color: var(--sp-encre);
}

.sivtc-plus-skin .sivtc-right-container strong,
.sivtc-plus-skin .sivtc-right-container b {
	color: var(--sp-or);
	font-weight: 700;
}

/* ========================================================= 12. Messages */

.sivtc-plus-skin .alert,
.sivtc-plus-skin .sivtc-error,
.sivtc-plus-skin .error,
.sivtc-plus-skin .sivtc-form-feedback {
	padding: 14px 16px;
	margin: 0 0 18px;
	border: 1px solid rgba(255, 155, 155, .45);
	border-left: 4px solid var(--sp-alerte);
	border-radius: var(--sp-rayon-champ);
	background: rgba(255, 155, 155, .10);
	color: var(--sp-alerte);
	font-size: 15px;
	font-weight: 600;
}

.sivtc-plus-skin .alert-success {
	border-color: rgba(126, 224, 162, .45);
	border-left-color: var(--sp-succes);
	background: rgba(126, 224, 162, .10);
	color: var(--sp-succes);
}

/* ==================================== 12 bis. Fenêtres de dialogue */

/*
 * Les fenêtres d'avertissement de SIVTC (« Vous ne pouvez ajouter que 3
 * arrêts ») arrivent en BLANC avec un texte blanc : le message serait
 * illisible au moment précis où il compte. On les remet dans la matière
 * sombre du formulaire.
 */
.sivtc-plus-skin .modal-content,
.sivtc-plus-skin .modal-dialog,
.sivtc-plus-skin .modal-body,
.sivtc-plus-skin .modal-header,
.sivtc-plus-skin .modal-footer {
	background-color: var(--sp-carte) !important;
	color: var(--sp-encre) !important;
	border-color: var(--sp-bord) !important;
}

.sivtc-plus-skin .modal-content {
	border: 1px solid var(--sp-bord) !important;
	border-radius: var(--sp-rayon) !important;
	box-shadow: var(--sp-ombre);
	padding: 4px;
}

.sivtc-plus-skin .modal-body,
.sivtc-plus-skin .modal-header h1,
.sivtc-plus-skin .modal-header h2,
.sivtc-plus-skin .modal-header h3,
.sivtc-plus-skin .modal-title {
	color: var(--sp-encre) !important;
}

/* =============================== 13. Suggestions d'adresse de Google */

/* Google injecte cette liste en dehors du conteneur : on la stylise à part. */
.pac-container {
	background: #12121c;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
	margin-top: 6px;
	padding: 6px;
	font-family: 'Inter', sans-serif;
	z-index: 100000;
}

.pac-container .pac-item {
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	color: #d7dae3;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
	background: rgba(255, 224, 140, .16);
	color: #ffffff;
}

.pac-container .pac-item-query,
.pac-container .pac-matched {
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
}

.pac-container .pac-icon {
	filter: saturate(0) brightness(2.4);
}

.pac-container:after {
	background-color: transparent;
	height: 0;
	margin: 0;
	padding: 0;
}

/* ====================================== 14. Panier et page de commande */

body.sivtc-plus-checkout .woocommerce,
body.sivtc-plus-checkout .woocommerce-checkout,
body.sivtc-plus-checkout .woocommerce-cart-form {
	font-family: 'Inter', sans-serif;
	color: #ffffff;
}

body.sivtc-plus-checkout .woocommerce h1,
body.sivtc-plus-checkout .woocommerce h2,
body.sivtc-plus-checkout .woocommerce h3,
body.sivtc-plus-checkout .woocommerce label,
body.sivtc-plus-checkout .woocommerce th,
body.sivtc-plus-checkout .woocommerce td,
body.sivtc-plus-checkout .woocommerce p {
	color: #ffffff;
}

body.sivtc-plus-checkout .woocommerce label {
	font-weight: 600;
}

body.sivtc-plus-checkout .woocommerce input[type="text"],
body.sivtc-plus-checkout .woocommerce input[type="email"],
body.sivtc-plus-checkout .woocommerce input[type="tel"],
body.sivtc-plus-checkout .woocommerce input[type="password"],
body.sivtc-plus-checkout .woocommerce textarea,
body.sivtc-plus-checkout .woocommerce select,
body.sivtc-plus-checkout .select2-selection {
	min-height: 52px;
	padding: 13px 16px;
	background-color: #1a1a26 !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 10px !important;
	color: #ffffff !important;
	font-size: 16px !important;
}

body.sivtc-plus-checkout .woocommerce input:focus,
body.sivtc-plus-checkout .woocommerce select:focus,
body.sivtc-plus-checkout .woocommerce textarea:focus {
	outline: none;
	border-color: #ffe08c !important;
	box-shadow: 0 0 0 3px rgba(255, 224, 140, .28);
}

body.sivtc-plus-checkout .woocommerce .order_details,
body.sivtc-plus-checkout .woocommerce-checkout-review-order,
body.sivtc-plus-checkout #order_review,
body.sivtc-plus-checkout .woocommerce-info,
body.sivtc-plus-checkout .cart_totals {
	background: #12121c;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	padding: 22px;
	color: #ffffff;
}

body.sivtc-plus-checkout .woocommerce table.shop_table,
body.sivtc-plus-checkout .woocommerce table.shop_table th,
body.sivtc-plus-checkout .woocommerce table.shop_table td {
	background: transparent;
	border-color: rgba(255, 255, 255, .14);
	color: #ffffff;
}

body.sivtc-plus-checkout .woocommerce .order-total .amount,
body.sivtc-plus-checkout .woocommerce .amount {
	color: #ffe08c;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.sivtc-plus-checkout .woocommerce-info,
body.sivtc-plus-checkout .woocommerce-message {
	border-top-color: #ffe08c;
}

body.sivtc-plus-checkout .woocommerce-error {
	background: rgba(255, 155, 155, .10);
	border-top-color: #ff9b9b;
	color: #ff9b9b;
}

/* ========================================================= 15. Mobile */

@media (max-width: 782px) {
	.sivtc-plus-skin {
		padding: 18px 16px;
		border-radius: 12px;
	}

	.sivtc-plus-skin .sivtc-vehicle,
	.sivtc-plus-skin .vehicle-box {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 18px;
		text-align: left;
	}

	.sivtc-plus-skin .sivtc-price,
	.sivtc-plus-skin .vehicle-price {
		font-size: 26px;
	}

	.sivtc-plus-skin button,
	.sivtc-plus-skin input[type="submit"],
	.sivtc-plus-skin .btn {
		width: 100%;
	}

	.sivtc-plus-skin .nav-tabs > li > a {
		padding: 12px 14px;
		font-size: 13px;
	}

	/* Rien ne doit déborder : le visiteur ne scrolle jamais de côté. */
	.sivtc-plus-skin,
	.sivtc-plus-skin * {
		max-width: 100%;
	}

	.sivtc-plus-skin img {
		height: auto;
	}
}

/* =========================================== 16. Confort et impression */

@media (prefers-reduced-motion: reduce) {
	.sivtc-plus-skin *,
	body.sivtc-plus-checkout * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.sivtc-plus-skin {
		background: #fff;
		color: #000;
		box-shadow: none;
		border: 1px solid #000;
	}
}

/* ================== 17. La ligne d'adresse : plus rien ne recouvre le texte */

/*
 * Mesure sur la page, pas devine.
 *
 * Le conteneur de la ligne va de 479 a 930 px. Le champ, lui, commencait a
 * 519 et se terminait a 970 : il debordait de 40 px sur la droite. Le viseur
 * « me localiser », pose en absolu a gauche:405px, tombait donc a 884-930,
 * c'est-a-dire A L'INTERIEUR du champ, 40 px avant son bord. Et la croix
 * d'effacement, placee a droite:8%, atterrissait par-dessus.
 *
 * Resultat : l'adresse passait SOUS les deux icones. On ne lisait plus la fin
 * de « Aeroport Charles-de-Gaulle (CDG), Roissy-en-France, France ».
 *
 * Trois corrections, et une seule qui manque fait echouer les autres :
 *  1. le champ s'arrete la ou s'arrete sa ligne (largeur moins les 40 px de
 *     decalage), sinon rien ne peut etre « colle a droite » ;
 *  2. le viseur est epingle au bord droit ;
 *  3. le champ reserve 104 px a sa droite, pour que le texte s'arrete AVANT
 *     la croix. C'est cette reserve qui rend l'adresse lisible.
 */
.sivtc-plus-skin .sivtc-input-overlay-group {
	position: relative;
}

.sivtc-plus-skin .sivtc-input-overlay-group > input[type="text"] {
	width: calc(100% - 40px) !important;
	padding-right: 104px !important;
	text-overflow: ellipsis;
}

.sivtc-plus-skin .sivtc-input-overlay-group .tabs-address {
	left: auto !important;
	right: 0 !important;
}

/*
 * La croix d'effacement etait une image blanche sur une pastille GRISE
 * #DADADA : sur fond sombre, une bille grise sans signe lisible. On efface
 * l'image et le fond, et on dessine la croix en blanc, doree au survol.
 *
 * Aucune regle d'affichage ici : c'est SIVTC qui montre et cache la croix
 * selon que le champ est rempli ou vide. Forcer « display » la ferait
 * apparaitre sur un champ vide.
 */
.sivtc-plus-skin .close-address {
	left: auto !important;
	right: 54px !important;
	top: 50% !important;
	margin-top: -12px !important;
	width: 24px !important;
	height: 24px !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	text-align: center !important;
	line-height: 24px !important;
	cursor: pointer;
}

.sivtc-plus-skin .close-address img {
	display: none !important;
}

.sivtc-plus-skin .close-address::before {
	content: "\00d7";
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.sivtc-plus-skin .close-address:hover::before {
	color: var(--sp-or);
}

/* ============ 18. Resume de la course : une seule pastille pour toutes */

/*
 * Le resume aligne cinq lignes : depart, arrivee, date, kilometres, duree.
 * Les deux premieres portent un repere, les trois autres une icone ordinaire.
 * La regle generale des reperes leur donnait 46 px, aux autres 16 : deux
 * tailles sur la meme colonne, donc un decalage visible a chaque ligne.
 *
 * Ici les cinq icones recoivent exactement la meme pastille de 28 px, glyphe
 * noir sur or, et la valeur se range sous l'intitule, a l'aplomb du texte.
 * Une colonne, une taille, un alignement.
 */
.sivtc-plus-skin .sivtc-extra-info-wrapper .sivtc-info-labels {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 4px 0 !important;
}

.sivtc-plus-skin .sivtc-extra-info-wrapper .sivtc-info-labels > i.fa {
	flex: 0 0 28px !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--sp-or) !important;
	color: #000000 !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	box-shadow: none !important;
}

.sivtc-plus-skin .sivtc-extra-info-wrapper .sivtc-info-labels > label {
	margin: 0 !important;
	color: var(--sp-encre) !important;
	font-weight: 700 !important;
}

.sivtc-plus-skin .sivtc-extra-info-wrapper .sivtc-map-content > li {
	list-style: none !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
}

.sivtc-plus-skin .sivtc-extra-info-wrapper .sivtc-extra-info {
	display: block !important;
	padding-left: 38px !important;
}

/* ===== 19. Le vocabulaire du site : boutons, titre, ligne d'equipement */

/*
 * Les boutons du calculateur n'etaient pas ceux du site. Releve sur les
 * boutons reels de l'en-tete :
 *   action principale — fond #F0D38A, texte NOIR, rayon 20 px, Inter 800,
 *   18 px, interlettrage -0,4 px, 12/24 px, pas de majuscules, pas d'ombre ;
 *   action secondaire — degrade #1A1A28 vers #0B0B13, contour dore 2 px,
 *   texte dore, rayon 100 px, Montserrat 800 en majuscules.
 * Ce sont ces deux-la, au pixel pres, qui sont repris ici.
 */
.sivtc-plus-skin .btn,
.sivtc-plus-skin .btn-primary,
.sivtc-plus-skin .btn-success,
.sivtc-plus-skin .booking-button,
.sivtc-plus-skin .estimate_vehicles,
.sivtc-plus-skin button[type="submit"],
.sivtc-plus-skin input[type="submit"] {
	background: #f0d38a !important;
	background-image: none !important;
	color: #000000 !important;
	border: 0 !important;
	border-radius: 20px !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	text-transform: none !important;
	padding: 12px 24px !important;
	box-shadow: none !important;
	line-height: 1.3 !important;
	cursor: pointer;
}

.sivtc-plus-skin .btn:hover,
.sivtc-plus-skin .booking-button:hover,
.sivtc-plus-skin .estimate_vehicles:hover,
.sivtc-plus-skin input[type="submit"]:hover {
	background: #ffe08c !important;
}

/* « Retour » n'est pas une action principale : c'est le bouton a contour. */
.sivtc-plus-skin .sivtc-step-1-button {
	background-color: transparent !important;
	background-image: linear-gradient(#1a1a28, #0b0b13) !important;
	color: #ffe08c !important;
	border: 2px solid #ffe08c !important;
	border-radius: 100px !important;
	font-family: 'Montserrat', 'Inter', sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	text-transform: uppercase !important;
	padding: 9px 20px !important;
}

/* Le conteneur du bouton « Retour » ne porte rien lui-meme. */
.sivtc-plus-skin .sivtc-back-to-step-1 {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: flex-end !important;
}

/*
 * « Selectionner » s'affichait « Selectionne » : SIVTC est un <input>, dont
 * la largeur etait figee a 120 px et le debordement coupe. Un bouton se
 * dimensionne sur son texte, jamais l'inverse.
 */
.sivtc-plus-skin .btn,
.sivtc-plus-skin .booking-button,
.sivtc-plus-skin .estimate_vehicles,
.sivtc-plus-skin .sivtc-step-1-button,
.sivtc-plus-skin button[type="submit"],
.sivtc-plus-skin input[type="submit"] {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	overflow: visible !important;
	white-space: nowrap !important;
}

/* Le titre pose au-dessus du calculateur. */
.sivtc-plus-skin .sivtc-plus-titre {
	font-family: 'Montserrat', 'Inter', sans-serif !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	color: #ffffff !important;
	text-align: center !important;
	margin: 0 0 26px !important;
	line-height: 1.25 !important;
}

@media (max-width: 767px) {
	.sivtc-plus-skin .sivtc-plus-titre {
		font-size: 22px !important;
	}
}

/*
 * « Ce vehicule est equipe de » : le texte etait en GRIS #D7DAE3 sur fond
 * sombre, en majuscules, en 12 px, cale a gauche, et les pictogrammes
 * faisaient 22 x 20 px a cote d'un texte de 12 px — presque le double.
 *
 * Tout passe a la meme mesure : texte blanc de 14 px, pictogramme de 18 px,
 * la phrase sur sa propre ligne et centree, les pastilles centrees dessous.
 */
.sivtc-plus-skin .sivtc-each-vehicle-seats-facality {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	text-align: center !important;
}

.sivtc-plus-skin .sivtc-vehicle-equip {
	flex: 0 0 100% !important;
	width: 100% !important;
	display: block !important;
	text-align: center !important;
	text-transform: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	margin: 0 0 4px !important;
}

.sivtc-plus-skin .sivtc-each-vehicle-seats-facality > div {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(240, 211, 138, .12) !important;
	border: 1px solid rgba(240, 211, 138, .35) !important;
	border-radius: 100px !important;
	padding: 7px 14px !important;
	margin: 0 !important;
}

.sivtc-plus-skin .sivtc-each-vehicle-seats-facality > div img {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

.sivtc-plus-skin .sivtc-each-vehicle-seats-facality > div label {
	margin: 0 !important;
	text-transform: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 18px !important;
	white-space: nowrap;
}

/* Places et bagages : l'or du site, et la taille de leur propre texte. */
.sivtc-plus-skin .fa-users,
.sivtc-plus-skin .fa-suitcase {
	color: #f0d38a !important;
	font-size: 18px !important;
	line-height: 18px !important;
}

/*
 * Deux gris qui restaient : les options des listes deroulantes (#CCCCCC,
 * illisibles sur le fond clair que Chrome leur donne) et le message
 * « Vous ne pouvez ajouter que 3 arrets » (#637D92 sur fond sombre).
 */
.sivtc-plus-skin select option {
	background-color: #1a1a26 !important;
	color: #ffffff !important;
}

.sivtc-plus-skin .modal-content p,
.sivtc-plus-skin .modal-body p,
.sivtc-plus-skin .modal-content,
.sivtc-plus-skin .modal-body {
	color: #ffffff !important;
}

/* ===== 20. Reprendre la main sur les boutons qui sont des liens */

/*
 * Elementor pose « font-size: inherit !important » sur TOUS les <a> du site.
 * Le bouton « Estimation » etant un <a>, il heritait des 12 px de son
 * conteneur : un bouton principal ecrit en tout petit, alors que celui du
 * site fait 18 px.
 *
 * On ne desactive pas la regle d'Elementor — elle sert partout ailleurs. On
 * passe simplement au-dessus, sur ces boutons-la seulement, avec un selecteur
 * plus precis : body + le conteneur + deux classes de l'element.
 */
body .sivtc-plus-skin a.btn,
body .sivtc-plus-skin a.btn.estimate_vehicles,
body .sivtc-plus-skin a.estimate_vehicles,
body .sivtc-plus-skin a.booking-button {
	font-size: 18px !important;
	font-weight: 800 !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	letter-spacing: -0.4px !important;
	line-height: 1.3 !important;
	color: #000000 !important;
	text-decoration: none !important;
}

/* ===== 21. Le panneau doit contenir ce qu'il affiche */

/*
 * La page de resultats de SIVTC est batie sur des colonnes flottantes. Un
 * bloc qui ne contient que des flottants se replie a zero : le panneau
 * s'arretait donc juste sous le titre, et les resultats se dessinaient
 * EN DEHORS de lui. D'ou le rectangle vide qu'on voyait au-dessus des
 * vehicules.
 *
 * « flow-root » demande au panneau d'englober ses flottants. Une ligne, et
 * le devis redevient une seule carte, du titre jusqu'au dernier vehicule.
 */
.sivtc-plus-skin {
	display: flow-root !important;
}

/* ===== 22. Le telephone */

/*
 * Verifie dans un vrai cadre de 386 px, pas en imaginant : les media queries
 * y sont evaluees pour de bon. Ce qui n'allait pas, mesure sur place :
 *
 *  - la reserve de 104 px a droite du champ d'adresse, juste sur un ecran
 *    large, ne laissait que 121 px de texte sur un telephone : on lisait
 *    « Adresse de ... » au lieu de « Adresse de depart » ;
 *  - les listes Heure et Minute etaient si etroites qu'elles affichaient
 *    « M » au lieu de « Minute » ;
 *  - les trois lignes de garanties du vehicule etaient en 12 px ;
 *  - le prix et le bouton « Selectionner » restaient cales a droite alors
 *    que la carte, elle, passe en pleine largeur.
 */
@media (max-width: 767px) {

	.sivtc-plus-skin {
		padding: 22px 16px !important;
	}

	/* Des pastilles de 38 px : 16 px rendus au texte sur chaque ligne. */
	.sivtc-plus-skin .fa-map-marker,
	.sivtc-plus-skin .fa-flag,
	.sivtc-plus-skin .fa-crosshairs {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		font-size: 15px !important;
		border-radius: 10px !important;
	}

	.sivtc-plus-skin .sivtc-overlays,
	.sivtc-plus-skin .tabs-address {
		width: 38px !important;
	}

	/*
	 * La reserve de droite suit ce que le champ contient : 46 px quand il est
	 * vide — le viseur seul —, 76 px des qu'il y a une adresse, car la croix
	 * d'effacement apparait alors. Le texte du repere reste donc entier.
	 */
	.sivtc-plus-skin .sivtc-input-overlay-group > input[type="text"] {
		width: calc(100% - 40px) !important;
		padding-left: 12px !important;
		padding-right: 46px !important;
	}

	.sivtc-plus-skin .sivtc-input-overlay-group > input[type="text"]:not(:placeholder-shown) {
		padding-right: 76px !important;
	}

	.sivtc-plus-skin .close-address {
		right: 44px !important;
	}

	/* La date prend sa ligne, l'heure et la minute partagent la suivante. */
	.sivtc-plus-skin .sivtc-input-group > li.col-lg-5 {
		width: 100% !important;
	}

	.sivtc-plus-skin .sivtc-input-group > li.sivtc-cstm-time.col-lg-4 {
		width: 49% !important;
	}

	.sivtc-plus-skin .sivtc-input-group > li.sivtc-cstm-time.col-lg-3 {
		width: 49% !important;
		margin-left: 2% !important;
	}

	.sivtc-plus-skin .sivtc-input-group > li.sivtcDirectionSection {
		clear: both !important;
		margin-left: 0 !important;
	}

	.sivtc-plus-skin #sivtcPickupTime {
		width: 100% !important;
	}

	.sivtc-plus-skin #sivtcPickupHour {
		padding-left: 34px !important;
		padding-right: 30px !important;
	}

	.sivtc-plus-skin #sivtcPickupMinute {
		padding-left: 12px !important;
		padding-right: 30px !important;
	}

	/* Les colonnes du devis s'empilent. */
	.sivtc-plus-skin .sivtc-left-container,
	.sivtc-plus-skin .sivtc-right-container,
	.sivtc-plus-skin #sivtc-vehicle-with-estimation,
	.sivtc-plus-skin #sivtc-map-and-vehicle-estimation {
		width: 100% !important;
		float: none !important;
	}

	/* Une carte en pleine largeur se lit centree, pas calee a droite. */
	.sivtc-plus-skin .sivtc-each-vehicle-name,
	.sivtc-plus-skin .sivtc-each-vehicle-passanger-suitcase,
	.sivtc-plus-skin .sivtc-each-vehicle-price,
	.sivtc-plus-skin .sivtc-each-vehicle-price-book,
	.sivtc-plus-skin .sivtc-each-vehicle-imgs-seats {
		text-align: center !important;
	}

	.sivtc-plus-skin .sivtc-each-vehicle-price-book .booking-button {
		float: none !important;
		display: block !important;
		width: fit-content !important;
		margin: 10px auto 0 !important;
	}

	.sivtc-plus-skin .sivtc-each-vehicle-service {
		font-size: 15px !important;
	}
}

/* 12 px pour une garantie que le client doit lire, c'est trop peu partout. */
.sivtc-plus-skin .sivtc-each-vehicle-service {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/*
 * Sous 480 px, « Heure » s'affichait « Heu ». Le champ gardait 34 px a gauche
 * pour son horloge et 30 px a droite pour sa fleche : sur un 360 px, il ne
 * restait pas la place du mot. L'horloge, purement decorative, s'efface ; le
 * mot passe avant l'ornement.
 */
@media (max-width: 480px) {
	.sivtc-plus-skin li.sivtc-cstm-time .fa-clock-o {
		display: none !important;
	}

	.sivtc-plus-skin #sivtcPickupHour {
		padding-left: 12px !important;
		padding-right: 26px !important;
	}

	.sivtc-plus-skin #sivtcPickupMinute {
		padding-right: 26px !important;
	}

	.sivtc-plus-skin select {
		background-position: right 8px center !important;
	}
}

/*
 * Cibles tactiles. Une pastille de 38 px passe sous le minimum recommande
 * (44 px chez Apple, 48 chez Google) : le viseur « me localiser » etait
 * difficile a viser au pouce. Il passe a 44 x 44, et la reserve de droite
 * suit : 52 px champ vide, 82 px champ rempli.
 */
@media (max-width: 767px) {
	.sivtc-plus-skin .fa-map-marker,
	.sivtc-plus-skin .fa-flag,
	.sivtc-plus-skin .fa-crosshairs {
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
	}

	.sivtc-plus-skin .sivtc-overlays,
	.sivtc-plus-skin .tabs-address {
		width: 44px !important;
	}

	.sivtc-plus-skin .sivtc-input-overlay-group > input[type="text"] {
		padding-right: 52px !important;
	}

	.sivtc-plus-skin .sivtc-input-overlay-group > input[type="text"]:not(:placeholder-shown) {
		padding-right: 82px !important;
	}

	.sivtc-plus-skin .close-address {
		right: 50px !important;
		width: 28px !important;
		height: 28px !important;
		margin-top: -14px !important;
		line-height: 28px !important;
	}
}

/*
 * Sur un ecran de 360 px, « Aller/retour » demandait 115 px et n'en avait
 * que 108 : le mot etait rogne. La case prend sa ligne entiere.
 *
 * Le selecteur reprend les deux memes classes que la regle des colonnes de
 * l'heure, sans quoi celle-ci l'emporte et la ligne reste a 49 %.
 */
@media (max-width: 767px) {
	.sivtc-plus-skin .sivtc-input-group > li.sivtc-cstm-time.sivtcDirectionSection {
		width: 100% !important;
		clear: both !important;
		margin-left: 0 !important;
	}

	.sivtc-plus-skin .sivtc-return-direction {
		width: 100% !important;
	}
}

/* ===== 23. La page de commande : la regle marche dans les DEUX sens */

/*
 * Regle du site : sur fond sombre, ecriture blanche. Et donc, sur fond
 * clair, ecriture NOIRE. C'est le second sens qui manquait.
 *
 * Le bloc de paiement de WooCommerce a un fond lilas clair #DCD7E2 impose
 * par la passerelle. Notre feuille y posait du texte blanc : « Numero de la
 * carte », « Date d'expiration », « Code de carte », « Payez directement
 * dans le vehicule » tombaient a 1,6:1 — illisibles, et precisement sur
 * l'ecran ou le client sort sa carte.
 *
 * On ne repeint pas le bloc : on applique la regle. Fond clair, ecriture
 * noire (16:1). Les champs de saisie, eux, restent sombres : le texte y
 * redevient blanc, toujours la meme regle, dans l'autre sens.
 */
body.sivtc-plus-checkout .payment_box,
body.sivtc-plus-checkout .payment_box *:not(input):not(select):not(textarea):not(iframe) {
	color: #0b0b13 !important;
}

body.sivtc-plus-checkout .payment_box label,
body.sivtc-plus-checkout .payment_box p {
	font-weight: 600 !important;
}

body.sivtc-plus-checkout .payment_box .required {
	color: #a00000 !important;   /* 6,4:1 sur le lilas clair */
}

body.sivtc-plus-checkout .payment_box input,
body.sivtc-plus-checkout .payment_box select,
body.sivtc-plus-checkout .payment_box textarea {
	background-color: #1a1a26 !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
}

/*
 * L'asterisque des champs obligatoires est en #AA0000. Sur le lilas clair
 * il passe ; sur le fond sombre de la page il tombe a 2,6:1. Il s'eclaircit
 * partout SAUF dans le bloc de paiement.
 */
body.sivtc-plus-checkout .woocommerce-billing-fields .required,
body.sivtc-plus-checkout .woocommerce-additional-fields .required {
	color: #ff9b9b !important;
}

/*
 * Le selecteur de pays et les listes « Nombre de passagers / bagages » sont
 * des composants Select2 : ils apportent leurs propres couleurs, restees en
 * #444 sur fond sombre (1,8:1). Le champ ferme, la liste ouverte et le texte
 * d'invite sont repris ici.
 */
body.sivtc-plus-checkout .select2-selection {
	background-color: #1a1a26 !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
}

body.sivtc-plus-checkout .select2-selection,
body.sivtc-plus-checkout .select2-selection__rendered,
body.sivtc-plus-checkout .select2-selection__arrow b {
	color: #ffffff !important;
}

body.sivtc-plus-checkout .select2-selection__placeholder {
	color: #b9becb !important;
}

body.sivtc-plus-checkout .select2-dropdown {
	background: #1a1a26 !important;
	border-color: rgba(255, 255, 255, .18) !important;
}

body.sivtc-plus-checkout .select2-results__option {
	background: #1a1a26 !important;
	color: #ffffff !important;
}

body.sivtc-plus-checkout .select2-results__option--highlighted {
	background: #f0d38a !important;
	color: #000000 !important;
}

/* « (dont 5,00 EUR TVA10) » etait en gris #5A5A5A sur fond sombre. */
body.sivtc-plus-checkout small.includes_tax,
body.sivtc-plus-checkout .includes_tax,
body.sivtc-plus-checkout .includes_tax * {
	color: #d7dae3 !important;
}

/* Les boutons radio et les cases etaient BLEUS. Pas de bleu sur ce site. */
body.sivtc-plus-checkout input[type="radio"],
body.sivtc-plus-checkout input[type="checkbox"] {
	accent-color: #f0d38a !important;
}

/*
 * Le petit carre bleu du bandeau « Avez-vous un code promo ? » : c'est le
 * glyphe ::before de WooCommerce, en #1E85BE.
 */
body.sivtc-plus-checkout .woocommerce-info::before,
body.sivtc-plus-checkout .woocommerce-message::before {
	color: #f0d38a !important;
}

body.sivtc-plus-checkout .woocommerce-error::before {
	color: #ff9b9b !important;
}

body.sivtc-plus-checkout .woocommerce-info,
body.sivtc-plus-checkout .woocommerce-message {
	border-top-color: #f0d38a !important;
}

body.sivtc-plus-checkout .woocommerce-error {
	border-top-color: #ff9b9b !important;
}

/* « Cryptogramme » s'affichait « Cryptograr » : le champ coupait son texte. */
body.sivtc-plus-checkout [id*="cvc" i],
body.sivtc-plus-checkout [id*="cryptogram" i] {
	min-width: 140px !important;
	width: auto !important;
}

/* ===== 24. « Especes ou carte ? » sous Paiement a bord */

.sivtc-plus-skin .sp-paiement-bord,
body.sivtc-plus-checkout .sp-paiement-bord {
	margin: 12px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
}

body.sivtc-plus-checkout .sp-paiement-bord__titre {
	flex: 0 0 100%;
	margin: 0 0 2px !important;
	font-weight: 700 !important;
}

body.sivtc-plus-checkout .sp-paiement-bord__option {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-weight: 600 !important;
	cursor: pointer;
}

body.sivtc-plus-checkout .sp-paiement-bord__option input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	margin: 0 !important;
	accent-color: #f0d38a !important;
	background: transparent !important;
	border: 0 !important;
}

/* Sur un telephone, une ligne par choix : la cible tactile reste entiere. */
@media (max-width: 767px) {
	body.sivtc-plus-checkout .sp-paiement-bord {
		gap: 12px;
	}
	body.sivtc-plus-checkout .sp-paiement-bord__option {
		flex: 0 0 100%;
		min-height: 40px;
	}
}

/*
 * WordPress passe la description de la passerelle a wpautop : les deux
 * etiquettes se retrouvent enfermees dans un <p> genere, et l'espacement
 * declare sur le conteneur ne les atteint plus — « Carte bancaire (terminal
 * a bord)Especes » se touchaient. Ce <p>-la doit donc etre une rangee lui
 * aussi.
 */
body.sivtc-plus-checkout .sp-paiement-bord > p:not(.sp-paiement-bord__titre) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 22px !important;
	margin: 0 !important;
	flex: 1 1 100% !important;
}

@media (max-width: 767px) {
	body.sivtc-plus-checkout .sp-paiement-bord > p:not(.sp-paiement-bord__titre) {
		gap: 12px !important;
	}
	body.sivtc-plus-checkout .sp-paiement-bord > p:not(.sp-paiement-bord__titre) .sp-paiement-bord__option {
		flex: 0 0 100%;
	}
}

/* ===== 25. La page de commande sur un telephone */

/*
 * Mesure dans un cadre de 386 px. Ce qui debordait :
 *
 *  - le champ « Cryptogramme ». Ironie : c'est MA correction de bureau qui
 *    l'a cause. Je lui avais impose une largeur minimale de 140 px pour qu'il
 *    cesse d'ecrire « Cryptograr » ; sur un telephone, sa colonne ne fait que
 *    111 px, et le champ sortait de l'ecran a 401 px. Les champs de carte
 *    s'empilent donc en pleine largeur, et la largeur minimale saute ;
 *  - le recapitulatif de commande et la liste des moyens de paiement, plus
 *    larges que leur conteneur ;
 *  - les boutons radio des moyens de paiement faisaient 13 x 13 px.
 */
@media (max-width: 767px) {

	body.sivtc-plus-checkout #order_review,
	body.sivtc-plus-checkout #payment,
	body.sivtc-plus-checkout .wc_payment_methods,
	body.sivtc-plus-checkout .woocommerce-checkout-review-order-table,
	body.sivtc-plus-checkout .payment_box {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.sivtc-plus-checkout #order_review {
		padding: 14px !important;
	}

	body.sivtc-plus-checkout .woocommerce-checkout-review-order-table {
		width: 100% !important;
		table-layout: fixed !important;
	}

	body.sivtc-plus-checkout .woocommerce-checkout-review-order-table th,
	body.sivtc-plus-checkout .woocommerce-checkout-review-order-table td {
		padding: 10px 8px !important;
		word-break: break-word !important;
	}

	/* Les champs de carte s'empilent : la rangee a deux colonnes ne tient pas. */
	body.sivtc-plus-checkout .payment_box .form-row {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.sivtc-plus-checkout .payment_box input[type="text"],
	body.sivtc-plus-checkout .payment_box input[type="tel"],
	body.sivtc-plus-checkout .payment_box select,
	body.sivtc-plus-checkout [id*="cvc" i] {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Le moyen de paiement se choisit au pouce : 44 px de haut, pas 13. */
	body.sivtc-plus-checkout .wc_payment_method > label {
		display: inline-flex !important;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin: 0 !important;
	}

	body.sivtc-plus-checkout input.input-radio {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
		margin: 0 !important;
	}

	body.sivtc-plus-checkout small.includes_tax,
	body.sivtc-plus-checkout small.includes_tax * {
		font-size: 14px !important;
	}
}


/* ------------------------------------------------------------------
   26. Le numero de vol
   WooCommerce enferme le texte d aide dans un encadre bleu : couleur
   proscrite sur ce site, et 4,07:1 de contraste. Texte blanc sur le
   fond sombre, comme partout ailleurs.
------------------------------------------------------------------ */
body.sivtc-plus-checkout .form-row .description {
	background: transparent !important;
	color: #ffffff !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	padding: 6px 0 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	display: block !important;
	box-shadow: none !important;
}
body.sivtc-plus-checkout .form-row .description::before,
body.sivtc-plus-checkout .form-row .description::after {
	display: none !important;
}

/* Un numero de vol s ecrit en majuscules : AF1234. */
body.sivtc-plus-checkout .sp-vol input[type="text"] {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ─────────────────────────────────────────────────────────── 20. Calendrier
 *
 * Le sélecteur de date de SIVTC arrivait sans aucun fond : un panneau
 * transparent posé au-dessus de la page, chiffres en gris #777. Sur le fond
 * sombre du site, illisible — et c'est le champ sans lequel aucune course ne
 * part. On lui rend un panneau opaque, des chiffres blancs, et l'or de la
 * charte pour le jour choisi.
 */
.sivtc-plus-skin .datepicker {
	background: #12121C;
	border: 1px solid rgba(255, 224, 140, 0.35);
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
	z-index: 9999;
}

.sivtc-plus-skin .datepicker table {
	background: transparent;
	margin: 0;
}

.sivtc-plus-skin .datepicker th,
.sivtc-plus-skin .datepicker td {
	border: 0;
	border-radius: 8px;
	background: transparent;
}

.sivtc-plus-skin .datepicker th.datepicker-switch,
.sivtc-plus-skin .datepicker th.prev,
.sivtc-plus-skin .datepicker th.next,
.sivtc-plus-skin .datepicker tfoot th {
	color: #FFE08C;
	font-weight: 700;
}

.sivtc-plus-skin .datepicker th.dow {
	color: #FFFFFF;
	font-weight: 700;
}

.sivtc-plus-skin .datepicker td.day {
	color: #FFFFFF;
	font-weight: 600;
}

.sivtc-plus-skin .datepicker td.day.old,
.sivtc-plus-skin .datepicker td.day.new {
	color: rgba(255, 255, 255, 0.45);
}

.sivtc-plus-skin .datepicker td.day.disabled,
.sivtc-plus-skin .datepicker td.day.disabled:hover {
	color: rgba(255, 255, 255, 0.3);
	background: transparent;
	cursor: not-allowed;
}

.sivtc-plus-skin .datepicker td.day.today {
	box-shadow: inset 0 0 0 1px #FFE08C;
	color: #FFFFFF;
}

.sivtc-plus-skin .datepicker td.day:hover,
.sivtc-plus-skin .datepicker th.datepicker-switch:hover,
.sivtc-plus-skin .datepicker th.prev:hover,
.sivtc-plus-skin .datepicker th.next:hover,
.sivtc-plus-skin .datepicker tfoot th:hover,
.sivtc-plus-skin .datepicker span.month:hover,
.sivtc-plus-skin .datepicker span.year:hover {
	background: rgba(255, 224, 140, 0.18);
	color: #FFFFFF;
}

.sivtc-plus-skin .datepicker td.day.active,
.sivtc-plus-skin .datepicker td.day.active:hover,
.sivtc-plus-skin .datepicker span.month.active,
.sivtc-plus-skin .datepicker span.year.active {
	background: #FFE08C;
	color: #06060C;
	font-weight: 700;
}

.sivtc-plus-skin .datepicker span.month,
.sivtc-plus-skin .datepicker span.year {
	color: #FFFFFF;
	font-weight: 600;
	border-radius: 8px;
}


/* Le panneau qui porte le calendrier arrivait blanc : c'etait lui, le fond
 * clair sur lequel les chiffres gris disparaissaient. On l'assombrit, on lui
 * donne la bordure or de la charte, et on rend ses fleches et ses icones
 * visibles. */
.sivtc-plus-skin .bootstrap-datetimepicker-widget {
	background: #12121C;
	border: 1px solid rgba(255, 224, 140, 0.35);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
	color: #FFFFFF;
	padding: 6px;
	z-index: 9999;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
	border-top-color: #12121C;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
	border-top-color: rgba(255, 224, 140, 0.35);
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
	border-bottom-color: #12121C;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
	border-bottom-color: rgba(255, 224, 140, 0.35);
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget th,
.sivtc-plus-skin .bootstrap-datetimepicker-widget td {
	background: transparent;
	color: #FFFFFF;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget a[data-action],
.sivtc-plus-skin .bootstrap-datetimepicker-widget .glyphicon,
.sivtc-plus-skin .bootstrap-datetimepicker-widget .picker-switch {
	color: #FFE08C;
	font-weight: 700;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget a[data-action]:hover {
	background: rgba(255, 224, 140, 0.18);
	border-radius: 8px;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget td span {
	color: #FFFFFF;
	border-radius: 8px;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget td span:hover {
	background: rgba(255, 224, 140, 0.18);
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget td span.active {
	background: #FFE08C;
	color: #06060C;
}

.sivtc-plus-skin .bootstrap-datetimepicker-widget .timepicker-hour,
.sivtc-plus-skin .bootstrap-datetimepicker-widget .timepicker-minute {
	color: #FFFFFF;
	font-weight: 700;
}


/* La croix qui retire une course du panier ne faisait que 16 px de cote :
 * sur un telephone, on la rate une fois sur deux et on croit le panier
 * bloque. On lui donne une cible qu'un pouce atteint. */
body.sivtc-plus-checkout a.remove {
	width: 32px;
	height: 32px;
	line-height: 30px;
	font-size: 22px;
}


/* Mise a disposition : ce que la course comprend, dit en clair et en blanc. */
.sivtc-plus-skin .sp-horaire-note,
.sivtc-plus-skin .sp-horaire-km {
	color: #FFFFFF;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.45;
	margin-top: 8px;
}

.sivtc-plus-skin .sp-horaire-km {
	color: #FFE08C;
	margin-bottom: 10px;
}


/* Les deux onglets du calculateur : fond jaune ou gris clair, donc texte
 * NOIR. En blanc sur jaune, personne ne lit le nom de l'onglet actif. */
.sivtc-plus-skin .tabs-type span,
.sivtc-plus-skin .tabs-type span.active {
	color: #06060C;
	font-weight: 700;
}

.sivtc-plus-skin .sp-horaire-note {
	display: block;
	width: 100%;
	clear: both;
}


/* L'onglet actif etait ecrit en blanc sur son fond jaune : illisible.
 * La regle de SIVTC arrive apres la notre dans la page, d'ou le poids
 * supplementaire ici. Fond clair, donc ecriture noire, des deux cotes. */
.sivtc-plus-skin .sivtc-form-container .sivtc-left-container .tabs-type span,
.sivtc-plus-skin .sivtc-form-container .sivtc-left-container .tabs-type span.active,
.sivtc-plus-skin .sivtc-form-container .sivtc-left-container .tabs-type span:hover {
	color: #06060C !important;
	font-weight: 700;
}


/* Mise a disposition : la duree ne se choisit plus, elle se deduit des deux
 * heures. Le selecteur d'origine reste dans la page pour le moteur, mais il
 * ne s'affiche plus. */
.sivtc-plus-skin .sp-duree-cachee {
	display: none !important;
}

.sivtc-plus-skin .sp-fin-titre {
	color: #FFFFFF;
	font-weight: 700;
	margin: 4px 0 6px;
}

.sivtc-plus-skin .sp-horaire-note {
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
}

.sivtc-plus-skin .sp-horaire-note {
	font-size: 14px !important;
}


/* La ligne des kilometres s'affichait en 9 px : illisible. Fond sombre,
 * donc ecriture blanche, et une taille qui se lit sans lunettes. */
.sivtc-plus-skin .sp-horaire-km {
	color: #FFFFFF !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	margin: 6px 0 10px !important;
	text-align: right;
	white-space: normal !important;
	overflow-wrap: break-word;
}


/* L'heure de fin occupe desormais les memes colonnes que l'heure de depart :
 * une colonne vide de la largeur de la date, puis col-lg-4 et col-lg-3. Les
 * deux lignes tombent ainsi l'une sous l'autre, au pixel.
 *
 * Le champ d'origine tire son allure d'un identifiant (div#sivtcPickupHourContainer),
 * que l'on ne peut pas reutiliser. On la redit ici a l'identique. */
.sivtc-plus-skin #sp-fin-vide {
	height: 0;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.sivtc-plus-skin .sp-fin-champ {
	position: relative;
	width: 100%;
}

.sivtc-plus-skin .sp-fin-champ select {
	width: 100%;
	height: 52px;
	background-color: #1A1A26;
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	padding: 0 30px 0 0;
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image:
		linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #808080 50%),
		linear-gradient(135deg, #808080 50%, rgba(0, 0, 0, 0) 50%);
	background-position: calc(100% - 20px) 32px, calc(100% - 15px) 32px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat, no-repeat;
}

/* Le retrait exact des deux listes d'origine : l'heure laisse la place a sa
 * pastille, la minute commence au bord. */
.sivtc-plus-skin #sp-fin-h .sp-fin-champ select {
	padding-left: 25px;
	text-indent: 26px;
}

.sivtc-plus-skin #sp-fin-m .sp-fin-champ select {
	padding-left: 0;
	text-indent: 20px;
}

.sivtc-plus-skin .sp-fin-champ select option {
	background: #1A1A26;
	color: #FFFFFF;
}

.sivtc-plus-skin .sp-fin-champ i {
	position: absolute;
	left: 9px;
	top: 19px;
	color: #FFE08C;
	font-size: 16px;
	pointer-events: none;
}


/* Les deux onglets partagent le meme formulaire : hors mise a disposition,
 * le bloc de l'heure de fin n'a rien a y faire. */
.sivtc-plus-skin .sp-hors {
	display: none !important;
}


/* Les colonnes du formulaire flottent. Sans ce reliquat, leur liste tombe a
 * ZERO de hauteur : sur grand ecran cela ne se voyait pas, les champs
 * debordaient sans dommage, mais le conteneur coupe ce qui depasse, et sur
 * telephone il rognait donc tout le formulaire. Signale par Krim le
 * 2 oct. 2026. Ne pas retirer. */
.sivtc-plus-skin .sivtc-input-group::after,
.sivtc-plus-skin li.sivtc-cstm-time::after {
	content: "";
	display: table;
	clear: both;
}


/* Sur telephone tout s'empile : la colonne vide qui aligne l'heure de fin
 * sous l'heure de depart n'a plus de raison d'etre, et sa hauteur nulle
 * derangeait la mise en page. */
@media (max-width: 767px) {
	.sivtc-plus-skin #sp-fin-vide {
		display: none !important;
	}
}


/* Le cadre du formulaire rognait tout ce qui depasse. Sur grand ecran le
 * calendrier tenait dedans ; sur telephone il s'ouvrait derriere ce bord et
 * devenait invisible, donc inutilisable. La liste des champs contient
 * desormais ses propres colonnes (voir le reliquat plus haut), ce cadre n'a
 * donc plus besoin de rogner quoi que ce soit.
 * Accrocher le calendrier au corps de page a ete essaye : la bibliotheque
 * exige un parent positionne et refuse de s'ouvrir. Ne pas reessayer. */
.sivtc-plus-skin .sivtc-form-container {
	overflow: visible !important;
}


/* TELEPHONE — le calendrier. Il se placait hors de l'ecran, et restait donc
 * inatteignable dans les deux onglets. Plutot que de se battre avec son
 * calcul de position, qui depend de la hauteur du formulaire et de la place
 * disponible, on le fixe au milieu de l'ecran : il est alors toujours
 * visible, ou que soit le champ. Le halo sombre fait comprendre qu'on est
 * dans une fenetre, et l'ecran derriere reste lisible.
 * Verifie : aucun parent n'a de transform, donc position fixed se place bien
 * par rapport a l'ecran et non a un cadre. */
@media (max-width: 767px) {
	.sivtc-plus-skin .bootstrap-datetimepicker-widget,
	.sivtc-plus-skin .bootstrap-datetimepicker-widget.dropdown-menu {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
		margin: 0 !important;
		z-index: 2147483000 !important;
		width: auto !important;
		min-width: 280px !important;
		max-width: 92vw !important;
		max-height: 84vh !important;
		overflow-y: auto !important;
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.65) !important;
	}

	.sivtc-plus-skin .bootstrap-datetimepicker-widget::before,
	.sivtc-plus-skin .bootstrap-datetimepicker-widget::after {
		display: none !important;
	}
}


/* TELEPHONE — le choix de la date se fait avec le selecteur du telephone.
 * Le champ d'origine reste dans la page, masque : il garde le format
 * jour/mois/annee que SIVTC attend. Sur grand ecran, rien ne change :
 * le champ natif n'est meme pas cree. */
.sivtc-plus-skin .sp-date-native {
	display: none;
}

@media (max-width: 767px) {
	.sivtc-plus-skin .sp-date-porteur input[name$="pick_up_time"] {
		display: none !important;
	}

	.sivtc-plus-skin .sp-date-native {
		display: block !important;
		width: 100%;
		height: 52px;
		background-color: #1A1A26;
		color: #FFFFFF;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 10px;
		padding: 0 14px 0 40px;
		font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
		font-size: 16px;
		line-height: 1.4;
		box-shadow: none;
		appearance: none;
		-webkit-appearance: none;
	}

	.sivtc-plus-skin .sp-date-native::-webkit-calendar-picker-indicator {
		filter: invert(1);
		opacity: 0.85;
	}
}


/* Le panneau de diagnostic (?diag=1) : lisible sur fond noir, en blanc. */
#sp-diag {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483001;
	background: rgba(0, 0, 0, 0.88);
	color: #FFFFFF;
	font: 600 11px/1.4 Menlo, Consolas, monospace;
	white-space: pre-wrap;
	padding: 6px 10px;
	max-height: 30vh;
	overflow: auto;
	border-top: 2px solid #FFEC04;
	/* Le panneau se lit, il ne se touche pas : les doigts passent a travers,
	 * sinon il cachait les boutons du bas de l'ecran et les rendait inertes. */
	pointer-events: none;
}


/* TELEPHONE — la liste des vehicules.
 * Chaque carte de vehicule flotte, et leur liste ne les contient pas : sa
 * hauteur retombe a zero. Sur grand ecran, le panneau de droite (resume de
 * la course) est a cote, cela ne se voit pas. Sur telephone, il s'empile et
 * vient donc se poser PAR-DESSUS les cartes : les boutons « Selectionner »
 * se voient a travers lui mais le doigt touche le panneau, jamais le bouton.
 * Mesure dans un cadre de 390 px : sous le bouton, elementFromPoint rendait
 * .sivtc-right-container. On fait contenir ses flottants a la liste. */
.sivtc-plus-skin .sivtc-all-vehicle-outer,
.sivtc-plus-skin .sivtc-second-step-vehicle-map-container {
	display: flow-root;
}

.sivtc-plus-skin .sivtc-all-vehicle-outer::after,
.sivtc-plus-skin .sivtc-second-step-vehicle-map-container::after {
	content: "";
	display: table;
	clear: both;
}