body {
	background: #fbfbfc;
}

/* Top Bar hors Help Scout */
.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	background: #fff;
	padding: 0 110px;
}

/* Taille du logo */
.topbar-logo img {
	height: 45px;
}

/* Boutons à droite */
.topbar-actions {
	display: flex;
	gap: 10px;
}

/* Personnalisation des boutons */
.topbar-btn {
	background: #000;
	color: #fff;
	font-size: 12px;
	padding: 10px 20px;
	border-radius: 3px;
	text-transform: uppercase;
	text-decoration: none;
}

.topbar-btn:hover {
	background: #dea807;
	color: #fff;
	text-decoration: none;
}

/* Home Page Title */

#docsSearch h1 {
	font-size: 32px;
	font-weight: 300;
	text-align: center;
	margin-top: .4em;
	font-family: "Open Sans", sans-serif;
	color: #fff;
	padding: 10px;
}

/* Conteneur principal */

.navbar .navbar-inner {
	background: #fff;
	/*background: #dea807; - Navigation en orange */
}

.navbar .navbar-inner .container-fluid {
	display: flex;
	align-items: center;
	margin: auto;
}

/* Menu au centre */
.navbar .nav {
	position: initial;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0;
	/*padding : 0 60px 0 60px;*/
	margin: 0;
}

/* Position de la liste */
.navbar .nav li {
	display: block;
	float: none;
}

/* Couleurs de la liste */
.navbar .nav li a, .navbar .nav li a:hover, .navbar .nav .active a, .navbar .nav .active a:hover {
	color : #000;
	padding : 5px 15px 5px;
}

/* Logo */
.navbar .brand {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* L'image du logo Help Scout */
a.brand > img {
	display: none;
	/*width: auto;*/
}

/* Flèche de la page active */
.navbar .nav .active .caret {
	border-bottom : 5px solid #000;
}

/* Home Page Search Bar Background */

#docsSearch {
	background: url("https://www.toncarton.com/wp-content/uploads/2026/04/header.png");
	background-size: cover;
	background-position : center;
	padding: 10em 0;
}
/* Search Input Box */

input.search-query {
	border-radius : 5px;
	border: none;
	font-size : 16px;
	line-height : 22px;
	width: 100%;
	height: 50px;
}
/* Home Page Category Title*/

.category-list h3 {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3em;
	font-family: "Open Sans", sans-serif;
}

/* Category Styles */

.category-list{
	display: grid;
	grid-template-columns : 1fr 1fr 1fr;
	justify-items: center;
	grid-gap: 20px;
}

.category-list .category {
	background-color: #fff;
	background-position: top 20px center !important;
	background-repeat: no-repeat !important;
	background-size: 80px auto !important;
	box-shadow: 0 2px 4px -5px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	min-height: 159px;
	padding: 100px 20px 15px;
	position: relative;
	transition: all 0.2s;
	width: 100%;
	margin: 0;
	text-decoration: none;
}

.category-list .category:hover {
	text-decoration: none;
	background: #f8f8f8;
}

.category-list .category p {
	color: #000;
	font-family: "Open Sans", sans-serif;
	font-weight: 100;
	font-size: 15px;
	letter-spacing: 0.25px;
}

.collection-category h2 {
    font-weight: bold;
    margin: 0 0 20px;
    text-align: center;
    padding-left: 0%;
    font-family: "Open Sans", sans-serif;
    /* text-transform: uppercase; */
    color: #000;
    font-size: 22px;
    letter-spacing: 1px;
}

/* Collection Titles  */
.collection-category h2 a {
    color: #000;
	font-weight: bold;
}

.collection-category h2 a:hover {
	text-decoration: none;
	border: none;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: "Open Sans",
    sans-serif;
    text-align: center;
	text-decoration: none;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}

.category-list.two-col .category {
	width: 100%;
}


/* Home Page Link Style */

#serp-dd .result a {
	font-weight: 500;
	letter-spacing: .25px;
	color: #000;
	margin-top: 15px;
	text-decoration: none;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 500;
}

#serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: #dea807;
	margin-top: 15px;
	text-decoration: none;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 500;
}

#serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: #dea807;
	background: transparent;
	margin-top: 15px;
	/* text-decoration: underline; */
	font-family: "Open Sans",
	sans-serif;
	font-weight: 500;
}
/* Home Page Search Button */
#searchBar {
	display: flex;
	text-align: center;
	padding: 2em 0;
	position: relative;
	width: 620px;
	margin: 0 110px;
	/* margin: 0 auto; - Pour centrer la barre de recherche */ 
}

#searchBar button {
	background: #dea807;
	font-weight: bold;
	border-color: transparent;
	color : #fff;
	border-radius: 4px;
	margin-left: 15px;
	text-shadow: none;
	position: initial;
}
#searchBar button:hover {
	background: #000;
	border-color: transparent;
	color: #fff;
}
input, button, select, textarea {
	font-family: "Open Sans",
	sans-serif,
	"Helvetica Neue",
	Helvetica,
	Arial,
	sans-serif;
}

/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/

/* Général) */
#category-121 {
	background-image: url(https://cdn-icons-png.flaticon.com/128/17951/17951940.png);
}

/* Offres & Avantages réservés*/
#category-123 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/6302/6302489.png);
}

/* Ressources utiles à l’onboarding */
#category-124 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/9359/9359123.png);
}

/* Apprendre à utiliser les Expéditions */
#category-5 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5470/5470304.png);
}

/* Gestion de la rupture de chargement */
#category-46 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/18814/18814572.png);
}

/* Dispatch intelligent */
#category-69 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/8228/8228701.png);
}

/* Les zones */
#category-41 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/18131/18131345.png);
}

/* Traçabilité par code-barre */
#category-40 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/11414/11414458.png);
}

/* Documents de transport */
#category-42 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/2541/2541979.png);
}

/* Exporter les données du module Courses */
#category-141 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/1260/1260079.png);
}

/* Module Courses */
#category-77 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5637/5637217.png);
}

/* Lettre de voiture (CMR) */
#category-76 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/10488/10488917.png);
}

/* Planification automatique */
#category-112 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5365/5365050.png);
}

/* Gérer les chauffeurs */
#category-108 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/8301/8301875.png);
}

/* Application mobile ToncartonDriver */
#category-10 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/1085/1085828.png);
}

/* Module Maintenance */
#category-106 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/6103/6103478.png);
}

/* Module Véhicules */
#category-110 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/7829/7829458.png);
}

/* Télématique embarquée */
#category-105 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/149/149435.png);
}

/* Gestion des accès utilisateurs */
#category-100 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/7426/7426564.png);
}

/* Accès clients privés */
#category-95 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/12299/12299422.png);
}

/* Portail client privé */
#category-94 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/394/394500.png);
}

/* Gestion des adresses et entrepôts */
#category-103 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5654/5654521.png);
}

/* Module Expéditions */
#category-73 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5470/5470304.png);
}

/* Les champs personnalisés */
#category-54 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/6737/6737279.png);
}

/* Les Tags */
#category-53 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/81/81275.png);
}

/* Preuves de livraison (POD) */
#category-74 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/3891/3891172.png);
}

/* Grilles tarifaires avec ChatGPT */
#category-133 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/1611/1611173.png);
}

/* Géolocalisation de la flotte */
#category-18 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/17577/17577696.png);
}

/* Sondes de température */
#category-17 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/3988/3988334.png);
}

/* Tracking d'objets */
#category-45 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/17579/17579316.png);
}

/* Beacon */
#category-43 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/4904/4904265.png);
}

/* EDI */
#category-116 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/4233/4233336.png);
}

/* Hello Harel */
#category-84 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/5627/5627023.png);
}

/* Module embarqué de réservation en ligne */
#category-89 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/11835/11835204.png);
}

/* Odoo */
#category-82 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/7475/7475891.png);
}

/* Slack */
#category-81 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/4316/4316411.png);
}

/* Références factures */
#category-80 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/1449/1449943.png);
}

/* Contacter le support */
#category-144 {
  background-image: url(https://cdn-icons-png.flaticon.com/128/7595/7595894.png);
}

/* Side Bar Styles */

#sidebar .nav-list a {
	display: inline-block;
	color: #000;
	font-size: 14px;
	padding: 6px 15px 6px 0;
	line-height: 20px;
	margin-left: 0;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}
#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
	font-weight: 500;
	color: #000;
	background: 0 0;
	text-shadow: none;
	/*text-decoration: underline;*/
	font-weight: bold;
}
#sidebar h3 {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	margin-bottom: 4px;
	font-family: "Open Sans",
	sans-serif;
}

/* Article Styles */

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
	margin: 0 30px .5em 0;
	font-family: "Open Sans",
	sans-serif;
	color: #000;
	font-weight: 700;
}
#fullArticle .printArticle {
	position: absolute;
	right: 46px;
	top: 40px;
}
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
	color: #000;
	font-family: "Open Sans",
	sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .01em;
}
#categoryHead .sort select {
	width: 150px;
	height: 24px;
	margin: 0;
	line-height: 24px;
	font-size: 13px;
	color: #7e8287;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
	color: #dea807;
}
#fullArticle h2 {
	font-size: 24px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 400;
	color: #000;
}
#fullArticle h3 {
	font-size: 20px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 700;
	color: #000;
}
#fullArticle h4 {
	font-size: 16px;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
	color: #000;
    font-style: italic;
}
.contentWrapper p {
	margin-top: -4px;
	word-wrap: break-word;
	font-family: "Open Sans",
	sans-serif;
	color: #7e8287;
	font-weight: 300;
	font-size: 16px;
	letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
	color: #7e8287;
	display: inline-block;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
	font-style: italic;
}

/* Page Footers */

footer p a {
	color: #7e8287;
	font-family: "Open Sans",
	sans-serif;
	font-weight: 300;
}

/* Contact Modal */

#contactModal h2, .abuse h2 {
	background: #fff;
	margin: 0;
	padding: 11px 0 10px 18px;
	font-size: 22px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	font-family: "Open Sans",
	sans-serif;
	color: #58A4B0;
	font-weight: 300;
}
#contactModal .control-label {
	width: 110px;
	font-family: "Open Sans",
	sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #7e8287;
}

.nav-collapse {
	z-index: 9999;
}

.navbar .btn-navbar {
	z-index: 10000;
}

/*
.btn {
    color: #fff;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #03d3d5;
    border-radius: 5px;
    border: 1px solid #b98389;
    font-size: 14px;
    padding: .5em;
    /* height: 50px; 
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
    color: #fff;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #8fa7c2;
    border-radius: 5px;
    border: 1px solid #9da39a;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
}

*/

.category-list {
    text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
	section.category-list .category {
		width: 48.2%;
	}
}
@media screen and (max-width: 760px) {
	section.category-list .category {
		box-sizing: border-box;
		margin: 0 0 20px;
		padding: 120px 20px 15px;
		width: 100%;
	}
}
/* RESPONSIVE */

@media (max-width: 768px) {
	.navbar .btn-navbar {
		margin-top: 16px;
		right: -10px;
	}
	.related {
		padding: 30px 25px 25px;
	}
	.related ul {
		margin-left: 0;
	}
	.related h3 {
		padding-left: 0;
	}
	.related ul>li a {
		margin-left: 0;
	}

	.topbar {
		padding: 10px 0px;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		height: auto;
	}

	.topbar-actions {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	#searchBar {
		flex-direction: column;
		width: 90%;
		gap: 10px;
		margin: 0 auto; 
	}

	#searchBar button {
		margin-left: 0;
		width: 100%;
	}

	input.search-query {
		width: 100%;
	}
}

@media (max-width: 480px) {
	#searchBar button {
		color: transparent;
		text-shadow: 0;
		background: transparent;
		border-radius: 0 5px 5px 0;
		border: 0;
		font-size: 18px;
		padding: 0 1.5em;
		height: 50px;
		/*position: absolute;*/
	}
	#searchBar button .icon-search {
		display: block;
		text-shadow: none;
		margin-top: 15px;
	}
	#searchBar button:hover .icon-search:hover {
		display: block;
		text-shadow: none;
		margin-top: 15px;
		background-color: transparent;
	}
}
@media (max-width: 480px) {
	#fullArticle .title, .contentWrapper h1 {
		font-size: 24px;
	}
	#fullArticle h2 {
		font-size: 20px;
	}
}