/*
 * Habillage visuel de la page d'identification, de la liste des fiches, du detail d'une fiche, de
 * la liste des contacts et du tableau de bord, en adequation avec le nouveau site institutionnel
 * (https://technocarte-tlhm.getmax.website/).
 *
 * Portee : chargee UNIQUEMENT par index.php, fiche/liste_fiche.php, fiche/detail_fiche.php,
 * contact/liste_contact.php et dashboard/dashboard.php (voir le <link> ajoute dans l'entete de ces
 * cinq fichiers), apres image/Style.css et ext-js/resources/css/ext-all.css. Aucune autre page de
 * l'application n'est affectee. La mise en page (tableaux, grille ExtJS, recherche) n'est pas
 * modifiee : uniquement
 * les couleurs, la typographie et les bordures/rayons.
 *
 * Charte reprise du nouveau site :
 *   - bleu de marque      #0565BE  (liens, accents, en-tetes)
 *   - bleu marine fonce   #14334D  (pied de page / zones sombres du site)
 *   - texte neutre        #111111 / #525252
 *   - police des titres   'Unbounded' (google fonts, poids 500/600/700)
 *   - police du texte     pile system-ui (identique au corps du nouveau site)
 *   - rayon des cartes     8px, boutons pleinement arrondis
 */

:root {
	--tc-primary: #0565BE;
	--tc-primary-dark: #04508f;
	--tc-navy: #14334D;
	--tc-text: #111111;
	--tc-text-muted: #525252;
	--tc-border: rgba(0, 0, 0, 0.1);
	--tc-bg-tint: #EAF2FB;
	--tc-pink: #CF3C8D;
	--tc-pink-tint: #F5D6E7;
	--tc-radius: 8px;
	--tc-font-heading: 'Unbounded', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tc-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==================== Base ==================== */

body {
	font-family: var(--tc-font-body);
	background-color: #F7F9FB;
}

.texte,
.texte_input,
.select_input,
.texte_recherche,
.texte_disa {
	font-family: var(--tc-font-body);
}

/* ==================== Bandeau d'en-tete ==================== */

.bandeau_menu {
	font-family: var(--tc-font-heading);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}

#form_connexion .bandeau_menu,
#form_liste_fiche .bandeau_menu,
#form_liste_maintenance .bandeau_menu {
	border-bottom: 3px solid var(--tc-primary);
}

/* ==================== Liens ==================== */

.lien_action_sec,
.lien_action_princ,
#lib_commune,
.lien {
	font-family: var(--tc-font-body);
	color: var(--tc-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.lien_action_sec:hover,
.lien_action_princ:hover,
#lib_commune:hover,
.lien:hover {
	color: var(--tc-primary-dark);
}

/* ==================== Blocs de recherche / entetes de section ==================== */

.entete_bloc {
	font-family: var(--tc-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--tc-primary);
	background: var(--tc-bg-tint);
	border-color: var(--tc-border) !important;
}

.bordure_haut,
.bordure_bas,
.bordure_gauche,
.bordure_droite {
	border-color: var(--tc-border);
}

.fond_libelle {
	background-color: var(--tc-bg-tint) !important;
}

.fond_input {
	background-color: #F2F5F8;
}

/* ==================== Fiche detail : bandeau principal ==================== */

#id_detail,
.texte_recherche {
	font-family: var(--tc-font-body);
}

/* ==================== Onglets "Vista" (recherche fiche/rdv/document...) ==================== */

.onglet_vista {
	font-family: var(--tc-font-body);
	background: #F2F5F8;
	border-color: var(--tc-border);
	color: var(--tc-text-muted);
	border-radius: var(--tc-radius) var(--tc-radius) 0 0;
}

.onglet_vista.onglet_sel,
.onglet_vista:hover {
	background: #FFFFFF;
	border-color: var(--tc-primary);
	color: var(--tc-primary);
}

.onglet_vista.onglet_sel {
	border-top: 3px solid var(--tc-primary);
}

.onglet_extjs .onglet_vista.onglet_sel,
.onglet_extjs .onglet_vista:hover {
	background: #FFFFFF;
	border-color: var(--tc-primary);
}

/* ==================== Boutons texte (icones conservees telles quelles) ==================== */

.boutton_image,
.boutton_image2,
.boutton_image_div {
	font-family: var(--tc-font-body);
	color: var(--tc-text);
}

.boutton_image_select,
.boutton_image_div_select,
.boutton_image_div_select:hover,
.boutton_image_div_select_30 {
	color: var(--tc-primary);
}

/* Boutons/inputs classiques (recherche, formulaires) : forme pleinement arrondie comme le nouveau site */
input[type="submit"],
input[type="button"].bouton_pilule,
.bouton_site {
	font-family: var(--tc-font-body);
	border-radius: 999px;
	border: 1px solid var(--tc-primary);
	background: var(--tc-primary);
	color: #FFFFFF;
	padding: 6px 16px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

input[type="submit"]:hover,
input[type="button"].bouton_pilule:hover,
.bouton_site:hover {
	opacity: 0.9;
}

/* ==================== Grille ExtJS (liste des fiches) ==================== */

.x-panel {
	border-color: var(--tc-border);
	font-family: var(--tc-font-body);
}

/* les coins arrondis d'ExtJS 3 reposent sur des images de sprite ; on les neutralise au profit
   d'un simple border-radius CSS sur les conteneurs visibles */
.x-panel-tl, .x-panel-tr, .x-panel-bl, .x-panel-br,
.x-panel-tc, .x-panel-bc, .x-panel-ml, .x-panel-mr {
	background-image: none !important;
}

.x-panel-body {
	border-color: var(--tc-border) !important;
	border-radius: 0 0 var(--tc-radius) var(--tc-radius);
}

.x-grid3, .x-grid-panel {
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	overflow: hidden;
}

.x-grid3-header {
	background: var(--tc-bg-tint);
	border-bottom: 1px solid var(--tc-border);
}

.x-grid3-hd-row td {
	background: transparent;
}

.x-grid3-hd-inner {
	font-family: var(--tc-font-body);
	font-weight: 600;
	color: var(--tc-primary);
	text-transform: none;
	padding-top: 6px;
	padding-bottom: 6px;
}

.x-grid3-row {
	font-family: var(--tc-font-body);
	border-bottom: 1px solid #F0F0F0;
}

.x-grid3-row-alt {
	background-color: #FAFBFC;
}

.x-grid3-row-over {
	background-color: var(--tc-bg-tint) !important;
}

.x-grid3-row-selected {
	background-color: #DCEBFB !important;
	border-color: var(--tc-primary) !important;
}

.x-grid3-cell-inner, .x-grid3-hd-text {
	font-family: var(--tc-font-body);
}

.x-toolbar, .x-toolbar-ct {
	background: #FFFFFF;
	border-color: var(--tc-border);
	font-family: var(--tc-font-body);
}

.x-paging-info {
	font-family: var(--tc-font-body);
	color: var(--tc-text-muted);
}

.x-btn button {
	font-family: var(--tc-font-body);
}

/* Couleurs d'urgence de la grille : on garde les teintes fonctionnelles mais on adoucit le fond
   selectionne pour rester coherent avec la nouvelle palette (fond blanc + accent bleu uniquement) */
.x-grid3-row-selected.ligne_urgent__3,
.x-grid3-row-selected.ligne_urgent_1_3,
.x-grid3-row-selected.ligne_urgent_2_3,
.x-grid3-row-selected.ligne_urgent_3_3 {
	background-color: #DCEBFB !important;
}

/* ==================== Logo ==================== */

/* Remplacement du logo par celui du nouveau site, en CSS pur : content: url() substitue le rendu
   de l'<img> sans toucher au HTML/PHP (qui continue de referencer logo_technocarte.png). Le
   selecteur cible toute image se terminant par ce nom de fichier, quel que soit le chemin relatif
   (image/... ou ../image/...), donc valable sur les 3 pages. */
img[src$="logo_technocarte.png"] {
	content: url('logo_technocarte_site.webp');
	height: 52px;
	width: auto;
	max-width: 100%;
}

/* ==================== Icones du bandeau (liste des fiches) ==================== */

/* Bouton "Outils" (seul a etre rendu via une vraie balise <img>, fonction AfficheBouton) */
img[src$="btn_outils_telem.png"] {
	content: url('btn_outils_telem_site.svg');
	width: 44px;
	height: 44px;
}

/* Tous les autres boutons du bandeau sont rendus via un <div style="background-image:url(...)">
   (fonction AfficheBoutonDiv), avec un sprite 2 etats (actif / survol-inactif) selectionne par
   background-position (0% ou 100%). Les nouvelles icones etant a etat unique, on neutralise ce
   decoupage (background-size: 100% 100%, background-position: 0 0) : le bouton garde son icone
   quel que soit son etat, seul son libelle texte en dessous change de couleur au survol. */
div[style*="ogs.png"],
div[style*="btn_formation.png"],
div[style*="btn_stats.png"],
div[style*="btn_maintenance.png"],
div[style*="btn_supervision.png"],
div[style*="btn_rapport_parc.png"],
div[style*="btn_contact.png"],
div[style*="btn_planning.png"],
div[style*="btn_cloture.png"],
div[style*="btn_creer.png"],
div[style*="btn_exit.png"] {
	background-size: 100% 100% !important;
	background-position: 0 0 !important;
}

div[style*="ogs.png"]              { background-image: url('ogs_site.svg') !important; }
div[style*="btn_formation.png"]    { background-image: url('btn_formation_site.svg') !important; }
div[style*="btn_stats.png"]        { background-image: url('btn_stats_site.svg') !important; }
div[style*="btn_maintenance.png"]  { background-image: url('btn_maintenance_site.svg') !important; }
div[style*="btn_supervision.png"]  { background-image: url('btn_supervision_site.svg') !important; }
div[style*="btn_rapport_parc.png"] { background-image: url('btn_rapport_parc_site.svg') !important; }
div[style*="btn_contact.png"]      { background-image: url('btn_contact_site.svg') !important; }
div[style*="btn_planning.png"]     { background-image: url('btn_planning_site.svg') !important; }
div[style*="btn_cloture.png"]      { background-image: url('btn_cloture_site.svg') !important; }
div[style*="btn_creer.png"]        { background-image: url('btn_creer_site.svg') !important; }
div[style*="btn_exit.png"]         { background-image: url('btn_exit_site.svg') !important; }

/* Bouton "Rechercher" du panneau de recherche (liste des fiches) : meme traitement que le bouton
   "Creation" (fond bleu plein, dessin blanc), et suppression du cadre blanc (.bandeau_menu) qui
   l'entoure - reconnu via son gabarit inline unique (width:110px; height:78px). */
div[style*="btn_chercher.png"] {
	background-size: 100% 100% !important;
	background-position: 0 0 !important;
	background-image: url('btn_chercher_site.svg') !important;
}

div.bandeau_menu[style*="width:110px"] {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ==================== Icones du bandeau (detail d'une fiche) ==================== */

div[style*="btn_precedent.png"],
div[style*="btn_suivant.png"],
div[style*="add_link.png"],
div[style*="btn_mail.png"],
div[style*="btn_dupliquer.png"],
div[style*="btn_imprimer.png"],
div[style*="btn_quitter.png"] {
	background-size: 100% 100% !important;
	background-position: 0 0 !important;
}

div[style*="btn_precedent.png"] { background-image: url('btn_precedent_site.svg') !important; }
div[style*="btn_suivant.png"]   { background-image: url('btn_suivant_site.svg') !important; }
div[style*="add_link.png"]      { background-image: url('add_link_site.svg') !important; }
div[style*="btn_mail.png"]      { background-image: url('btn_mail_site.svg') !important; }
div[style*="btn_dupliquer.png"] { background-image: url('btn_dupliquer_site.svg') !important; }
div[style*="btn_imprimer.png"]  { background-image: url('btn_imprimer_site.svg') !important; }
div[style*="btn_quitter.png"]   { background-image: url('btn_quitter_site.svg') !important; }

/* ==================== Icones du bandeau (liste des contacts) ==================== */

div[style*="btn_dashboard.png"],
div[style*="btn_liste.png"],
div[style*="btn_licence.png"],
div[style*="btn_editer.png"] {
	background-size: 100% 100% !important;
	background-position: 0 0 !important;
}

div[style*="btn_dashboard.png"] { background-image: url('btn_dashboard_site.svg') !important; }
div[style*="btn_liste.png"]     { background-image: url('btn_liste_site.svg') !important; }
div[style*="btn_licence.png"]   { background-image: url('btn_licence_site.svg') !important; }
div[style*="btn_editer.png"]    { background-image: url('btn_editer_site.svg') !important; }

/* ==================== Entetes de bloc, contraste renforce (fiche detail + liste des contacts) ==================== */

body.page-contraste-bloc .entete_bloc {
	background: var(--tc-pink-tint) !important;
	color: var(--tc-primary) !important;
	font-weight: 700;
	border-bottom: 2px solid var(--tc-pink);
}

/* Bandeaux "ville" (nom de la commune, encart_commune.php - repris a l'identique sur
   fiche/detail_fiche.php et contact/liste_contact.php) et "interlocuteur" (createur de la fiche,
   detail_fiche.php) : fond bleu soutenu + texte blanc, plus marque que le reste des entetes de
   bloc. Reperes via les boutons d'agrandissement uniques a chacun de ces 2 encarts (non scopes a
   une page en particulier : #id_img_expand1 peut apparaitre sur les deux pages via l'encart
   partage, #id_img_expand2 n'existe que sur la fiche), car ce sont les seuls entete_bloc sans
   identifiant propre dans le HTML.
   Chacun de ces 2 blocs empile en realite DEUX elements portant la classe entete_bloc (un <td>
   exterieur et, dans sa table imbriquee, un <tr> interieur qui couvre visuellement le <td>) : on
   cible donc tout .entete_bloc contenant le bouton d'agrandissement, sans se limiter au <td>. */
.entete_bloc:has(#id_img_expand1),
.entete_bloc:has(#id_img_expand2) {
	background: var(--tc-primary) !important;
	border-bottom-color: var(--tc-primary-dark) !important;
}

.entete_bloc:has(#id_img_expand1),
.entete_bloc:has(#id_img_expand1) *,
.entete_bloc:has(#id_img_expand2),
.entete_bloc:has(#id_img_expand2) * {
	color: #FFFFFF !important;
}

/* ==================== Page d'identification (index.php) ==================== */

body {
	/* le formulaire de connexion est centre sur un fond legerement teinte plutot que blanc pur */
	background-color: #F7F9FB;
}

#form_connexion .fond_action {
	background-color: #F2F5F8;
}

/* liens de support en rouge fixe (couleur inline dans index.php) : recolores en bleu de marque
   pour rester coherents avec le nouveau site, qui n'utilise pas de rouge pour ses liens */
#form_connexion a[href*="documentation/Interface_de_suivi"],
#form_connexion a[href*="tv13.exe"],
#form_connexion a[href*="anydesk.exe"],
#form_connexion a[href*="rustdesk.exe"] {
	color: var(--tc-primary) !important;
}