/* ------------------------------------------------------------------------------------------ */
/* Cadre de l'application : menu lateral a gauche + bandeau superieur                          */
/*   charge par theme.php seulement si pers_config/css/cadre.css existe (charge apres, avec   */
/*   les couleurs de l'application) : les applications sans ce fichier gardent l'ancien cadre */
/*   le HTML du theme ne change pas : nav#local-menu devient une colonne fixe a gauche, ses   */
/*   rubriques s'ouvrent en panneau a droite au survol ; le logo de l'en-tete passe en haut   */
/*   de la colonne. Utilisateur de niveau 1 sans droits : nav.out -> pas de colonne.          */
/*   Ecrans <= 800 px : menu "hamburger" d'origine.                                           */
/* ------------------------------------------------------------------------------------------ */

:root {
	--cadre-police:         Arial, Helvetica, sans-serif;
	--cadre-primaire:       #2F5F8A;		/* titres, survol du menu */
	--cadre-primaire-fonce: #234867;
	--cadre-primaire-clair: #E8EFF5;		/* survol des entrees de menu */
	--cadre-accent:         #7FB241;		/* repere de la rubrique survolee */
	--cadre-texte:          #2B2D30;
	--cadre-texte-2:        #5B5B5F;
	--cadre-bordure:        #E3E7EA;
	--cadre-fond:           #FFFFFF;
	--cadre-fond-page:      #F5F7F7;		/* zone centrale */
	--cadre-filet:          linear-gradient(90deg, #2F5F8A, #4C8FC2);	/* filet de 3 px en haut de l'ecran */
	--cadre-menu-largeur:   244px;
}

body { font-family: var(--cadre-police); background-color: var(--cadre-fond-page) !important; }
#content, #page { background-color: transparent !important; }
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--cadre-filet); }
#page { width: 100% !important; box-sizing: border-box; }

/* --- bandeau superieur -------------------------------------------------------------------- */
div#header.reduced, div#header.reduced.ser-big {
	height: 64px; margin-top: 3px; background: var(--cadre-fond); border-bottom: 1px solid var(--cadre-bordure); box-sizing: border-box; padding: 0 20px;
}
#header-wrapper { align-items: center; height: 100%; gap: 16px; }
div#header.reduced .logo, div#header.reduced.ser-big .logo {
	background-position: left center !important; background-size: contain !important; background-repeat: no-repeat !important;	/* image : config_pers.css ou pers_config/css/cadre.css */
	width: 180px; height: 40px; margin: 0;
}
div#header #header-left, div#header.ser-big #header-left { height: auto; }
div#header:not(.ser-big) #header-left.icons-small, div#header.ser-big #header-left.icons-big { margin: 0 0 0 auto; }
#header .user { opacity: 1; gap: 8px; padding-right: 0; align-items: center; }
#header .user a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border: 1px solid var(--cadre-bordure); border-radius: 10px; background: #FFFFFF; transition: border-color 0.15s, background-color 0.15s;
}
#header .user a:hover   { border-color: var(--cadre-primaire); background: var(--cadre-primaire-clair); }
#header .user a img     { width: 20px; height: 20px; opacity: 0.75; }
#header .user a:hover img { opacity: 1; }
/* --- pas d'ascenseur general : seule la zone de contenu defile (entre bandeau et pied de page) --- */
html:has(div#header), body:has(div#header) { height: 100%; overflow: hidden; }
body:has(div#header) #content {
	position: fixed; top: 67px; left: 0; right: 0; bottom: 26px; width: auto !important; margin: 0; padding: 0 20px 20px; box-sizing: border-box;	/* main.css : width 100% */
	overflow: auto; overscroll-behavior: contain;
}
body:has(div#header) #blank { display: none; }

/* boutons du bandeau (aide, administration, deconnexion) et pastille utilisateur */
.cadre-entete { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cadre-bouton {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--cadre-bordure); border-radius: 10px;
	background: #FFFFFF; color: #3F4144; text-decoration: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.cadre-bouton:hover { border-color: var(--cadre-primaire); background: var(--cadre-primaire-clair); color: var(--cadre-primaire-fonce); }
.cadre-deconnexion:hover { border-color: #D7192C; background: #FCE8EA; color: #A3122A; }
/* plein ecran : bouton (theme.php), icone agrandir / reduire selon l'etat */
button.cadre-bouton { padding: 0; cursor: pointer; font: inherit; }
.cadre-plein-ecran[hidden] { display: none; }
.cadre-plein-ecran .cadre-pe-sortir, .cadre-plein-ecran.cadre-pe-actif .cadre-pe-entrer { display: none; }
.cadre-plein-ecran.cadre-pe-actif .cadre-pe-sortir { display: block; }
.cadre-plein-ecran.cadre-pe-actif { border-color: var(--cadre-primaire); background: var(--cadre-primaire-clair); color: var(--cadre-primaire-fonce); }
.cadre-utilisateur {
	display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 1px solid var(--cadre-bordure); border-radius: 24px;
	background: #FFFFFF; color: var(--cadre-texte); text-decoration: none;
}
.cadre-utilisateur:hover { border-color: var(--cadre-primaire); }
.cadre-initiales { width: 32px; height: 32px; border-radius: 50%; background: var(--cadre-primaire-clair); color: var(--cadre-primaire-fonce); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cadre-identite  { display: flex; flex-direction: column; line-height: 1.2; }
.cadre-nom       { font-size: 13px; font-weight: 600; }
.cadre-role      { font-size: 11px; color: var(--cadre-texte-2); }
@media all and (max-width: 640px) { .cadre-identite { display: none; } .cadre-utilisateur { padding-right: 4px; } }

/* --- menu : style commun (colonne et menu mobile) ----------------------------------------- */
nav#local-menu {
	background-color: var(--cadre-fond) !important; border: 0 !important; border-radius: 0 !important; color: var(--cadre-texte); font-family: var(--cadre-police);
}
nav#local-menu ul { margin: 0; padding: 0; list-style: none; }
nav#local-menu > ul > li > a, nav#local-menu > ul > li > a:link, nav#local-menu > ul > li > a:visited {
	display: flex; align-items: center; justify-content: space-between; line-height: 1.3; min-height: 40px; padding: 0 14px; border-radius: 10px;
	color: #3F4144 !important; font-family: var(--cadre-police); font-size: 13px; font-weight: 500; letter-spacing: 0; text-decoration: none; cursor: default;
}
nav#local-menu > ul > li > a > span { border: 0 !important; display: inline-block; text-transform: lowercase; }	/* titres en capitales dans la base */
nav#local-menu > ul > li > a > span::first-letter { text-transform: uppercase; }
nav#local-menu > ul > li:hover > a { font-weight: 600; }
nav#local-menu > ul > li > a::after { content: "\203A"; font-size: 18px; font-weight: 400; color: #9AA3AA; }
nav#local-menu > ul > li:hover > a { background: var(--cadre-primaire-clair) !important; color: var(--cadre-primaire-fonce) !important; box-shadow: inset 3px 0 0 var(--cadre-accent); }
nav#local-menu > ul > li:hover > a::after { color: var(--cadre-primaire); }

nav#local-menu > ul > li > div, nav#local-menu > ul > li > div ul > li > div {
	background-color: var(--cadre-fond) !important; border: 1px solid var(--cadre-bordure) !important; border-radius: 12px !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); padding: 6px 0; width: 250px; box-sizing: border-box;
}
nav#local-menu > ul > li > div ul > li > a, nav#local-menu > ul > li > div ul > li > div ul > li > a {
	display: block; color: #3F4144 !important; font-family: var(--cadre-police); font-size: 13px; font-weight: 400;
	text-transform: none; letter-spacing: 0; padding: 7px 16px; line-height: 1.35; text-decoration: none;
}
nav#local-menu > ul > li > div ul > li:hover > a, nav#local-menu > ul > li > div ul > li > div ul > li:hover > a {
	background-color: var(--cadre-primaire-clair) !important; color: var(--cadre-primaire-fonce) !important;
}
nav#local-menu li.sep, nav#local-menu > ul > li > div ul > li.sep { border-top: 1px solid var(--cadre-bordure) !important; margin-top: 4px; padding-top: 4px; }
nav#local-menu > ul > li > div ul > li.sous_menu { background-position: 94% 50%; }
nav#local-menu > ul > li > div ul > li.sous_menu > a.sous_menu span { font-style: normal; padding-left: 0; }
nav#local-menu li.sous_menu:hover { background-color: var(--cadre-primaire-clair) !important; }
/* pictos (images/pictos/menu.svg, choisis dans l'administration des menus) : trait gris, couleur du cadre au survol */
nav#local-menu svg.cadre-picto { flex: none; width: 18px; height: 18px; color: #6B7075; transition: color 0.15s; }
nav#local-menu > ul > li > a > svg.cadre-picto { margin-right: 12px; }
nav#local-menu > ul > li > a:has(> svg.cadre-picto) > span { flex: 1; }
nav#local-menu > ul > li:hover > a > svg.cadre-picto { color: var(--cadre-primaire); }
nav#local-menu > ul > li > div ul > li > a:has(> svg.cadre-picto) { display: flex; align-items: center; gap: 10px; }
nav#local-menu > ul > li > div ul > li > a > svg.cadre-picto { width: 16px; height: 16px; color: #8A9095; }
nav#local-menu > ul > li > div ul > li:hover > a > svg.cadre-picto { color: var(--cadre-primaire); }
/* panneau dont certains liens ont un picto : les autres alignes sur le texte */
nav#local-menu > ul > li > div ul:has(> li > a > svg.cadre-picto) > li > a:not(:has(> svg.cadre-picto)) > span { display: inline-block; padding-left: 26px; }

/* --- grand ecran : colonne fixe a gauche ---------------------------------------------------- */
@media all and (min-width: 801px) {
	#page:has(nav#local-menu:not(.out)) { padding-left: var(--cadre-menu-largeur); }
	#page:has(nav#local-menu:not(.out)) div#header .logo {
		position: fixed; top: 15px; left: 22px; z-index: 31; width: calc(var(--cadre-menu-largeur) - 44px); height: 44px; cursor: pointer;
	}

	nav#local-menu {
		position: fixed !important; top: 3px; left: 0 !important; bottom: 0; z-index: 30; width: var(--cadre-menu-largeur) !important; max-width: none !important;
		padding: 76px 12px 16px; box-sizing: border-box; border-right: 1px solid var(--cadre-bordure) !important; overflow: visible;
	}
	nav#local-menu > ul { width: auto !important; display: flex; flex-direction: column; gap: 2px; }
	nav#local-menu > ul > li { display: block !important; position: relative; }

	/* panneau des liens d'une rubrique : a droite de la colonne */
	nav#local-menu > ul > li > div {
		position: absolute !important; left: calc(100% + 6px) !important; top: -6px !important; right: auto !important; margin: 0 !important;
		display: none; opacity: 1; visibility: visible; z-index: 40;
	}
	nav#local-menu > ul > li:hover > div { display: block; }
	nav#local-menu > ul > li > div ul { width: auto !important; }
	nav#local-menu > ul > li > div ul > li { display: block; position: relative; }
	/* sous-menu : a droite du panneau */
	nav#local-menu > ul > li > div ul > li > div {
		position: absolute !important; left: calc(100% - 4px) !important; top: -7px !important; right: auto !important; margin: 0 !important;
		display: none; opacity: 1; visibility: visible; z-index: 41;
	}
	nav#local-menu > ul > li > div ul > li:hover > div { display: block; }
	/* pont invisible entre la rubrique et son panneau (le survol ne se perd pas) */
	nav#local-menu > ul > li > div::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }

	body:has(nav#local-menu:not(.out)) #footer { left: var(--cadre-menu-largeur); width: calc(100% - var(--cadre-menu-largeur)); }
	body:has(nav#local-menu:not(.out)) #content { left: var(--cadre-menu-largeur); }

	/* --- menu reduit (bouton en bas de la colonne, html.menu-replie) : colonne de pictos, panneaux inchanges au survol --- */
	nav#local-menu, body:has(nav#local-menu:not(.out)) #content, body:has(nav#local-menu:not(.out)) #footer, #cadre-replier { transition: width 0.2s, left 0.2s; }
	#cadre-replier {
		position: fixed; left: 12px; bottom: 14px; z-index: 31; display: flex; align-items: center; gap: 10px; width: calc(var(--cadre-menu-largeur) - 24px); height: 38px;
		padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 10px; background: none; overflow: hidden; white-space: nowrap;
		font-family: var(--cadre-police); font-size: 12.5px; color: #6B7075; cursor: pointer;
	}
	#cadre-replier:hover { background: var(--cadre-primaire-clair); color: var(--cadre-primaire-fonce); }
	#cadre-replier svg { flex: none; }
	#cadre-replier .cadre-replier-fleche { transition: transform 0.2s; transform-origin: 15px 12px; }
	body:has(nav#local-menu.out) #cadre-replier { display: none; }

	html.menu-replie { --cadre-menu-largeur: 68px; }
	html.menu-replie #cadre-replier { justify-content: center; padding: 0; }
	html.menu-replie #cadre-replier span { display: none; }
	html.menu-replie #cadre-replier .cadre-replier-fleche { transform: scaleX(-1); }
	html.menu-replie nav#local-menu { padding-left: 10px; padding-right: 10px; }
	html.menu-replie nav#local-menu > ul > li > a { justify-content: center; padding: 0; }
	html.menu-replie nav#local-menu > ul > li > a::after { display: none; }
	html.menu-replie nav#local-menu > ul > li > a > svg.cadre-picto { margin: 0; }
	html.menu-replie nav#local-menu > ul > li > a:has(> svg.cadre-picto) > span { display: none; }
	html.menu-replie nav#local-menu > ul > li > a:not(:has(> svg.cadre-picto)) > span { width: 1ch; overflow: hidden; white-space: nowrap; }	/* sans picto : initiale */
	/* nom de la rubrique en tete de son panneau */
	html.menu-replie nav#local-menu > ul > li > div > ul::before {
		content: attr(data-titre); display: block; padding: 4px 16px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--cadre-bordure);
		font-family: var(--cadre-police); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #8A9095;
	}
	/* logo : seulement le symbole (partie gauche de l'image) */
	html.menu-replie #page:has(nav#local-menu:not(.out)) div#header .logo { left: 14px; width: 40px; background-size: auto 100% !important; }
}
/* petit ecran : menu deroulant habituel, pas de bouton */
@media all and (max-width: 800px) { #cadre-replier { display: none; } }

/* --- bandeau de titre des pages ------------------------------------------------------------ */
/* titre de la page : reste en haut de la zone de contenu quand elle defile */
#sub_bandeau, #sub_bandeau_left, #sub_bandeau_right, #sub_bandeau_retour {
	background: var(--cadre-fond-page) !important; position: sticky; top: 0; z-index: 20;
}
#sub_bandeau { height: auto; min-height: 44px; margin: 0 auto 10px; padding-top: 12px; border-bottom: 1px solid var(--cadre-bordure); display: flow-root; }
#sub_bandeau_left, #sub_bandeau_right, #sub_bandeau_retour { padding-top: 12px; }
#sub_bandeau p {
	margin: 0; padding: 8px 0 10px; display: inline-block;
	font-family: var(--cadre-police); font-size: 18px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	text-align: left; text-shadow: none; color: var(--cadre-primaire) !important;
	background: linear-gradient(var(--cadre-primaire), var(--cadre-primaire)) left bottom / 44px 3px no-repeat;
}
#sub_bandeau_left, #sub_bandeau_right { height: auto; min-height: 31px; }
#sub_bandeau_left p, #sub_bandeau_right p { color: var(--cadre-texte-2) !important; font-family: var(--cadre-police); }
#sub_bandeau_retour p { color: var(--cadre-primaire) !important; }

/* --- pied de page -------------------------------------------------------------------------- */
#footer-wrapper {
	width: 100% !important; background-color: rgba(255, 255, 255, 0.94) !important; border: 0 !important; border-top: 1px solid var(--cadre-bordure) !important;
	border-radius: 0 !important; color: var(--cadre-texte-2);
}
#footer-wrapper div, #footer-wrapper a { color: var(--cadre-texte-2) !important; font-family: var(--cadre-police); font-size: 12px; text-decoration: none; }
#footer-wrapper a:hover { color: var(--cadre-primaire) !important; }
#footer-wrapper:has(> .cadre-appli) { display: flex; align-items: center; gap: 16px; padding: 0 20px; box-sizing: border-box; }	/* aligne sur la zone de contenu */
#footer-wrapper > .cadre-appli { display: flex; align-items: center; gap: 10px; }
#footer-wrapper > .cadre-appli > span:first-child { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
#footer-wrapper .cadre-annee { padding: 1px 9px; border: 1px solid var(--cadre-bordure); border-radius: 999px; background: #FFFFFF; font-weight: 600; color: var(--cadre-primaire-fonce); }
#footer-wrapper:has(> .cadre-appli) > div:last-child { margin-left: auto; }

/* --- listes d'heures du pointage, placees au point du clic (pointage.js : e.pageX / e.pageY) -------- */
/*   la fenetre ne defile plus : coordonnees de la page = coordonnees de l'ecran -> position fixe        */
body:has(div#header) .hour_selector {
	position: fixed !important; z-index: 100; max-height: calc(100vh - 24px); overflow-y: auto;
	border: 1px solid var(--cadre-bordure) !important; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
body:has(div#header) .select_div_type_jour, body:has(div#header) .select_div_type_jour_minutes { width: auto !important; min-width: 46px; overflow-x: hidden; }	/* main.css : 20 / 35 px */
body:has(div#header) ol.hour-list { margin: 0 !important; padding: 3px 0 !important; list-style: none; min-width: 46px; font-family: var(--cadre-police); font-size: 12px; line-height: 1.2; }
body:has(div#header) ol.hour-list li { margin: 0 !important; padding: 2px 8px !important; text-align: center; color: var(--cadre-texte); }
body:has(div#header) ol.hour-list li.clickable:hover { background-color: var(--cadre-primaire-clair); color: var(--cadre-primaire-fonce); }

/* --- barres de defilement fines ------------------------------------------------------------------ */
body:has(div#header) * { scrollbar-width: thin; scrollbar-color: #C3CAD0 transparent; }

/* --- attente (framework.js : .spinner + .black-bg) : anneau aux couleurs du cadre sur carte blanche, voile clair --- */
/*     position imposee : centerModal() ecrit top/left en ligne ; la carte est centree sur la zone de contenu         */
body:has(div#header) .black-bg:not(.out) { background-color: rgba(245, 247, 247, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body:has(div#header) .spinner.out { display: none; }
body:has(div#header) .spinner:not(.out) {
	position: fixed !important; top: 50% !important; left: calc(50% + var(--cadre-menu-largeur) / 2) !important; z-index: 400;
	display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0; box-sizing: border-box;
	transform: translate(-50%, -50%); border-radius: 18px; background: #FFFFFF none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
body:has(div#header) .spinner:not(.out)::before {
	content: ""; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%;
	border: 3px solid var(--cadre-primaire-clair); border-top-color: var(--cadre-primaire); border-right-color: var(--cadre-accent);
	animation: cadre-attente 0.8s linear infinite;
}
@keyframes cadre-attente { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body:has(div#header) .spinner:not(.out)::before { animation-duration: 2.4s; } }