/* Application de la police */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif; /* Application de la police */
}

				/*  ---ajouté le 18-04-2026 à 21h50 CONTAINER -AUGMENTER AVEC LE TEXTE ---- */
.conteneur-themes {
    height: auto;
    /* Optionnel : ajoutez un padding pour l'esthétique */
    padding: 10px;
}
				/*  ---ajouté le 18-04-2026 à 21h50 ---- */

/* Force tout le header à s'aligner sur une seule ligne */
/* Alignement et espacement identique pour tout le monde */
.main-header {
    display: flex !important;
    justify-content: justify !important; /* Aligne tous les blocs au centre, collés les uns aux autres */
    align-items: center !important;     /* Centre verticalement */
    gap: 22px !important;               /* FORCE un espace de 20px strictement ÉGAL entre les 6 éléments */
    flex-wrap: nowrap !important;       /* Interdit absolument le saut de ligne */
    padding: 2px 12px !important;       
    background-color: #fff;
    border-bottom: 1px solid #eee;
    height: 37px !important;            /* Maintient le menu très fin */
}

/* Style de l'icône Home verte */
.home-icon i {
    font-size: 14px !important;
    vertical-align: middle;
}

/* Style du champ de saisie de recherche */
#SaisieRechercheHtml {
    height: 24px !important;
    padding: 2px 7px !important;
    font-size: 12px !important;
    border: 1px solid #ccc;
    border-radius: 2px;
    outline: none;
    margin: 0 !important;
}

/* Style du bouton OK de recherche */
.search-btn {
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    font-weight: bold;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 !important;
}

/* Textes de l'horloge et du copyright */
#horloge, .header-right {
    font-size: 12px !important;
    white-space: nowrap !important;    /* Évite que le texte se coupe en deux */
    margin: 0 !important;
}

/* Zone des boutons tout à droite */
.top-right-menu {
    display: flex !important;
    gap: 4px !important;                /* Petit espace interne entre Support et Jobs */
}

.top-btn {
    padding: 2px 6px !important;
    font-size: 11px !important;
    text-decoration: none;
    white-space: nowrap !important;
}


.job-btn {
    background-color: #007bff;
    color: white;
    border-radius: 2px;
}

			/* 		CHERCHER	LE NOUVEAU BOUTON   'CHERCHER'	20-04-2026			 */
.mon-bouton {
    position: relative;
    z-index: 1000;
}
			/* 			LE NOUVEAU BOUTON   'CHERCHER'	20-04-2026			 */
			

						/*  ==========   BOUTON FLECHES   -HAUT et  BAS-	====================	*/
	/* Style pour les boutons haut et bas */
	.btn {
    padding: 7px 17px; /* Augmente l'espace intérieur (haut/bas gauche/droite) */
    font-size: 22px;    /* Agrandit le texte */
}

/* Agrandir et styliser les flèches */
.scroll-buttons, 
.scroll-buttons i {
    color: #003366; /* Couleur de la flèche */
.scroll-buttons svg {
    width: 72px !important;  /* Ajustez la taille */
    height: 72px !important; /* Ajustez la taille */
    transition: all 0.3s ease; /* Animation fluide */
}

		/* Classe à ajouter par le script (HOVER) pour changer la couleur en rouge */
.scroll-buttons.active-red,
.scroll-buttons.active-red svg {
    color: red !important;
    fill: red !important; /* Pour les SVG */
    stroke: red !important; /* Pour les contours SVG */
}

/* Optionnel : effet au survol de la souris */
.btnUp:hover, .btnDown:hover {
    background-color: #333; 		/* Vert un peu plus soutenu au survol   bleu--> #ffff00  */
}
					/*  ==========   BOUTON FLECHES   -HAUT et  BAS-	====================	*/