/* css de generappli
S1F0 18/12/04 : création
S1F1 28/05/12 : ajout de warn3
S1F2 23/11/14 : ajout des éléments pour mvcbb/CRUD
S1F3 06/12/25 : gros renommage coté CRUD et widget de formulaire
S1F4 14/12/25 : ajout des styles pour select_ordered
S1F5 24/12/25 : ajout des styles pour HTMLEDIT (trumbowyg)
*/

/****************/
/***** tests ****/
/****************/

/* fieldset repliable */
.fs-toggle legend {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
/* flèche après le texte */
.fs-toggle legend::after {
  content: "";
  width: .7em;
  height: .7em;
  background: currentColor;
  clip-path: polygon(25% 15%, 25% 85%, 75% 50%); /* triangle vers la droite */
}
/* ouvert → flèche vers le bas */
.fs-toggle:not(.collapsed) legend::after {
  transform: rotate(90deg);
}
.fs-toggle.collapsed *:not(legend) {
  display: none;
}









div.dev { /* à remettre dans css de gA_demo  => pour le bloc dev de HTMLEDIT*/
	background-color: Aquamarine;
	border: 1px solid #bfc6d1;
    padding: 10px 12px;
    border-radius: 4px;
=}




form.adm_widg____ets input { /* style compact */
	height: 15px;
	padding: 0px;
	font-size: 10px;
}
form.adm_widg____ets textarea { /* style compact */
	padding: 0px;
	font-size: 10px;
}

span.adm_wid____gets {
	font-size: 11px;
}



span.showmenu {
	border: 1px solid black;
	background-color: #D7E74B; /* jaune vert léger */
}
span.showmenu2 {
	background-color: #FFFF78; /* jaune très léger */
}
span.showmenu, span.showmenu2, span.showmenu3 {
	cursor: pointer;
}


code {
	background-color: LightGray;
}
code.php {
	color: blue;
}
code.html {
	color: green;
}
code.sql {
	color: MediumOrchid;
}
:root {
    --tbw-cell-vertical-padding: 4px;
    --tbw-cell-horizontal-padding: 8px;
    --tbw-cell-line-height: 1.5em;
}

div.trumbowyg-editor-box { /* pour contrer le bug du pointeur qui est 100% blanc */
	background-color: #D5DBE3; /* gris bleu */
}
/* autoriser le resize JS */
.trumbowyg-editor img {
    max-width: none !important;
    height: auto;
    display: inline-block;
}
/* visuel pendant le resize */
.trumbowyg-editor img.trumbowyg-resizable {
    outline: 1px dashed #999;
    cursor: nwse-resize;
}
.trumbowyg-editor img.resizable {
    outline: 1px dashed #999;
    cursor: nwse-resize;
    display: inline-block;
    max-width: 100%;
    height: auto;
}






div.w_htmledit_adm table {
    margin-bottom: var(--tbw-cell-line-height);
}
div.w_htmledit_adm th,
div.w_htmledit_adm td {
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
    border: 1px solid #e7eaec;
}


.nowrap-ellipsis { /* force le contenu à tenir sur une ligne, si trop long on le tronque et on rajoute "..." à la fin */
	white-space: nowrap; /* permet de préciser que le texte ne doit jamais aller à la ligne */
    overflow: hidden;
    text-overflow: ellipsis; /* rajoute ... si overflow */
	word-break: break-all;
	max-width: 80px;
	display:inline-block;
}

.round-button {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    /*border: 2px solid #f5f5f5;*/
    border-radius: 50%;
    color: #F5F5F5; /* blanc cassé */
    text-align: center;
    text-decoration: none;
    background: #262626; /* noir cassé */
    /*box-shadow: 0 0 3px gray;*/
    font-size: 20px;
    font-weight: bold;
	cursor: pointer;
	-webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
	-ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
	user-select: none; /* Propriété standard */
}
.round-button:hover {
    background: #45A049; /* vert sombre */
}
.round-button.inactif {
    background: #C6C6C6; /* gris clair */
}



/*************************/
/**** Styles généraux ****/
/*************************/

.nota { /* note en bas de page pour donner des consignes */
	font-size: 11px;
	font-weight: lighter;
}
pre { /* pour le debug */
	white-space: pre-wrap;
	word-break: break-all;
}

.scintillant { /* pour mettre en évidence absoluement => sert dans a-adm_layout.php */
    font-weight: bold;
	font-size: 24px;
    color: #e6007a;
    text-shadow: 0 0 4px rgba(230,0,122,0.6);
    animation: scintille 1.5s infinite alternate;
}
@keyframes scintille {
    0% {
        color: #e6007a;
        text-shadow: 0 0 4px rgba(230,0,122,0.6);
        transform: scale(1);
    }
    50% {
        color: #ff9800;
        text-shadow: 0 0 8px rgba(255,152,0,0.8);
    }
    100% {
        color: #4caf50;
        text-shadow: 0 0 12px rgba(76,175,80,0.9);
        transform: scale(0.97);
    }
}
/* Zone de prévisualisation mise en évidence (scintillant atténué) */
.preview-zone {
    padding: 14px;
    border-radius: 8px;

    background: linear-gradient(
        120deg,
        rgba(230, 0, 122, 0.14),
        rgba(255, 152, 0, 0.14),
        rgba(76, 175, 80, 0.14)
    );
    background-size: 300% 300%;

    animation: previewPulse 6s ease-in-out infinite;

    box-shadow:
        inset 0 0 12px rgba(230, 0, 122, 0.25),
        inset 0 0 20px rgba(255, 152, 0, 0.18),
        0 0 8px rgba(0, 0, 0, 0.08);

    border: 1px solid rgba(230, 0, 122, 0.35);
}

/* Animation plus présente mais non agressive */
@keyframes previewPulse {
    0% {
        background-position: 0% 50%;
        box-shadow:
            inset 0 0 12px rgba(230, 0, 122, 0.25),
            inset 0 0 20px rgba(255, 152, 0, 0.18),
            0 0 8px rgba(0, 0, 0, 0.08);
    }
    50% {
        background-position: 100% 50%;
        box-shadow:
            inset 0 0 18px rgba(255, 152, 0, 0.35),
            inset 0 0 26px rgba(76, 175, 80, 0.25),
            0 0 10px rgba(0, 0, 0, 0.1);
    }
    100% {
        background-position: 0% 50%;
        box-shadow:
            inset 0 0 12px rgba(230, 0, 122, 0.25),
            inset 0 0 20px rgba(255, 152, 0, 0.18),
            0 0 8px rgba(0, 0, 0, 0.08);
    }
}

/* pour plp */
.plp, .plp > a {
    font-weight: bold;
	/* animation: plp_ 2s infinite; */
	animation: plp_ 2s infinite alternate linear;
}
@keyframes plp_ {
0% {color: red;}
50% {color: yellow;} 
100% {color: red;}
}

/* pour mvcbb->putnew() */
.new:after {
	content: url(/Commun/icones/new12.gif);
}


table {
	border : 2px solid;
	border-collapse: collapse;
}
table td, table th {
    border: 1px solid #666;
}

/* pour le mode panic */
div.panic {
	color: black;
	font-family: "Courier New", Courier, mono;
	background-color: #e2b9f3; /* violet pale */
	font-size: 11px;
	/* white-space: pre-wrap; */
	word-break: break-all;
	margin: 2px
}


/*********************************/
/**** CSS des actions/vues    ****/
/*********************************/
.params_diff { /* pour */
	color : orangeRed;
}

/*******************************/
/**** CSS du widget CRUD    ****/
/*******************************/

/* titre des différentes parties du CRUD */
body, form.w_crud {
	counter-reset: w_wf_titre; /* On initialise le compteur à 0 */
}
.w_crud_titre::before {
	counter-increment: w_wf_titre; /* On incrémente le compteur section */
	content: counter(w_wf_titre) ". "; /* On affiche le compteur */
}
.w_crud_titre {
	/*font-size: medium;*/
	color: #D52; /* orange */
}

/* selecteur du CRUD */
.w_crud_inhib { /* valeur inhibée dans le selecteur du CRUD et texte "montrer les inhibés" à côté du selecteur */
	color: dimgrey;
	/*display: inline-block; /* pour que le texte "montrer les inhibés" et la case à cocher aille à la ligne ensemble */
}
.w_crud_normal { /* valeur normale dans le selecteur du CRUD */
	color: black;
}
select.w_crud_normal { /* selecteur du CRUD */
	max-width: 95%;
}
.w_crud_normal option:first-child {
	color: green;
}]

/* bloc filtre du CRUD */
fieldset.w_crud_filtre > legend {
	color: #000066; /* bleu foncé */
	font-size: 12px;
}
fieldset.w_crud_filtre.w_crud_row:nth-of-type(even) {
	background-color: #FFC /* jaune très clair*/
}
fieldset.w_crud_filtre.w_crud_row:nth-of-type(odd) {
	background-color: #EEA /* jaune clair*/
}

/*pour les sections du CRUD */
fieldset.w_crud {
	background-color: #DDD; /* gris clair */
	min-width: 0px; /* pour contrer la valeur par défaut donné par le navigateur */
	padding: 0px;
	margin: 0px;
}
fieldset.w_crud > legend {
	font-style: italic;
}

/* boutons du CRUD */
button.w_crud, button.w_crud_big_button {
    background-color: #4CAF50; /* vert */
    color: white;
    margin: 2px 6px; /* pour bien séparer les boutons */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button.w_crud_big_button, .w_crud_big_button button { /* pour agrandir les boutons de validations en fin de formulaire */
    padding: 0px 12px;
	height: 40px;
	vertical-align: bottom;
}
div.w_crud > button > span, div.w_crud > button > img { /* pour les boutons de validations en fin de formulaire */
    vertical-align: middle;
}

button:hover {
    background-color: #3C732C; /* vert un peu plus sombre #45a049*/
}
button.selected {
    background-color: #0F0; /* vert vif */
}
button.action {
    background-color: #e4332e; /* rouge */
}
button.action:hover {
    background-color: #c83835; /* rouge un peu plus sombre */
}
button.action.selected {
    background-color: #F00; /* rouge vif */
}
button:disabled {
    background-color: #ccc; /* gris */
    cursor: not-allowed;
}

/* historique du CRUD */
div.w_crud_histo {
	color: darkslateblue;
	font-size: 11px;
}
div.w_crud_histo_hidden {
	display: none;
}


/************************************************/
/******* CSS des widgets de formulaire  *********/
/************************************************/

/****** applicable à include_widget_form ******/
/* etiquettes des champs de l'entête pour include_widget_form */
label.w_wf_oblig { /* met en gras le label d'un champ obligatoire d'un formulaire CRUD */
	font-weight: bold;
}
label.w_wf_oblig::after { /* rajoute une étoile rouge après le label d'un champ obligatoire d'un formulaire CRUD */
	content: '*';
	color: red;
}
label.w_wf_unique { /* met en italique le label d'un champ "unique" d'un formulaire CRUD */
	font-style: italic;
}
label.w_wf_identifiant { /* met en rouge le label du champ identifiant (si présent) d'un formulaire CRUD */
	color: red;
}
/* disposition en deux colonnes pour include_widget_form */
.w_wf_col-25 {
    float: left;
	text-align: right;
    width: 25%;
	/* word-wrap: break-word;    supprimé 29/12/25 */
	/*white-space: nowrap; /* ajout (test) 29/12/25 */
	
	white-space: normal;
	word-break: break-word;
	
    margin-top: 4px;
    padding-right: 3px;
	padding-bottom: 2px;
    box-sizing: border-box;
}
.w_wf_col-75 {
    float: left;
    width: 75%;
    margin-top: 4px;
	padding-bottom: 2px;
    box-sizing: border-box;
	min-width: 0;   /* ajout (test) 29/12/25, très important avec floats + % */
}
.w_wf_row:after { /* Clear floats after the columns */
    content: "";
    display: table;
    clear: both;
}
.w_wf_row:nth-of-type(even) {
	background-color: #BBC /* gris clair */
}
.w_wf_row:nth-of-type(odd) {
	background-color: #CCD /* gris plus clair */
}
/* pour l'input sur fond vert si $show_val == true */
input.w_wf_showval {
	outline: 1px solid blue;
    box-shadow: 0 0 1.5px 1px blue;
	background-color: #40DA29; /* vert vif */
}

/****** applicable à ~tous les widgets de formulaire ******/
/* champs invalides */
.w_wf_invalid:not(:disabled), label.w_wf_invalid > input:not(:disabled), /*div.w_wf_invalid, span.w_wf_invalid, textarea.w_wf_invalid,*/
input:invalid, textarea:invalid, select:invalid { /* champ en erreur dans le formulaire */
	outline: 1px solid red; /* cadre rouge, utile car box-shadow pas reconnu par safari-mobile. NB : outline ne rajoute pas de pixel (contrairement à border) à l'objet */
	box-shadow: 0 0 1.5px 1px red; /* cadre rouge avec halo */
}
div.w_wf_profils table.w_wf_invalid {
	border: 2px solid red;
}


/****** applicable à plusieurs widgets de formulaire ******/
label.w_wf, button.w_wf { /* pour les widgets de formulaire checkbox et radio : étiquettes et aussi le bouton "cocher/décocher tout" */
	display: inline-block; /* pour que l'étiquette et le bouton restent ensemble */
	/* float: left; */
	margin-right: 3px;
}
label.w_wf:not(:last-of-type), button.w_wf:not(:last-of-type), .w_wf_img_block:not(:last-of-type) { /* pour les widgets de formulaire checkbox et radio : étiquettes et aussi le bouton "cocher/décocher tout" */
	margin-right: 1.6em; /* pour séparer les items */
}

label.w_wf_disabled { /* pour les widgets de formulaire checkbox et radio : étiquettes en mode disabled */
	color: grey;
}
.w_wf_inline { /* pour les widgets de formulaire checkbox et radio : pour éviter un retour à la ligne intempestif en début */
	display: inline-block;
}

/****** applicable à un unique widget de formulaire ******/

/* pour le widget de formulaire checkboxes_button */
label.w_checkboxes_button input { /* on cache la checkbox en la déplacant et non en la masquant pour conserver la navigation par tabulation */
	/*display: none;*/
	position: absolute;
	left: -9999px;
}
label.w_checkboxes_button > span {
	display: inline-block;
    background-color: white;
    color: #0065b8; /* bleu vif */
    margin: 2px 6px; /* pour bien séparer les boutons */
    border: 4px solid #0065b8; /* bleu vif */
    cursor: pointer;
    padding: 4px 12px;
}
label.w_checkboxes_button > span:after {
	content: " \00002B"; /* plus */
}
label.w_checkboxes_button > input:checked + span {
    background-color: #477a00; /* vert */
    color: white;
}
label.w_checkboxes_button > input:checked + span:after{
	content: " \002714"; /* coche */
	font-size: 12px;
}
label.w_checkboxes_button.w_wf_disabled > span {
    background-color: #ccc; /* gris clair */
	cursor: not-allowed;
}
label.w_checkboxes_button.w_wf_disabled > input:checked + span {
    background-color: #7D9E4A; /* vert gris */
	cursor: not-allowed;
}

/* pour le widget de formulaire file3 */
input.w_file3  { /* on cache le bouton standard */
	opacity: 0;
}
label.w_file3 { /* on transforme le label en bouton */
	background-color: #4CAF50; /* vert */
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px ridge black;
	/*font-size: 0.8rem;*/
}
label.w_file3:hover { /* on transforme le label en bouton : cas hover*/
	background-color: #45A049; /* vert sombre */
}
div.w_file3 img, div.w_file3 a { /* on rapetisse l'image */
    height: 64px;
    order: 1; /* ?????????? */
}
div.w_file3 li, div.w_file3 > p { /* on supprime le n° et on forme une boite */
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid black;
}
div.w_file3 > p {
    line-height: 32px;
    padding-left: 10px;
}
div.w_file3 ol {
    padding-left: 0;
}


/* pour le widget de formulaire image */
.w_image_checkbox  { /* checkbox "a supprimer" qui se superpose sur les images */
	position: absolute;
	right: 4px;
	bottom: 4px;
}
.w_image_asuppr { /* texte "a supprimer" qui se superpose sur les images */
    position: absolute;
	bottom: 25px;
    left: 5px;
    width: 80%;
	font-weight: bold;
	color: red;
}
.w_image_asuppr2 { /* texte "a supprimer" qui se superpose sur les liens */
    position: absolute;
	bottom: 5px;
    left: 25px;
	font-weight: bold;
	color: red;
}
.w_image_block { /* pour les images du widget de formulaire image et permettre la superposition des autres éléments */
	position: relative;
}
img.w_wf { /* pour les images du widget de formulaire image : rajoute un cadre autours des images du widget de formulaire image */
	border-width: 1px;
	border-style: dashed;
	border-color: #D55;
}
span.w_image { /* pour afficher les extensions admissibles */
	font-size: small;
	font-style: italic; 
	color: dimgrey;
}
.______crossed { /* une croix en background (d'une image) si c'était au 1er plan serait bien...*/
	background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

/* pour le widget de formulaire input */
input.w_wf {
	/*max-width: 95%;  désactivé 9/12/18 etremplacé par width */
	width: 95%;
}

/* pour le widget de formulaire password */
.w_password.w_password_hide {
    background: url("../generappli/images/icon-eye-open.png") no-repeat center;
}
.w_password.w_password_show {
    background: url("../generappli/images/icon-eye-close.png") no-repeat center;
}
.w_password {
    height: 24px;
    width: 24px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    /*margin-left: 5px;
    position: absolute;*/
}

/* pour le widget de formulaire profils */
div.w_profils {
  max-width: 100%;  
  overflow: auto;
}
div.w_profils table {
	border-collapse: collapse;
	text-align: center;
	table-layout: fixed;
}
div.w_profils table td, div.w_profils table th {
	border: 1px solid black;
	width: auto;
	padding : 0;
}
div.w_profils table tr:nth-child(even) {
	background-color: #AAB /* gris */
}
div.w_profils table tr:nth-child(odd) {
	background-color: #99A /* gris */
}

/* pour le widget de formulaire select */
option.w_select_error { /* les options à problème */
	color: red;
}

/* pour le widget de formulaire select_ordered */
div.w_select_ordered {
	display: flex;
	gap: 40px;
	/*max-width: 700px;*/
	width: 100%;
	/*margin: 40px auto;*/
}
div.w_select_ordered > div {
	width: 100%;
}
@media (max-width: 700px) {
	div.w_select_ordered {
		flex-direction: column;
	}
}
ul.w_select_ordered { /* bloc items */
	width: 100%;
	list-style: none;
	padding: 6px;
	min-height: 50px;
	border: 2px dashed #0065b8;
	border-radius: 6px;
	margin : 3px;
}
ul.w_select_ordered li { /* cases */
	padding: 4px 12px;
	margin-bottom: 6px;
	background: white;
	color: #0065b8; /* bleu vif */
	border: 4px solid #0065b8; /* bleu vif */
	border-radius: 6px;
	cursor: grab;
	user-select: none;
	touch-action: manipulation;
	white-space: normal;     /* autorise le retour si nécessaire */
	width: 100%;
    box-sizing: border-box;
}
ul.w_select_ordered li { /* cases initialement disponibles */
	background: white;
	color: #0065b8; /* bleu vif */

}
ul.w_select_ordered li.w_select_ordered { /* cases initialement sélectionnées */
    background-color: #477a00; /* vert */
    color: white;
}
ul.w_select_ordered.w_select_ordered_selected li:before { /* cases sélectionnées *kkk/
	content: "\002714\00a0"; /* coche + espace insécable */
	font-size: 12px;
}		
ul.w_select_ordered li:active { /* cases en cours de déplacement */
	cursor: grabbing;
	border-color: #E3D70B; /* jaune foncé */
}
div.w_select_ordered_disabled ul.w_select_ordered li {
    background-color: #ccc; /* gris clair */
	cursor: not-allowed;
}
div.w_select_ordered_disabled ul.w_select_ordered li.w_select_ordered {
    background-color: #7D9E4A; /* vert gris */
}
		
/* pour le widget de formulaire textarea */
textarea.w_wf { 
	/*max-height: 200px;*/
	min-height: 20px;
	width: 95%;
	max-width: 600px;
}

/* pour le widget de formulaire toggle_switch */
.w_toggle_switch { /* le conteneur du slider qui est un label pour intéragir avec la checkbox */
	position: relative;
	display: inline-block;
	width: 30px; /*60*/
	height: 17px; /*34*/
}
.w_toggle_switch input { /* on cache la checkbox en la déplacant et non en la masquant pour conserver la navigation par tabulation */
	/*display: none;*/
	position: absolute;
	left: -9999px;
}
.w_toggle_switch > span { /* on crée un slider sur fond gris */
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: grey; /*#ccc*/
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 17px; /*34*/
}
.w_toggle_switch > span:before { /* on créé un rond blanc dans le slider */
	position: absolute;
	content: '';
	height: 13px; /*26*/
	width: 13px; /*26*/
	left: 2px; /*4*/
	bottom: 2px; /*4*/
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
 	border-radius: 50%;
}
.w_toggle_switch > input:disabled + span:before { /* si disabled on créé un rond gris dans le slider */
	background-color: #ccc;
}
.w_toggle_switch > input:checked + span { /* le fond du slider passe en vert si la case est cochée */
	background-color: #45a049; /*#2196F3   #45a049=vert*/
}
.w_toggle_switch > input:focus + span { /* un halo vert lorsque focus sur le champ */
 	box-shadow: 0 0 5px #45a049; /*#2196F3   #45a049=vert*/
}
.w_toggle_switch > input:checked + span:before { /* déplace le bouton blanc */
	-webkit-transform: translateX(13px); /*13px*/
	-ms-transform: translateX(13px); /*13px*/
}



/********************************************************************/
/***** CSS des autres widgets (par ordre alphabetique des widgets) **/
/***** les style doivent se nommer par convention                  **/
/***** "w_" + nom du widget en minuscule [+ (en option) "_xxxxx"]  **/
/********************************************************************/

/* pour widget ariane */
ul.w_ariane {
	margin: 0; /* pour annuler le margin par défaut d'ul */
	padding: 0 0 3px 0; /* pour annuler le padding par défaut d'ul, 3px = bas */
}
ul.w_ariane li {
	font-size: 13px;
	float: left;
	position: relative;
	list-style: none;
}
ul.w_ariane li:not(:last-of-type)::after { /* rajoute ' > ' pour séparer les éléments */
	content: '\0000A0>\0000A0';
}
ul.w_ariane a { /* on évite la coloration des liens */
	color: black;
}

/* pour widget arrondi */
.w_arrondi {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 8px;
	background: #f8f8f8; /*#eee*/
	border: 1px solid #9FC6FF;
	padding: 3px;
}

/* pour widget bandeau */
.w_bandeau {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #DFF;
	font-weight: lighter;
	display: table-cell;
	vertical-align: bottom;
}

/* pour widget bug_report */
.w_bug_report {
	color: white;
	padding: 5px;
	background: rgba(249, 170, 2, .5);
	border-radius: 1em;
}

/* pour widget code */
.w_code pre {
	overflow-x:auto;
	position: relative;         /* nécessaire pour le positionnement absolu du bouton */
    width: 100%; 
    overflow-x: auto;           /* ajoute une barre si le code dépasse */
    box-sizing: border-box;     /* inclut padding dans la largeur */
}
.w_code .hljs {
    background-color: #f5f5f5;   /* gris très clair */
}
.w_code button {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;                /* au-dessus du code */
    background: #eee;
    border: 1px solid #ccc;
    padding: 2px 8px;
    cursor: pointer;
}

/* pour widget debug */
div.w_debug {
	color: black;
	font-family: "Courier New", Courier, mono;
	background-color: #66ddee; /* bleu */
	font-size: 11px;
	/* white-space: pre-wrap; */
	word-break: break-all;
	margin: 2px
}
fieldset.w_debug {
	background-color: #FFFBC6; /* jaune pale */
	border-color: blue;
	border-radius: 8px 8px;
	border-width: 1px;
	padding-top: 20px;
}
fieldset.w_debug > legend____________ {
	padding-top: 10px;
	width: 100%;
    display: flex;
    justify-content: space-between;
}
fieldset.w_debug > legend {
  width: 100%;
  display: block;
}

fieldset.w_debug > legend .legend-inner {
  display: flex;
  align-items: center;
}

fieldset.w_debug > legend .left {
  margin-right: auto;
}

fieldset.w_debug > legend .center {
  margin: 0 auto;
}

fieldset.w_debug > legend .right {
  margin-left: auto;
}

/* pour widget EXTRACT_MENU */
div.extract_menu span { /* boutons standard */
	display: inline-block;
    background-color: #BDD2FF; /* idem MENU */
    color: #13a; /* idem MENU */
    margin: 2px 2px; /* pour bien séparer les boutons */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 4px;
}
div.extract_menu > b > span { /* bouton correspondant à la page courante */
    background-color: lightgreen;
	text-decoration: none;
}

/* pour widget footer */
.w_footer {
	font-size: 11px;
}

/* pour widget header */
.w_header {
	font-size: 16px;
}

/* pour widget HTMLEDIT */
.w_htmledit {
	outline: 2px dotted pink;
	animation: w_htmledit_anim 2s infinite;
}
@keyframes w_htmledit_anim { 
0% {outline: 2px dotted pink;}
50% {outline: 2px dotted lightcoral;}
100% {outline: 2px dotted pink;}
}
.w_htmledit_img {
	position: absolute;
	margin-top: -40px;
	margin-left: 3px;
	animation: w_htmledit_img_anim 2s infinite;
	opacity: 1;
}
@keyframes w_htmledit_img_anim { 
0% {opacity: 0.2;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
.w_htmledit table { /* pour les tableaux crées par trumbowyg-editor */
    /*width: 100%;*/
	border-collapse: collapse;
	/*table-layout : auto;*/
}
.w_htmledit table td, .w_htmledit table th { /* pour les tableaux crées par trumbowyg-editor */
	min-width: 20px;
	min-height: 20px;
	border: 1px solid #666;
    padding: 1px 1px;
	/*vertical-align:top;*/
}
.w_htmledit td:empty::before, .w_htmledit th:empty::before {
  content: "\00a0";
}
.w_htmledit table th { 
	background: #f2f2f2;
	font-weight: bold;
}
.trumbowyg-editor {
  max-height: 600px;      /* hauteur max de l’éditeur */
  overflow-y: auto;       /* scroll interne */
}
.trumbowyg-button-pane {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f5f5; /* important pour éviter transparence */
}


/* pour widget MANAGE_COMMENTS */
span.w_manage_comments {
	font-size: 11px;
	color: #666666;
	font-style: italic;
	padding-left: 5px;
}
.w_manage_comments_0 {
	width: 80%;
	background-color: #CCFE96;
	font-size: 14px;
	padding: 4px 20px 4px 4px;
	color: #110022;
}
.w_manage_comments_1 {
	width: 80%;
	background-color: #FFDDC9;
	font-size: 14px;
	padding: 4px 4px 4px 20px;
	color: #330033;
}

/* pour widget notes_bas_page et les notes de bas de page */
span.notebas {
    font-size: 13px;
}
span.notebas a[href*=notebasinc]:before {
    content: '(';
}
span.notebas a[href*=notebasinc]:after {
    content: ')';
}
span.notebas div:target, sup.notebas:target {
	background-color: yellow;
	border: 1px dotted brown; 
}

/* pour widget PHOTOVIEWER */
.w_photoviever_transp {
	z-index: -10;
	background-color: #AAAAAA;
	color: black;
	filter: alpha(opacity=50,finishopacity=50,style=1,startx=100,starty=0,finishx=100,finishy=100);
	-moz-opacity: 0.5;
	opacity: 0.5;
	overflow: hidden; 
}
.w_photoviever_transp:hover {
	filter: alpha(opacity=100,finishopacity=100,style=1,startx=100,starty=0,finishx=100,finishy=100);
	-moz-opacity: 1;
	opacity: 1;
}
.w_photoviever_transp > img {
	transition: transform .3s cubic-bezier(.26,.8,.91,.91);
}
.w_photoviever_transp:hover > img {
	transform: scale(1.2);
}
.w_photoviever_titre {
	color: #990066;
	font-size: smaller;
}
.w_photoviever_nom_fich {
	color: black;
	font-size: 18px;
	font-weight: bold;
}

/* pour widget subtitle */
.w_subtitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000;
	/*line-height : 16px;*/
}

/* pour widget title */
.w_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #000;
	text-transform: uppercase;
	border-bottom: 1px black solid;
	/*line-height : 16px;*/
}

/* pour widget warning */
.w_warning::before, .warn::before {
	content: "\2022\00a0"; /* \2022 = bullet point \00a0 = blanc insécable*/
}
.w_warning, .warn { /* orange = message d'alerte (négatif) */
	color: #000;
	font-family: "Courier New", Courier, mono;
	font-style: italic;
	font-weight: bold;
	background-color: #e94;
	font-size: 12px;
	margin: 2px;
}
/*.w_warning_2, .warn2 { /* rouge = log pour les admins (Z) 
	background-color: #f53236;
} */
.w_warning_3, .warn3 { /* vert = message (positif) */
	background-color: #6f3; /*#fefe66;*/
}
.w_warning_4 { /* jaune = message (neutre) */
	background-color: #ff3; /*#fefe66;*/
}
.w_warning > button { /* croix pour fermer */
	opacity: 0.3;
	position: absolute;
    right: -6px;
	top: -1px;
    transform: translateY(-10%);
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
}
.w_warning > button:hover { /* croix pour fermer */
	opacity: 1;
}
.w_warning_mypopin4 {
	color: #000;
	padding: 5px;
	/*text-align:justify;*/
	/*text-indent:2px; /* 5 */
	background: #AD5620; /* marron */
	border-radius: 1em;
	/*-moz-border-radius: .5em;*/
}

/*********************************************************************/
/*** CSS des pseudowidgets                                        ****/
/*** par ordre alphabetique des pseudowidgets                     ****/
/*** les style doivent se nommer par convention                   ****/
/*** "w_" + nom du widget en minuscule  (+ (en option) "_xxxxx" ) ****/
/*********************************************************************/

/* pour pseudowidget aff_msg */
div.w_aff_msg_container:not(:last-of-type) { /* container du message et de ses commentaires */
	padding: 2px 0 20px 0; 
}
div.w_aff_msg { /* crée une bordure pointillée de 1 px marron autour des messages */
	border: 1px dotted brown; 
}
a.w_aff_msg{ /* lien vers une pj */
	font-size: 13px;
	color: #270d60;
	background-color: #fdfa4c;
}
a.w_aff_msg:before{ /* lien vers une pj */
	content: url(/Commun/icones/trombone.png);
}
div.w_aff_msg_comm:nth-child(odd) { /* bloc commentaire */
	background-color: #E1FFD2;  /* vert amande pale */
	font-size: 14px;
	margin-left: 52px;
	padding: 4px 4px 4px 14px;
	color: #030;
	border-left: thick solid #363; /* vert foncé */
}
div.w_aff_msg_comm:nth-child(even) { /* bloc commentaire */
	background-color: #EEF4FF;  /* bleu gris pale */
	font-size: 14px;
	margin-left: 36px;
	padding: 4px 4px 4px 14px;
	color: #009;
	border-left: thick solid #369; /* bleu foncé*/
}
.w_aff_msg_comm_entete { /* entete de chaque commentaire */
	font-size: 12px;
	color: #777; /* gris */
	font-style: italic;
	padding-left: 5px;
}

/* pour pseudowidget _diminue_profil */
span.w__diminue_profil > span.in { /*, span.w__diminue_profil > a:link.in, span.w__diminue_profil > a:visited.in*/
	color: lightgreen;
}
span.w__diminue_profil > span.out { /*, span.w__diminue_profil > a:link.out, span.w__diminue_profil > a:visited.out*/
	color: lightcoral;
}
/*span.w__diminue_profil > a:hover.in, span.w__diminue_profil > a:hover.out {
	color: yellow;
}*/

/*****************/
/**** Flexbox ****/
/*****************/
.flex-conteneur { /* conteneur flexbox */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.flex-element { /* élement flexbox qui prend tout l'espace disponible */
	flex: 1;
	padding: 3px;
}

/****************************/
/***** Responsive Design ****/
/****************************/
@media all and (max-width: 850px) {
 	.flex-conteneur {
		display: block;
	}
	.w_bandeau {
        display: none;
    }
	.w_wf_col-25, .w_wf_col-75 {
		width: 100%;
		margin-top: 0;
		text-align: left;
    }
	div.w_wf > button {
		width: 100%;
		margin: 2px 0;
    }
}

@media print {
	.noImpr {
		display: none;
	}
	a:after { /* affiche la cible du lien en clair */
	 content: " (" attr(href) ") ";
	 }
}