/* =========================================================================
   Charte graphique du backoffice.

   Reprend la presentation mise en place en frontoffice (historique.php et
   suivi des commandes) : listes en carte a coins arrondis, en-tete colore,
   survol de ligne, pastilles, boutons-liens et pagination.

   Toutes les classes sont prefixees .bo- et ne recouvrent aucune classe
   existante : les ecrans qui utilisent encore le rendu generique de
   utils/tableau.php (cell_1, cell_2, cell_titre) ne sont pas touches.
   Les ecrans sont repris un par un, devis-recherche.php sert de reference.

   Reperes :
     bleu backoffice   #5091f1     en-tete de liste, focus
     lien accentue     #1d6fd8
     texte             #111111  secondaire #6b7280  discret #9ca3af
     bordure carte     rgba(0,0,0,0.10)
     separateur ligne  rgba(0,0,0,0.07)
     bordure controle  #d1d5db
     rayons            carte 14px, controle 8/10px, pilule 999px
   ========================================================================= */


/* =========================================================================
   Encadrement de page : onglet du gabarit et cellule de contenu

   Ces trois classes viennent de images/styles.css (bordures noires, gris
   #DDDDDD). Elles sont redefinies ici, donc sur tous les ecrans : l'onglet
   porte le nom de la page et se fond dans la surface du contenu.
   charte.css est chargee apres styles.css dans header_interne.php.
   ========================================================================= */

/* Fond de page en gris tres clair : le cadre de contenu (#f4f5f7) et les
   cartes blanches se detachent l'un sur l'autre. La page de connexion garde
   son propre fond, body.bo-connexion est plus specifique. */
body {
	background-color: #eceff3;
}

.barre_horriz_sous_onglet {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

td.onglet_selection {
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #1d6fd8;
	background-color: #f4f5f7;
	padding: 7px 4px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
}

td.onglet {
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	background-color: transparent;
	padding: 7px 4px;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px 10px 0 0;
	transition: background-color 0.2s ease;
}

td.onglet:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

td.onglet a:link,
td.onglet a:visited,
td.onglet a:hover,
td.onglet a:active {
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	text-decoration: none;
}

td.onglet a:hover {
	color: #111111;
}

.cadre_contenu_onglet {
	background-color: #f4f5f7;
	border-top: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0 0 14px 14px;
}

/* Marges du contenu des ecrans repris a la charte */
.bo-page {
	padding: 18px 20px 24px 20px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	color: #111111;
}


/* =========================================================================
   Menu principal, colonne de gauche

   Meme remarque que pour l'onglet : td.menu et td.menu_sel viennent de
   styles.css (fond gris, bordures noires pointillees) et sont redefinies ici
   pour tous les ecrans. Le lien porte le remplissage, pour que toute la
   largeur de la ligne soit cliquable.
   ========================================================================= */

.bo-menu {
	margin-top: 6px;
}

td.menu,
td.menu_sel {
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13.5px;
	text-align: left;
	border: none;
	border-radius: 10px;
}

td.menu {
	padding: 0;
	background-color: transparent;
}

td.menu a:link,
td.menu a:visited,
td.menu a:hover,
td.menu a:active {
	display: block;
	padding: 9px 14px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	color: #374151;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

td.menu a:hover {
	color: #111111;
	background-color: rgba(0, 0, 0, 0.06);
}

td.menu_sel {
	padding: 9px 14px;
	font-weight: 500;
	color: #ffffff;
	background-color: #5091f1;
}

/* Derniere entree du menu : seule sortie de la session, mise a l'ecart */
td.menu.est-quitter {
	border-top: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 0;
	padding-top: 10px;
}

td.menu.est-quitter a:link,
td.menu.est-quitter a:visited,
td.menu.est-quitter a:hover,
td.menu.est-quitter a:active {
	color: #a32d2d;
}

td.menu.est-quitter a:hover {
	color: #a32d2d;
	background-color: #fcebeb;
}


/* =========================================================================
   En-tete de page : titre a gauche, recherche a droite
   ========================================================================= */

.bo-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.bo-titre {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: #111111;
}

/* Recherche et action principale, a droite du titre */
.bo-entete-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bo-recherche {
	position: relative;
	display: flex;
	align-items: center;
	width: 380px;
	max-width: 100%;
}

/* La loupe est dessinee en fond du champ plutot que posee en icone : elle ne
   depend pas du CDN FontAwesome, qui n'est pas joignable en local. */

/* La regle input[type="text"] de styles.css est plus specifique qu'une simple
   classe (bordure noire, padding 5px 8px, hauteur 32px) : le selecteur est
   volontairement plus fort ici pour reprendre la main. */
.bo-recherche input.bo-recherche-champ {
	width: 100%;
	height: 38px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	color: #111111;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 15px 15px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	padding: 9px 34px 9px 36px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bo-recherche input.bo-recherche-champ::placeholder {
	color: #9ca3af;
}

.bo-recherche input.bo-recherche-champ:focus {
	outline: none;
	border-color: #5091f1;
	box-shadow: 0 0 0 3px rgba(80, 145, 241, 0.22);
}

/* Affiche par le script des que le champ contient quelque chose */
.bo-recherche-vider {
	position: absolute;
	right: 9px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: #6b7280;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 17px;
	line-height: 1;
	background-color: rgba(0, 0, 0, 0.06);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bo-recherche-vider:hover {
	background-color: rgba(0, 0, 0, 0.14);
	color: #111111;
}


/* =========================================================================
   Messages de retour d'action
   ========================================================================= */

.bo-message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	border: 1px solid transparent;
	border-radius: 12px;
}

.bo-message i {
	font-size: 15px;
	line-height: 1.5;
}

.bo-message.est-ok {
	color: #2f6a10;
	background-color: #eef6e3;
	border-color: #c9e2a8;
}

.bo-message.est-erreur {
	color: #9b2c2c;
	background-color: #fceaea;
	border-color: #f3bcbc;
}


/* =========================================================================
   Liste en carte : c'est le conteneur qui porte le rayon et l'overflow,
   sinon l'en-tete et la derniere ligne debordent des coins.
   ========================================================================= */

.bo-barre-infos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
	color: #6b7280;
}

.bo-barre-infos strong {
	color: #111111;
	font-weight: 500;
}

/* Pendant le chargement d'une page ou d'une recherche */
.bo-chargement {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bo-liste-wrap {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Pour les listes trop larges pour la colonne de contenu */
.bo-liste-wrap.est-defilante {
	overflow-x: auto;
	overflow-y: hidden;
}

.bo-liste {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	color: #111111;
}

.bo-liste thead th {
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	color: #ffffff;
	background-color: #5091f1;
}

.bo-liste tbody td {
	padding: 10px 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	vertical-align: middle;
	background-color: transparent;
}

.bo-liste tbody tr:first-child td {
	border-top: none;
}

.bo-liste tbody tr {
	transition: background-color 0.2s ease;
}

.bo-liste tbody tr:hover td {
	background-color: rgba(0, 0, 0, 0.035);
}

.bo-liste td.bo-c-num,
.bo-liste td.bo-c-date {
	white-space: nowrap;
}

.bo-liste .bo-heure {
	color: #6b7280;
	font-size: 12.5px;
}

/* La coupure est portee par le span : une largeur maximale posee sur la
   cellule elle-meme est ignoree tant que le tableau est en largeurs auto. */
.bo-liste td.bo-c-texte span {
	display: inline-block;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.bo-liste td.bo-c-vide {
	color: #9ca3af;
}

.bo-liste td.bo-c-montant {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bo-liste td.bo-c-actions {
	text-align: right;
	white-space: nowrap;
}

a.bo-numero:link,
a.bo-numero:visited,
a.bo-numero:hover,
a.bo-numero:active {
	color: #1d6fd8;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

a.bo-numero:hover {
	text-decoration: underline;
}


/* =========================================================================
   Pastilles
   ========================================================================= */

.bo-badge {
	display: inline-block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	padding: 3px 10px;
	font-size: 12.5px;
	line-height: 1.5;
	border-radius: 999px;
	background-color: #f1efe8;
	color: #5f5e5a;
}

.bo-badge.est-gris   { background-color: #f1efe8; color: #5f5e5a; }
.bo-badge.est-bleu   { background-color: #e6f1fb; color: #185fa5; }
.bo-badge.est-ambre  { background-color: #faeeda; color: #854f0b; }
.bo-badge.est-vert   { background-color: #eaf3de; color: #3b6d11; }
.bo-badge.est-rouge  { background-color: #fcebeb; color: #a32d2d; }


/* =========================================================================
   Boutons-liens d'action
   ========================================================================= */

.bo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 5px;
	padding: 5px 11px;
	font-size: 13px;
	font-weight: 400;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

a.bo-btn:link,
a.bo-btn:visited,
a.bo-btn:hover,
a.bo-btn:active {
	color: #111111;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

.bo-btn:hover {
	border-color: #111111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

.bo-btn i {
	font-size: 13px;
}

/* Premier bouton de la cellule : pas de retrait a gauche */
.bo-c-actions .bo-btn:first-child {
	margin-left: 0;
}

.bo-btn.est-verte,
a.bo-btn.est-verte:link,
a.bo-btn.est-verte:visited,
a.bo-btn.est-verte:hover,
a.bo-btn.est-verte:active {
	color: #3b6d11;
	border-color: #97c459;
}

.bo-btn.est-verte:hover {
	border-color: #3b6d11;
}

.bo-btn.est-rouge,
a.bo-btn.est-rouge:link,
a.bo-btn.est-rouge:visited,
a.bo-btn.est-rouge:hover,
a.bo-btn.est-rouge:active {
	color: #a32d2d;
	border-color: #f09595;
}

.bo-btn.est-rouge:hover {
	border-color: #a32d2d;
}

/* Action principale de l'ecran, en haut a droite : ajout d'un enregistrement */
.bo-btn.est-primaire,
a.bo-btn.est-primaire:link,
a.bo-btn.est-primaire:visited,
a.bo-btn.est-primaire:hover,
a.bo-btn.est-primaire:active {
	color: #ffffff;
	font-weight: 500;
	background-color: #5091f1;
	border-color: #5091f1;
}

.bo-btn.est-primaire:hover {
	background-color: #1d6fd8;
	border-color: #1d6fd8;
}

/* Bouton reduit a son icone, le libelle passe en infobulle */
.bo-btn.est-icone {
	justify-content: center;
	width: 30px;
	padding: 5px 0;
}


/* =========================================================================
   Aucun resultat
   ========================================================================= */

.bo-vide {
	padding: 48px 20px;
	text-align: center;
	color: #6b7280;
	background-color: #ffffff;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 14px;
}

.bo-vide i {
	font-size: 28px;
	color: #9ca3af;
}

.bo-vide p {
	margin: 12px 0 0 0;
	font-size: 14px;
}

a.bo-lien-effacer:link,
a.bo-lien-effacer:visited,
a.bo-lien-effacer:hover,
a.bo-lien-effacer:active {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 400;
	color: #1d6fd8;
	text-decoration: underline;
}


/* =========================================================================
   Pagination
   ========================================================================= */

.bo-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 18px 0 4px 0;
}

.bo-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 36px;
	height: 36px;
	padding: 0 11px;
	box-sizing: border-box;
	font-size: 14px;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

a.bo-page-btn:link,
a.bo-page-btn:visited,
a.bo-page-btn:hover,
a.bo-page-btn:active {
	color: #111111;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

a.bo-page-btn:hover {
	border-color: #9ca3af;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	transform: translateY(-1px);
}

.bo-page-btn.est-active,
a.bo-page-btn.est-active:link,
a.bo-page-btn.est-active:visited,
a.bo-page-btn.est-active:hover,
a.bo-page-btn.est-active:active {
	color: #ffffff;
	font-weight: 500;
	background-color: #111111;
	border-color: #111111;
	box-shadow: none;
	transform: none;
	cursor: default;
}

/* Fleche precedent / suivant en bout de course */
.bo-page-btn.est-inactive {
	color: #9ca3af;
	background-color: rgba(0, 0, 0, 0.02);
	cursor: default;
}

.bo-page-points {
	min-width: 20px;
	text-align: center;
	color: #9ca3af;
}


/* =========================================================================
   Page de connexion (index.php)

   Meme presentation que la connexion du frontoffice (gui_clients/accueil.php) :
   carte blanche centree, labels au-dessus des champs, icones a gauche, oeil
   sur le mot de passe. Le fond est un degrade bleu backoffice avec des halos
   flous, dessine en CSS : aucune image a charger.
   ========================================================================= */

body.bo-connexion {
	margin: 0;
	min-height: 100vh;
	background-color: #0a1f3c;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
}

.bo-connexion-fond {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: linear-gradient(150deg, #0a1f3c 0%, #123563 50%, #1b5aa0 100%);
	z-index: 0;
}

/* Halos flous : la couleur du backoffice, diffusee */
.bo-connexion-fond span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
}

.bo-connexion-fond span:nth-child(1) {
	width: 520px;
	height: 520px;
	top: -140px;
	left: -90px;
	background-color: #5091f1;
	opacity: 0.55;
}

.bo-connexion-fond span:nth-child(2) {
	width: 460px;
	height: 460px;
	right: -80px;
	bottom: -150px;
	background-color: #1d6fd8;
	opacity: 0.50;
}

.bo-connexion-fond span:nth-child(3) {
	width: 380px;
	height: 380px;
	top: 42%;
	left: 52%;
	background-color: #7fb1f7;
	opacity: 0.32;
}

.bo-connexion-centre {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 100vh;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* Le bloc de connexion est pose au quart de la hauteur, pas au milieu : deux
   cales elastiques encadrent le contenu, celle du bas prenant trois parts pour
   une part en haut. Monter ou descendre le bloc revient a changer ce seul
   chiffre. Elles ne se compriment pas sous 30px, donc sur une fenetre basse le
   contenu deborde et la page defile au lieu d'etre rognee. */
.bo-connexion-centre::before {
	content: '';
	flex: 1 0 30px;
}

.bo-connexion-centre::after {
	content: '';
	flex: 3 0 30px;
}

.bo-connexion-carte {
	width: 340px;
	max-width: 100%;
	padding: 34px 32px 30px 32px;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
	box-sizing: border-box;
	text-align: center;
}

/* Reprise du W de la favicon, en pastille */
.bo-connexion-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	font-family: 'Times New Roman', Times, serif;
	font-size: 34px;
	line-height: 1;
	color: #ffffff;
	background-color: #5091f1;
	border-radius: 14px;
}

.bo-connexion-titre {
	font-size: 20px;
	font-weight: 500;
	color: #111111;
}

.bo-connexion-sous-titre {
	margin: 4px 0 22px 0;
	font-size: 13px;
	color: #6b7280;
}

.bo-champ-groupe {
	margin-bottom: 16px;
	text-align: left;
}

.bo-champ-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}

.bo-champ-wrapper {
	position: relative;
	display: block;
}

.bo-champ-icone {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	pointer-events: none;
}

/* Selecteur renforce : input[type="text"] de styles.css est plus specifique
   qu'une simple classe (bordure noire, padding 5px 8px, hauteur 32px). */
.bo-connexion-carte input.bo-champ {
	width: 100%;
	height: 40px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	color: #111111;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 10px 12px 10px 36px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bo-connexion-carte input.bo-champ.est-avec-oeil {
	padding-right: 38px;
}

.bo-connexion-carte input.bo-champ:focus {
	outline: none;
	border-color: #5091f1;
	box-shadow: 0 0 0 3px rgba(80, 145, 241, 0.22);
}

.bo-toggle-mdp {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	padding: 0;
	color: #6b7280;
	background: none;
	border: none;
	cursor: pointer;
}

.bo-toggle-mdp:hover {
	color: #111111;
}

.bo-bouton-connexion {
	width: 100%;
	margin-top: 6px;
	padding: 11px 20px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	background-color: #5091f1;
	border: 1px solid #5091f1;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.bo-bouton-connexion:hover {
	background-color: #1d6fd8;
	border-color: #1d6fd8;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

.bo-connexion-pied {
	margin-top: 22px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

.bo-connexion-signature {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12.5px;
	color: #26334a;
	font-weight: 500;
	background-color: #ffffff;
	border-radius: 8px;
}


/* =========================================================================
   Complements du rendu generique (utils/tableau.php)
   ========================================================================= */

/* Fleche de reordonnancement en bout de course : gardee en place pour que la
   colonne ne saute pas d'une ligne a l'autre, mais effacee. */
.bo-btn.est-inactive,
.bo-btn.est-inactive:hover {
	color: #d1d5db;
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	transform: none;
	cursor: default;
}

/* Le bouton d'effacement de la recherche est un lien quand la page n'a pas de
   script (rendu generique) : a:link de styles.css doit ceder la main. */
a.bo-recherche-vider:link,
a.bo-recherche-vider:visited,
a.bo-recherche-vider:hover,
a.bo-recherche-vider:active {
	font-size: 17px;
	font-weight: 400;
	color: #6b7280;
	text-decoration: none;
}

a.bo-recherche-vider:hover {
	color: #111111;
}

/* La recherche du rendu generique est un formulaire, pas une simple div */
form.bo-recherche {
	margin: 0;
}


/* =========================================================================
   Controles de formulaire

   Les regles de styles.css (bordure noire, hauteur 32px) sont reprises ici
   pour tous les ecrans. Les champs specifiques (recherche, connexion) ont des
   selecteurs plus specifiques et gardent la main.
   ========================================================================= */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input:not([type]),
select
{
	height: 36px;
	color: #111111;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 8px 10px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea
{
	color: #111111;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 8px 10px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus
{
	outline: none;
	border-color: #5091f1;
	box-shadow: 0 0 0 3px rgba(80, 145, 241, 0.22);
}

/* Boutons natifs des ecrans pas encore repris */
input[type="submit"]
{
	height: auto;
	padding: 8px 14px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	background-color: #5091f1;
	border: 1px solid #5091f1;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="submit"]:hover
{
	background-color: #1d6fd8;
	border-color: #1d6fd8;
}

input[type="button"]
{
	height: auto;
	padding: 8px 14px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #111111;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="button"]:hover
{
	border-color: #111111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}


/* =========================================================================
   Formulaires (ouvrir_formulaire / dessine_ligne_formulaire de utils/utils.php)
   ========================================================================= */

.bo-formulaire {
	max-width: 760px;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.bo-formulaire-titre {
	padding: 11px 18px;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	background-color: #5091f1;
}

.bo-formulaire-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bo-formulaire-table td {
	padding: 9px 18px;
	vertical-align: middle;
}

.bo-formulaire-table td.bo-f-label {
	width: 250px;
	color: #374151;
}

.bo-formulaire-table td.bo-f-separateur {
	padding: 0;
	height: 1px;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.bo-formulaire-table td.bo-f-separateur.est-titree {
	padding: 14px 18px 4px 18px;
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.bo-formulaire-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 18px;
	background-color: #fafbfc;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.bo-formulaire-actions .bo-btn {
	margin-left: 0;
}


/* =========================================================================
   Bandeaux de retour d'action de header_interne.php
   ========================================================================= */

div.ok,
div.alerte {
	max-width: 1200px;
	margin: 0 auto 12px auto;
	padding: 12px 16px;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 14px;
	border: 1px solid transparent;
	border-radius: 12px;
}

div.ok {
	color: #2f6a10;
	background-color: #eef6e3;
	border-color: #c9e2a8;
}

div.alerte {
	color: #9b2c2c;
	background-color: #fceaea;
	border-color: #f3bcbc;
}


/* =========================================================================
   Grille tarifaire (utils/tableau_prix.php)
   ========================================================================= */

.bo-liste.bo-grille tbody td {
	padding: 4px 6px;
}

.bo-liste.bo-grille td.bo-grille-hauteur {
	padding-left: 14px;
	font-size: 13px;
	color: #374151;
	white-space: nowrap;
}

.bo-grille input[type="text"] {
	width: 78px;
	height: 30px;
	padding: 4px 8px;
	font-size: 13px;
	text-align: right;
	border-radius: 6px;
}


/* =========================================================================
   Traductions statiques (traductions_statiques.php)
   ========================================================================= */

.bo-liste.bo-traductions td.bo-traduction-cle {
	font-size: 12.5px;
	color: #6b7280;
	word-break: break-all;
}

.bo-traductions input[type="text"] {
	width: 100%;
}


/* =========================================================================
   Sous-liste dans une cellule (valeurs d'une option, options-gestion.php)
   ========================================================================= */

.bo-sous-liste {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 2px 0;
}

.bo-sous-ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px 4px 10px;
	background-color: #f4f5f7;
	border-radius: 8px;
}

.bo-sous-ligne .bo-badge {
	flex-shrink: 0;
	padding: 1px 8px;
	font-size: 11.5px;
}

a.bo-sous-valeur:link,
a.bo-sous-valeur:visited,
a.bo-sous-valeur:hover,
a.bo-sous-valeur:active {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 400;
	color: #1d6fd8;
	text-decoration: none;
}

a.bo-sous-valeur:hover {
	text-decoration: underline;
}

.bo-sous-actions {
	display: flex;
	flex-shrink: 0;
	gap: 4px;
}

/* Boutons resserres : la cellule est etroite */
.bo-sous-actions .bo-btn.est-icone {
	width: 26px;
	margin-left: 0;
	padding: 3px 0;
	font-size: 12px;
}

.bo-sous-actions .bo-btn.est-icone i {
	font-size: 12px;
}

a.bo-sous-ajout:link,
a.bo-sous-ajout:visited,
a.bo-sous-ajout:hover,
a.bo-sous-ajout:active {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 3px 6px;
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	text-decoration: none;
}

a.bo-sous-ajout:hover {
	color: #111111;
}

/* Bloc pose au-dessus d'une liste : celle-ci apporte deja sa marge basse */
.bo-page.est-au-dessus {
	padding-bottom: 0;
}


/* =========================================================================
   Filtre d'ecran (propriete filtre_html de utils/tableau.php)
   ========================================================================= */

.bo-filtre {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

.bo-filtre select {
	height: 38px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
}


/* =========================================================================
   Voile de traitement

   Pose pendant une action longue (generation du PDF et envoi du mail lors de
   la validation d'un devis) : la page est verrouillee tant que le serveur n'a
   pas repondu. Meme principe que l'overlay du panier en frontoffice.
   ========================================================================= */

.bo-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.60);
}

.bo-overlay.est-visible {
	display: flex;
}

.bo-overlay p {
	margin: 0;
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-size: 15px;
	color: #ffffff;
	text-align: center;
}

.bo-overlay-spinner {
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	border: 5px solid rgba(255, 255, 255, 0.30);
	border-top-color: #5091f1;
	border-radius: 50%;
	animation: bo-tourne 0.8s linear infinite;
}

@keyframes bo-tourne {
	to { transform: rotate(360deg); }
}


/* =========================================================================
   En-tetes de colonne triables
   ========================================================================= */

.bo-liste thead th.est-a-droite {
	text-align: right;
}

a.bo-tri:link,
a.bo-tri:visited,
a.bo-tri:hover,
a.bo-tri:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
}

.bo-liste thead th.est-a-droite a.bo-tri {
	justify-content: flex-end;
	width: 100%;
}

/* Le sens n'est marque que sur la colonne active */
a.bo-tri i {
	font-size: 12px;
	opacity: 0.40;
	transition: opacity 0.2s ease;
}

a.bo-tri:hover i {
	opacity: 0.75;
}

a.bo-tri.est-actif i {
	opacity: 1;
}


/* Code client (le login du revendeur, repris de la gestion commerciale) */
.bo-liste td.bo-c-code {
	white-space: nowrap;
	font-size: 13px;
	color: #374151;
	letter-spacing: 0.3px;
}