/* Icône du calendrier (include/calendar/tc_calendar.php) : 16x16px nativement dans le GIF, sans mise à
   l'échelle - beaucoup trop petite comme cible tactile sur PC/tablette (voir mémoire projet). Cette icône
   est rendue directement sur la page principale (pas dans le popup du calendrier), donc gérée ici plutôt
   que dans include/calendar/calendar.css. */
img[id^="tcbtn_"] {
    width: 32px !important;
    height: 32px !important;
    cursor: pointer;
}
:root {
    /* Palette reprise du CSS réel de news.htd.fr (thème Astra) : #29244a en couleur principale (boutons,
       bandeaux, liens, fil d'ariane, footer), #3a3a3a au survol, texte gris doux #818085 plutôt que noir
       pur, #627fbe pour les liens sur fond sombre. Police 'Cabin' (comme sur news.htd.fr), pas de Google
       Fonts (demande explicite) : nom déclaré en premier si déjà installée sur le poste, repli sur la
       pile de polices système sinon. */
    --couleur-marine: #29244a;
    --couleur-accent: #29244a;
    --couleur-accent-fonce: #3a3a3a;
    --couleur-lien-sur-fond-sombre: #627fbe;
    --couleur-fond-clair: #ededee;
    /* Texte général en noir (plus lisible) - le gris doux de news.htd.fr est gardé pour les libellés
       secondaires (ex: "Date :" devant une valeur), voir --couleur-texte-secondaire */
    --couleur-texte: #1a1a1a;
    --couleur-texte-secondaire: #818085;
    --couleur-texte-clair: #a8a7ab;
    --couleur-bordure: #dddddd;
}
body {
    background-color: #FFFFFF;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--couleur-texte);
}
/* Tables de mise en page à largeur fixe (width="850"/"800" en HTML un peu partout) : fluides plutôt que
   figées, pour rester utilisable sans zoom/défilement horizontal sur tablette. Plafond remonté à 1100px
   (au lieu de 850px) : le matériel réel des commerciaux (PC/tablette Dell 15", voir memoire projet) a
   largement la place, et 850px était trop juste pour certaines lignes (date + kilométrage), provoquant
   des retours à la ligne au milieu des libellés. */
table[width="850"], table[width="800"] {
    width: 100%;
    max-width: 1100px;
}
/* Bandeau "info de connexion" en haut de chaque page (include/connecteur.php) : même largeur/centrage
   que les tables ci-dessus, pour que le texte aligné à droite tombe au même niveau que le bord droit
   des tables plutôt que collé au bord de l'écran */
.bandeau_connecteur {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: right;
}
/* Sélecteur de langue FR/EN (include/connecteur.php, voir include/i18n.php) */
.select_langue {
    margin-left: 6px;
}
/* Utilitaire : certaines lignes ont plusieurs libellés/champs côte à côte qui n'ont pas la place de
   tenir sur une largeur fluide réduite (le texte se met alors à retourner à la ligne au milieu d'un
   libellé) - au lieu de ça, on empile les cellules verticalement sous ce seuil (aligné sur le plafond
   de 1100px ci-dessus) */
@media (max-width: 1100px) {
    .empile_mobile, .empile_mobile > td {
        display: block;
        width: 100%;
    }
    .empile_mobile > td {
        padding-bottom: 6px;
    }
}
input[type="text"], input[type="password"], select, textarea {
    padding: 6px 8px;
    font-size: 14px;
    box-sizing: border-box;
}
/* Le textarea des commentaires a un attribut HTML cols="108" (taille fixe en caractères, calée à
   l'origine sur l'ancien plafond de table 850px) : depuis le passage à 1100px, il ne remplit plus la
   largeur disponible. width:100% l'étire pour occuper toute sa cellule quel que soit "cols". */
textarea {
    width: 100%;
}
.texte {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}
.texte10 {
    color: #000000; 
    font-size: 10px; 
    font-family: Verdana, Arial, Helvetica, sans-serif 
}
.smalltext {
    font-size: 8px;
    color: #CCCCCC;
} 
.titre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-variant: small-caps;
    color: #FFFFFF;
}
.bigtitre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: var(--couleur-marine);
}

a:link, a:visited {
    color: var(--couleur-marine);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--couleur-accent);
    text-decoration: underline;
}
.selected_field {    
    color: #c06;
    font-weight: bold;
}

.bandeau_bleu {
    background-color: var(--couleur-marine);
}

.bandeau_menu {
    background-color: var(--couleur-fond-clair);
    color: var(--couleur-texte);
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--couleur-accent);
}
/* Zones du menu commercial : infos client (bleu pâle) et infos commercial (vert pâle) */
.menu_zone_client, .menu_zone_commercial {
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}
.menu_zone_client {
    background-color: #DDEBF7;
}
/* Liens de bascule entre les deux menus (phplib/menu_reps.php) : fond vert de la section commerciale */
.lien_bascule_vert, .lien_bascule_bleu {
    padding: 2px 6px;
    border-radius: 3px;
}
.lien_bascule_vert {
    background-color: #E2F0D9;
}
.lien_bascule_bleu {
    background-color: #DDEBF7;
}
/* Espace neutre (fond du site) entre les deux zones du menu commercial */
.menu_separateur {
    width: 32px;
    background-color: #FFFFFF;
}
.menu_zone_commercial {
    background-color: #E2F0D9;
}
/* Logo HTD à gauche de la barre de menu (menu_reps.php, menu_admin.php), même hauteur que le menu */
.cellule_logo_menu {
    width: 1%;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
}
.logo_menu {
    height: 22px;
    vertical-align: middle;
}
/* Bouton "signaler un bug / suggestion" tout à droite du menu (menu_reps.php, menu_admin.php) */
.cellule_feedback {
    width: 1%;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 10px;
    text-align: right;
}
.lien_feedback {
    font-size: 26px;
    text-decoration: none !important;
}
/* Description des paramètres (phplib/liste_configuration.php) : petite police, multi-ligne */
.champ_description {
    font-size: 11px;
    width: 100%;
    resize: vertical;
    line-height: 1.2;
    padding: 1px 2px;
}
/* Tableaux d'administration en liste (phplib/liste_traductions.php) : lignes resserrées */
.tableau_compact td {
    padding: 2px 4px;
    vertical-align: middle;
}
/* En-tête de tableau (remplace l'ancien fond jaune bgcolor="#F9EB08") */
.entete_tableau {
    background-color: #5B7BBC;
    color: #FFFFFF;
}
.entete_tableau a:link, .entete_tableau a:visited {
    color: #FFFFFF;
}
/* Lien se connecter/se déconnecter (include/connecteur.php) : icône à gauche, léger fond arrondi au survol */
.lien_connexion {
    padding: 3px 8px;
    border-radius: 12px;
    transition: background-color 0.15s ease;
}
.lien_connexion:hover {
    background-color: var(--couleur-fond-clair);
    text-decoration: none !important;
}

a:visited.bandeau_menu {
    color: var(--couleur-texte);
}

a:hover.bandeau_menu {
    color: var(--couleur-accent-fonce);
    text-decoration: none;
}
a:active.bandeau_menu {
    color: var(--couleur-texte);
}

.texte { 
    color: #000000; 
    font-size: 11px; 
    font-family: Verdana, Arial, Helvetica, sans-serif
}
.smalltext {
    color: #999;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold
}
.soustitre { color: #ff9900; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold }
.quicklinks { color: #ff9900; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold }
.quicklinks02 { color: #000000; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold }
.valeur { color: #000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold }

.copyright { color: #999999; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif }




.inputgrey { 
    color: #000000; 
    font-size: 12px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    border: solid 1px #999999 
}
.inputviolet   { 
    color: #7f10aa; 
    font-size: 11px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    border-style: solid; border-width: 1px; 
    border-color: #7f10aa #dcbee7 #dcbee7 #7f10aa;
}
.submitblack {
    color: #FFFFFF; font-size: 12px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-weight: bold; background-color: #000000; 
    text-align: center; border: 2px cornflowerblue;     
    border-style: solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.submitviolet  { 
    color: #fff; 
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    background-color: #7f10aa; text-align: center; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #dcbee7 #44065c #44065c #dcbee7 ;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.submitgrey {
    font-size: 13px;
    font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    background-color: var(--couleur-accent);
    text-align: center;
    padding: 7px 16px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--couleur-accent-fonce);
    border-radius: 4px;
    cursor: pointer;
}
.submitgrey:hover {
    background-color: var(--couleur-accent-fonce);
}
/* Fiches des contacts clients (contacts.php) : 3 colonnes, fiches empilées verticalement dans chaque ligne */
.grille_contacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 850px;
    max-width: 100%;
    margin: 0 auto;
}
.fiche_contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    font-size: 13px;
}
.fiche_contact_edition {
    grid-column: 1 / -1;
}
.bloc_nouveau_contact {
    width: 850px;
    max-width: 100%;
    margin: 0 auto;
}
.fiche_titre {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #5B7BBC;
    padding: 5px 8px;
}
.fiche_champ {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fiche_champ_libelle {
    font-size: 12px;
    font-weight: bold;
    color: #2F4E8A;
}
.fiche_champ_valeur {
    font-size: 13px;
    color: #000000;
    word-break: break-word;
}
.fiche_actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.fiche_actions > a, .fiche_actions > form, .fiche_actions .submitgrey {
    margin: 0;
    white-space: nowrap;
}
.fiche_actions .submitgrey, .fiche_actions a.bouton_lien {
    padding: 4px 6px;
    font-size: 12px;
}
/* Champs d'un contact client (création et modification, contacts.php) : un champ par ligne, libellé au-dessus */
.champs_contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.champ_saisie {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.champ_libelle {
    font-size: 13px;
    font-weight: bold;
    color: #2F4E8A;
}
.champ_case {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.champs_actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
/* Total des reliquats affiché à droite de la liste déroulante du client (reliquats.php) */
.total_reliquats {
    margin-left: 16px;
    font-weight: bold;
    color: var(--couleur-marine);
}
/* Message d'attente pendant la génération du catalogue (export_catalogue.php) */
.message_patience {
    margin: 10px auto;
    width: 850px;
    max-width: 100%;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    color: var(--couleur-marine);
    background-color: #DDEBF7;
}
/* Montant total de tous les reliquats, en haut de reliquats_tous.php */
.total_reliquats_page {
    font-weight: bold;
    color: var(--couleur-marine);
    font-size: 14px;
}
/* Désignation des reliquats (reliquats.php) : police réduite pour tenir dans la colonne */
.texte_designation {
    font-size: 11px;
}
/* Lignes alternées des tableaux de données, mêmes couleurs que Top produits (liste_top_produits.php) */
.ligne_impaire td {
    background-color: #D9D9D9;
}
.ligne_paire td {
    background-color: #FBFBFB;
}
/* Lien stylé en bouton (ex. "Annuler" sur contacts.php) */
.bouton_lien {
    text-decoration: none;
    display: inline-block;
}
a.bouton_lien.submitgrey, a.bouton_lien.submitgrey:link, a.bouton_lien.submitgrey:visited, a.bouton_lien.submitgrey:hover {
    color: #FFFFFF;
    text-decoration: none;
}
/* Formulaire réduit à son bouton, placé en ligne dans une cellule de tableau (vadmin_qualifications.php) */
.formulaire_inline {
    display: inline;
}
/* Bouton "Sauvegarder" du login/e-mail dans la liste des commerciaux (vadmin.php) : hauteur minimale */
.submitgrey.bouton_compact {
    padding: 0 16px;
    line-height: 1.4;
}
.submitgrey_light {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    //font-weight: bold;
    background-color: #CCC;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.submitgrey_light:hover {
    background-color: #FFF;
}

.submityellow {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    //font-weight: bold;
    background-color: #ffffcc;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #333;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.submityellow:hover {
    background-color: #ffcc66;
    border-color: #ff9900;    
}
.table_black   {
    border-color: #333;
    border-style: solid;
    border-width: 1px;
}
.table_black_bot   {
    border-color: #333;
    border-width: 2px;
    border-bottom-style: solid;
}

.erreur {
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #F00;
}

.succes {
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #090;
}

/* Ajouts écrans KPI / dashboards (visites, ventes) */
.kpi_tile {
    background-color: #F5F5F5;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 8px 14px;
    text-align: center;
}
.kpi_value {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--couleur-marine);
}
.rank_badge {
    background-color: var(--couleur-accent);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    margin-top: 6px;
}
/* Couleur dédiée (pas var(--couleur-fond-clair)) : le fond de la carte du rapport alterne blanc/gris
   clair selon la parité du no de rapport (voir affiche_rapports.php/affiche_historique.php), et
   --couleur-fond-clair s'y confondait visuellement dans le cas du fond gris clair */
.bandeau_visite {
    background-color: #5cbaff52;
    border-left: 3px solid var(--couleur-accent);
    padding: 4px;
}
/* Libellés ("Date :", "Client :", "Ville :") en gris foncé, la valeur qui suit reste en texte normal
   (noir, voir --couleur-texte) - demande explicite du 2026-09-07 */
.bandeau_visite b {
    color: var(--couleur-texte-secondaire);
}
/* Même largeur fluide/plafonnée que les tables width="850"/"800" du reste de l'appli (voir plus haut) -
   sans ça ce cadre restait figé à 850px alors que les tables autour s'étirent jusqu'à 1100px */
.zone_filtre {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}
.ligne_filtre_suite {
    margin-top: 8px;
}
/* Filtres sur une seule ligne quand la place le permet, repli propre à la ligne sinon (plutôt qu'un
   découpage figé en 2 lignes) */
.ligne_filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
}
.case_annee_complete {
    text-align: center;
    margin: 4px 0;
}
.menu_actif {
    /* !important nécessaire : a:visited.bandeau_menu / a:hover.bandeau_menu (plus spécifiques, à cause
       du sélecteur d'élément + pseudo-classe) écraseraient sinon la couleur ici, notamment sur le lien
       de la page courante qui est presque toujours dans l'état :visited */
    font-weight: bold;
    color: #FFFFFF !important;
    background-color: var(--couleur-accent) !important;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
}
.grille_marques {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 12px;
    margin-bottom: 10px;
}
.grille_marques label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 2px 0;
}
.grille_marques label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}
/* Cadre "Choisir un client" : le bouton "+ Ajouter une note" est positionné en haut à droite du
   fieldset (position:relative sur le cadre, position:absolute sur le bouton) */
.cadre_choix_client {
    position: relative;
}
.bouton_note {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 12px;
    color: #FFFFFF !important;
    background-color: var(--couleur-accent);
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
}
.bouton_note:hover {
    background-color: var(--couleur-accent-fonce);
}
/* Logo HTD en en-tête (index.php, identification.php) : logo majoritairement sombre (texte noir/marine
   sur fond transparent), illisible sur le bandeau bleu marine - affiché sur une ligne à fond blanc
   juste au-dessus, pas à l'intérieur de .bandeau_bleu */
.ligne_logo {
    padding: 6px 4px;
}
.logo_bandeau {
    height: 36px;
}
/* Piège à robots (honeypot, voir identification.php) : masqué hors-écran plutôt qu'en display:none, que
   certains robots savent repérer et ignorer sciemment */
.champ_piege {
    position: absolute;
    left: -9999px;
    top: -9999px;
}