/* Elements globaux */
body { margin: 0px; background-color: white; font-family: RobotoCondensed; /* font-family: monospace; */ font-size: 14px; height: 100vh; -webkit-font-smoothing: antialiased; cursor: /*url('https://loisirs.courteline.fr/utilitaires/cursors/arrow_r.cur'),*/ default; }
a { cursor: pointer; color: unset; text-decoration: unset; }
p { margin: 0; }
button { cursor: pointer; }
input {width: 230px; font-family: RobotoCondensed; /* font-family: monospace; */ font-size: 14px; }
select { font-family: RobotoCondensed; /* font-family: monospace; */ font-size: 14px; }
textarea { font-family: RobotoCondensed; /* font-family: monospace; */  font-size: 14px;}
button { font-family: RobotoCondensed; font-size: 14px; }
textarea.modified, input.modified { color: red; }
[type=checkbox] { cursor: pointer; }
table { border-spacing: 15px 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #B6D8F2; }
::-webkit-scrollbar-thumb { background: #202020; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #F2E8B6; }
input:focus {
  /* Peut-être qu’il y a un changement ici qui fait apparaître la bonne police ? */
}
/* Modèles */
#page-container {
    position: relative;
	min-width: fit-content;
    min-height: 100vh;
    justify-content: center;
    flex-direction: column;
}

/* Impression */
@media print {
	.i-n { display: none!important; } /* Pas d'impression */
	.i-a { display: block!important; } /* Affichage pour impression */
	.i-s { background-color: white!important; color: black!important; border: none!important; box-shadow: none!important; padding: 0!important; margin: 0!important; overflow: visible!important;} /* Pas de mise en forme */
}

/* Display */
.invisible { display: none; }
.flex { display: flex; flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-colonne { flex-direction: column; }
.flex-colonne-inversee { flex-direction: column-reverse; }
.flex-dg { flex-direction: row-reverse; }
.flex-centre { justify-content: center; }
.flex-centre-espace { justify-content: space-evenly; }
.flex-centre-espace-2 { justify-content: space-around; }
.flex-centre-espace-3 { justify-content: space-between; }
.flex-1 { flex: 1; }
.objets-centre { align-items: center; }
.objets-gauche { align-items: left; }
.scroll { overflow-x:auto; max-width:calc(100vw - 100px); }
@media screen and (max-width: 450px) { .scroll { overflow-x:auto; max-width:calc(100vw - 80px); } } /* A modifier en fonction de .corps */
.scroll::-webkit-scrollbar-track { border-radius: 5px; }
.gap-3px { gap: 3px; }
.gap-5px { gap: 5px; }
.gap-10px { gap: 10px; }
.gap-20px { gap: 20px; }
@media screen and (max-width: 480px) { .invisible-480px { display: none; } }
@media screen and (max-width: 720px) { .invisible-720px { display: none; } }
@media screen and (max-width: 960px) { .invisible-960px { display: none; } }
@media screen and (max-width: 1180px) { .invisible-1180px { display: none; } }

/* Texte */
@font-face { font-family: 'Yokomoji'; src: url('https://sirh.courteline.fr/utilitaires/fonts/yokomoji.woff2') format('woff2'), url('https://sirh.courteline.fr/utilitaires/fonts/yokomoji.woff') format('woff'), url('https://sirh.courteline.fr/utilitaires/fonts/yokomoji.ttf') format('truetype'), url('https://sirh.courteline.fr/utilitaires/fonts/yokomoji.otf') format('opentype'); font-weight: normal; font-style: normal; }
.yokomoji { font-family: 'Yokomoji', sans-serif; }
@font-face { font-family: 'RobotoCondensed'; src: url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Light.woff2') format('woff2'), url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Light.woff') format('woff'), url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'RobotoCondensed'; src: url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Regular.woff2') format('woff2'), url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Regular.woff') format('woff'), url('https://sirh.courteline.fr/utilitaires/fonts/RobotoCondensed-Regular.ttf') format('truetype'); font-weight: 700; font-style: normal; }
.RobotoCondensed { font-family: 'RobotoCondensed', sans-serif; }
@font-face { font-family: 'Yadewanoji'; src: url('https://sirh.courteline.fr/utilitaires/fonts/YDWyadewanoji.woff2') format('woff2'), url('https://sirh.courteline.fr/utilitaires/fonts/YDWyadewanoji.woff') format('woff'), url('https://sirh.courteline.fr/utilitaires/fonts/YDWyadewanoji.ttf') format('truetype'), url('https://sirh.courteline.fr/utilitaires/fonts/YDWyadewanoji.otf') format('opentype'); font-weight: normal; font-style: normal; }
.yadewanoji { font-family: 'Yadewanoji', sans-serif; }
@font-face { font-family: 'DarumaDrop'; src: url('https://sirh.courteline.fr/utilitaires/fonts/Darumadrop.woff2') format('woff2'), url('https://sirh.courteline.fr/utilitaires/fonts/Darumadrop.woff') format('woff'), url('https://sirh.courteline.fr/utilitaires/fonts/Darumadrop.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.DarumaDrop { font-family: 'DarumaDrop', sans-serif; }
@font-face { font-family: 'BahnschriftBoldCond'; src: url('https://extranet.courteline.fr/KAIROS/utilitaires/fonts/bahnschrift_bold_condensed.woff2') format('woff2'), url('https://extranet.courteline.fr/KAIROS/utilitaires/fonts/bahnschrift_bold_condensed.woff') format('woff'), url('https://extranet.courteline.fr/KAIROS/utilitaires/fonts/bahnschrift_bold_condensed.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.BahnschriftBoldCond { font-family: 'BahnschriftBoldCond', sans-serif; }
.newsgothic { font-family: "news-gothic-std", sans-serif; font-weight: 700; font-style: normal; }
.gras, .gras-hover:hover { font-weight: bold; }
.pasgras, .pasgras-hover:hover { font-weight: normal; }
.italique, .italique input { font-style: italic; }
.souligne { text-decoration: underline; }
.souligne-1p5 { text-decoration: underline 1.5px; }
.majuscule { text-transform: uppercase; }
.texte-centre { text-align: center; }
.texte-gauche { text-align: left; }
.texte-droite { text-align: right; }
.texte-justifie { text-align: justify; }
.texte-noir, .texte-noir-hover:hover { color: black; }
.texte-gris-clair, .texte-gris-hover:hover { color: silver; }
.texte-blanc, .texte-blanc-hover:hover { color: white; }
.texte-jaune, .texte-jaune-hover:hover { color: #F2E8B6; }
.texte-rose2, .texte-rose2-hover:hover { color: #fd8798; }
.texte-rouge, .texte-rouge-hover:hover { color: red; }
.retour-ligne { white-space: normal; word-break: keep-all; }
.pas-retour-ligne { white-space: nowrap; word-break: keep-all; }
.texte-vertical { writing-mode: vertical-rl; text-orientation: upright; }
.texte-petit { font-size: smaller; }
.texte-grand { font-size: larger; }
.texte-tres-grand { font-size: xx-large; }
.texte-tres-tres-grand { font-size: xxx-large; }

/* Couleurs */
/* Fond-d = avec décalage (4 par défaut) / db$px = en fonction d'une bordure de $px*/
.fond-unset { background: unset; }
.fond-blanc, .fond-blanc-hover:hover { background-color: white; }
.fond-noir, .fond-noir-hover:hover { background-color: black; }
	.fond-blanc-d, .fond-blanc-d-hover:hover { background-color: white; box-shadow: 4px 4px 0px 0px white;}
	.fond-blanc-d2, .fond-blanc-d2-hover:hover { background-color: white; box-shadow: 2px 2px 0px 0px white;}
	.fond-blanc-d3, .fond-blanc-d3-hover:hover { background-color: white; box-shadow: 3px 3px 0px 0px white;}
	.fond-blanc-d2, .fond-blanc-d2-hover:hover { background-color: white; box-shadow: 2px 2px 0px 0px white;}
.fond-gris-clair, .fond-gris-clair-hover:hover { background-color: silver; }
	.fond-gris-clair-d, .fond-gris-clair-d-hover:hover { background-color: silver; box-shadow: 4px 4px 0px 0px silver; }
	.fond-gris-clair-d2, .fond-gris-clair-d2-hover:hover { background-color: silver ; box-shadow: 2px 2px 0px 0px silver; }
	.fond-gris-clair-d3, .fond-gris-clair-d3-hover:hover { background-color: silver; box-shadow: 3px 3px 0px 0px silver;}
	.fond-gris-clair-d5-haut, .fond-gris-clair-d5-haut-hover:hover { background-color: silver; box-shadow: 0px 0px 0px 5px silver; }
	.fond-gris-clair-d5-bas, .fond-gris-clair-d5-bas-hover:hover { background-color: silver; box-shadow: 0px 5px 0px 0px silver; }
	.fond-gris-clair-d5-bd4px, .fond-gris-clair-d5-bd4px-hover:hover { background-color: silver; box-shadow: 5px 5px 0px 0px silver, inset 2px 2px 0px 0px white; }
	.fond-gris-clair-d8-bd4px, .fond-gris-clair-d8-bd4px-hover:hover { background-color: silver; box-shadow: 8px 8px 0px 0px silver, inset 4px 4px 0px 0px white; }
	.fond-gris-clair-d8-bd4px-gris, .fond-gris-clair-d8-bd4px-hover:hover { background-color: silver; box-shadow: 8px 8px 0px 0px silver, inset 4px 4px 0px 0px #202020; }
.fond-gris-tresclair, .fond-gris-tresclair-hover:hover { background-color: gainsboro; }
	.fond-gris-tresclair-d, .fond-gris-tresclair-d-hover:hover { background-color: gainsboro; box-shadow: 4px 4px 0px 0px gainsboro; }
	.fond-gris-tresclair-d2, .fond-gris-tresclair-d2-hover:hover { background-color: gainsboro ; box-shadow: 2px 2px 0px 0px gainsboro; }
	.fond-gris-tresclair-d5-haut, .fond-gris-tresclair-d5-haut-hover:hover { background-color: gainsboro; box-shadow: 0px 0px 0px 5px gainsboro; }
	.fond-gris-tresclair-d5-bas, .fond-gris-tresclair-d5-bas-hover:hover { background-color: gainsboro; box-shadow: 0px 5px 0px 0px gainsboro; }
	.fond-gris-tresclair-d5-bd4px, .fond-gris-tresclair-d5-bd4px-hover:hover { background-color: gainsboro; box-shadow: 5px 5px 0px 0px gainsboro, inset 2px 2px 0px 0px white; }
	.fond-gris-tresclair-d8-bd4px, .fond-gris-tresclair-d8-bd4px-hover:hover { background-color: gainsboro; box-shadow: 8px 8px 0px 0px gainsboro, inset 4px 4px 0px 0px white; }
	.fond-gris-tresclair-d8-bd4px-gris, .fond-gris-tresclair-d8-bd4px-hover:hover { background-color: gainsboro; box-shadow: 8px 8px 0px 0px gainsboro, inset 4px 4px 0px 0px #202020; }
.fond-gris, .fond-gris-hover:hover { background-color: #202020; }
	.fond-gris-d, .fond-gris-d-hover:hover { background-color: #202020; box-shadow: 4px 4px 0px 0px #202020; }
	.fond-gris-d2, .fond-gris-d2-hover:hover { background-color: #202020 ; box-shadow: 2px 2px 0px 0px #202020; }
	.fond-gris-d3, .fond-gris-d3-hover:hover { background-color: #202020; box-shadow: 3px 3px 0px 0px #202020;}
	.fond-gris-d5-haut, .fond-gris-d5-haut-hover:hover { background-color: #202020; box-shadow: 0px 0px 0px 5px #202020; }
	.fond-gris-d5-bas, .fond-gris-d5-bas-hover:hover { background-color: #202020; box-shadow: 0px 5px 0px 0px #202020; }
	.fond-gris-d5-bd4px, .fond-gris-d5-bd4px-hover:hover { background-color: #202020; box-shadow: 5px 5px 0px 0px #202020, inset 2px 2px 0px 0px white; }
	.fond-gris-d8-bd4px, .fond-gris-d8-bd4px-hover:hover { background-color: #202020; box-shadow: 8px 8px 0px 0px #202020, inset 4px 4px 0px 0px white; }
	.fond-gris-d8-bd4px-gris, .fond-gris-d8-bd4px-hover:hover { background-color: #202020; box-shadow: 8px 8px 0px 0px #202020, inset 4px 4px 0px 0px #202020; }
.fond-bleu, .fond-bleu-hover:hover { background-color: #B6D8F2; }
	.fond-bleu-d, .fond-bleu-d-hover:hover { background-color: #B6D8F2; box-shadow: 4px 4px 0px 0px #B6D8F2; }
	.fond-bleu-d-bd2px, .fond-bleu-d-bd2px-hover:hover { background-color: #B6D8F2; box-shadow: 5px 5px 0px 0px #B6D8F2, inset 3px 3px 0px 0px white; }
	.fond-bleu-d2, .fond-bleu2-d2-hover:hover { background-color: #B6D8F2 ; box-shadow: 2px 2px 0px 0px #B6D8F2; }
	.fond-bleu-d3, .fond-bleu-d3-hover:hover, .fond-bleu2-d3-hover:hover { background-color: #B6D8F2 ; box-shadow: 3px 3px 0px 0px #B6D8F2; }
	.fond-bleu-d5-bd4px, .fond-bleu-d5-bd4px-hover:hover { background-color: #B6D8F2; box-shadow: 5px 5px 0px 0px #B6D8F2, inset 2px 2px 0px 0px white; }
	.fond-bleu-d8-bd4px, .fond-bleu-d8-bd4px-hover:hover { background-color: #B6D8F2; box-shadow: 8px 8px 0px 0px #B6D8F2, inset 4px 4px 0px 0px white; }
.fond-saumon, .fond-saumon-hover:hover { background-color: #F2D0B6; }
	.fond-saumon-hover-div:hover div { background-color: #F2D0B6; }
	.fond-saumon-d, .fond-saumon-d-hover:hover { background-color: #F2D0B6; box-shadow: 4px 4px 0px 0px #F2D0B6; }
	.fond-saumon-d-important, .fond-saumon-d-hover-important:hover { background-color: #F2D0B6!important; box-shadow: 4px 4px 0px 0px #F2D0B6!important; }
	.fond-saumon-d-bd2px, .fond-saumon-d-bd2px-hover:hover { background-color: #F2D0B6; box-shadow: 5px 5px 0px 0px #F2D0B6, inset 3px 3px 0px 0px white; }
	.fond-saumon-d2, .fond-saumon-d2-hover:hover { background-color: #F2D0B6 ; box-shadow: 2px 2px 0px 0px #F2D0B6; }
	.fond-saumon-d5-haut, .fond-saumon-d5-haut-hover:hover { background-color: #F2D0B6; box-shadow: 0px 0px 0px 5px #F2D0B6; }
	.fond-saumon-d5-bas, .fond-saumon-d5-bas-hover:hover { background-color: #F2D0B6; box-shadow: 0px 5px 0px 0px #F2D0B6; }
	.fond-saumon-d5-bd4px, .fond-saumon-d5-bd4px-hover:hover { background-color: #F2D0B6; box-shadow: 5px 5px 0px 0px #F2D0B6, inset 2px 2px 0px 0px white; }
	.fond-saumon-d8-bd4px, .fond-saumon-d8-bd4px-hover:hover { background-color: #F2D0B6; box-shadow: 8px 8px 0px 0px #F2D0B6, inset 4px 4px 0px 0px white; }
	.fond-saumon-d8-bd4px-gris, .fond-saumon-d8-bd4px-hover:hover { background-color: #F2D0B6; box-shadow: 8px 8px 0px 0px #F2D0B6, inset 4px 4px 0px 0px #202020; }
.fond-vert, .fond-vert-hover:hover { background-color: #B6F2B6; }
	.fond-vert-hover-div:hover div { background-color: #B6F2B6; }
	.fond-vert-d, .fond-vert-d-hover:hover { background-color: #B6F2B6; box-shadow: 4px 4px 0px 0px #B6F2B6; }
	.fond-vert-d-bd2px, .fond-vert-d-bd2px-hover:hover { background-color: #B6F2B6; box-shadow: 5px 5px 0px 0px #B6F2B6, inset 3px 3px 0px 0px white; }
	.fond-vert-d2, .fond-vert-d2-hover:hover { background-color: #B6F2B6 ; box-shadow: 2px 2px 0px 0px #B6F2B6; }
	.fond-vert-d5-haut, .fond-vert-d5-haut-hover:hover { background-color: #B6F2B6; box-shadow: 0px 0px 0px 5px #B6F2B6; }
	.fond-vert-d5-bas, .fond-vert-d5-bas-hover:hover { background-color: #B6F2B6; box-shadow: 0px 5px 0px 0px #B6F2B6; }
	.fond-vert-d5-bd4px, .fond-vert-d5-bd4px-hover:hover { background-color: #B6F2B6; box-shadow: 5px 5px 0px 0px #B6F2B6, inset 2px 2px 0px 0px white; }
	.fond-vert-d8-bd4px, .fond-vert-d8-bd4px-hover:hover { background-color: #B6F2B6; box-shadow: 8px 8px 0px 0px #B6F2B6, inset 4px 4px 0px 0px white; }
	.fond-vert-d8-bd4px-gris, .fond-vert-d8-bd4px-hover:hover { background-color: #B6F2B6; box-shadow: 8px 8px 0px 0px #B6F2B6, inset 4px 4px 0px 0px #202020; }
.fond-rose, .fond-rose-hover:hover { background-color: #E9B6F2; }
	.fond-rose-d, .fond-rose-d-hover:hover { background-color: #E9B6F2; box-shadow: 4px 4px 0px 0px #E9B6F2; }
	.fond-rose-d-bd2px, .fond-rose-d-bd2px-hover:hover { background-color: #E9B6F2; box-shadow: 5px 5px 0px 0px #E9B6F2, inset 3px 3px 0px 0px white; }
	.fond-rose-d2, .fond-rose-d2-hover:hover { background-color: #E9B6F2 ; box-shadow: 2px 2px 0px 0px #E9B6F2; }
	.fond-rose-d5-haut, .fond-rose-d5-haut-hover:hover { background-color: #E9B6F2; box-shadow: 0px 0px 0px 5px #E9B6F2; }
	.fond-rose-d5-bas, .fond-rose-d5-bas-hover:hover { background-color: #E9B6F2; box-shadow: 0px 5px 0px 0px #E9B6F2; }
	.fond-rose-d5-bd4px, .fond-rose-d5-bd4px-hover:hover { background-color: #E9B6F2; box-shadow: 5px 5px 0px 0px #E9B6F2, inset 2px 2px 0px 0px white; }
	.fond-rose-d8-bd4px, .fond-rose-d8-bd4px-hover:hover { background-color: #E9B6F2; box-shadow: 8px 8px 0px 0px #E9B6F2, inset 4px 4px 0px 0px white; }
	.fond-rose-d8-bd4px-gris, .fond-rose-d8-bd4px-hover:hover { background-color: #E9B6F2; box-shadow: 8px 8px 0px 0px #E9B6F2, inset 4px 4px 0px 0px #202020; }
.fond-rose2, .fond-rose2-hover:hover { background-color: #fd8798; }
	.fond-rose2-d, .fond-rose2-d-hover:hover { background-color: #fd8798; box-shadow: 4px 4px 0px 0px #fd8798; }
	.fond-rose2-d-bd2px, .fond-rose2-d-bd2px-hover:hover { background-color: #fd8798; box-shadow: 5px 5px 0px 0px #fd8798, inset 3px 3px 0px 0px white; }
	.fond-rose2-d2, .fond-rose2-d2-hover:hover { background-color: #fd8798 ; box-shadow: 2px 2px 0px 0px #fd8798; }
	.fond-rose2-d5-haut, .fond-rose2-d5-haut-hover:hover { background-color: #fd8798; box-shadow: 0px 0px 0px 5px #fd8798; }
	.fond-rose2-d5-bas, .fond-rose2-d5-bas-hover:hover { background-color: #fd8798; box-shadow: 0px 5px 0px 0px #fd8798; }
	.fond-rose2-d5-bd4px, .fond-rose2-d5-bd4px-hover:hover { background-color: #fd8798; box-shadow: 5px 5px 0px 0px #fd8798, inset 2px 2px 0px 0px white; }
	.fond-rose2-d8-bd4px, .fond-rose2-d8-bd4px-hover:hover { background-color: #fd8798; box-shadow: 8px 8px 0px 0px #fd8798, inset 4px 4px 0px 0px white; }
	.fond-rose2-d8-bd4px-gris, .fond-rose2-d8-bd4px-hover:hover { background-color: #fd8798; box-shadow: 8px 8px 0px 0px #fd8798, inset 4px 4px 0px 0px #202020; }
.fond-rose2-important, .fond-rose2-hover-important:hover { background-color: #fd8798!important; }
.fond-rose-clair, .fond-rose-clair-hover:hover { background-color: #FFE6FF; }
	.fond-rose-clair-d, .fond-rose-clair-d-hover:hover { background-color: #FFE6FF; box-shadow: 4px 4px 0px 0px #FFE6FF; }
	.fond-rose-clair-d-bd2px, .fond-rose-clair-d-bd2px-hover:hover { background-color: #FFE6FF; box-shadow: 5px 5px 0px 0px #FFE6FF, inset 3px 3px 0px 0px white; }
	.fond-rose-clair-d2, .fond-rose-clair-d2-hover:hover { background-color: #FFE6FF ; box-shadow: 2px 2px 0px 0px #FFE6FF; }
	.fond-rose-clair-d5-haut, .fond-rose-clair-d5-haut-hover:hover { background-color: #FFE6FF; box-shadow: 0px 0px 0px 5px #FFE6FF; }
	.fond-rose-clair-d5-bas, .fond-rose-clair-d5-bas-hover:hover { background-color: #FFE6FF; box-shadow: 0px 5px 0px 0px #FFE6FF; }
	.fond-rose-clair-d5-bd4px, .fond-rose-clair-d5-bd4px-hover:hover { background-color: #FFE6FF; box-shadow: 5px 5px 0px 0px #FFE6FF, inset 2px 2px 0px 0px white; }
	.fond-rose-clair-d8-bd4px, .fond-rose-clair-d8-bd4px-hover:hover { background-color: #FFE6FF; box-shadow: 8px 8px 0px 0px #FFE6FF, inset 4px 4px 0px 0px white; }
	.fond-rose-clair-d8-bd4px-gris, .fond-rose-clair-d8-bd4px-hover:hover { background-color: #FFE6FF; box-shadow: 8px 8px 0px 0px #FFE6FF, inset 4px 4px 0px 0px #202020; }
.fond-jaune, .fond-jaune-hover:hover { background-color: #F2E8B6; }
	.fond-jaune-d, .fond-jaune-d-hover:hover { background-color: #F2E8B6; box-shadow: 4px 4px 0px 0px #F2E8B6; }
	.fond-jaune-d-bd2px, .fond-jaune-d-bd2px-hover:hover { background-color: #F2E8B6; box-shadow: 5px 5px 0px 0px #F2E8B6, inset 3px 3px 0px 0px white; }
	.fond-jaune-d2, .fond-jaune-d2-hover:hover { background-color: #F2E8B6 ; box-shadow: 2px 2px 0px 0px #F2E8B6; }
	.fond-jaune-d5-haut, .fond-jaune-d5-haut-hover:hover { background-color: #F2E8B6; box-shadow: 0px 0px 0px 5px #F2E8B6; }
	.fond-jaune-d5-bas, .fond-jaune-d5-bas-hover:hover { background-color: #F2E8B6; box-shadow: 0px 5px 0px 0px #F2E8B6; }
	.fond-jaune-d5-bd4px, .fond-jaune-d5-bd4px-hover:hover { background-color: #F2E8B6; box-shadow: 5px 5px 0px 0px #F2E8B6, inset 2px 2px 0px 0px white; }
	.fond-jaune-d8-bd4px, .fond-jaune-d8-bd4px-hover:hover { background-color: #F2E8B6; box-shadow: 8px 8px 0px 0px #F2E8B6, inset 4px 4px 0px 0px white; }
.fond-jaune-clair, .fond-jaune-clair-hover:hover { background-color: #fcf5e3; }
	.fond-jaune-clair-d, .fond-jaune-clair-d-hover:hover { background-color: #fcf5e3; box-shadow: 4px 4px 0px 0px #fcf5e3; }
	.fond-jaune-clair-d-bd2px, .fond-jaune-clair-d-bd2px-hover:hover { background-color: #fcf5e3; box-shadow: 5px 5px 0px 0px #fcf5e3, inset 3px 3px 0px 0px white; }
	.fond-jaune-clair-d2, .fond-jaune-clair-d2-hover:hover { background-color: #fcf5e3 ; box-shadow: 2px 2px 0px 0px #fcf5e3; }
	.fond-jaune-clair-d5-haut, .fond-jaune-clair-d5-haut-hover:hover { background-color: #fcf5e3; box-shadow: 0px 0px 0px 5px #fcf5e3; }
	.fond-jaune-clair-d5-bas, .fond-jaune-clair-d5-bas-hover:hover { background-color: #fcf5e3; box-shadow: 0px 5px 0px 0px #fcf5e3; }
	.fond-jaune-clair-d5-bd4px, .fond-jaune-clair-d5-bd4px-hover:hover { background-color: #fcf5e3; box-shadow: 5px 5px 0px 0px #fcf5e3, inset 2px 2px 0px 0px white; }
	.fond-jaune-clair-d8-bd4px, .fond-jaune-clair-d8-bd4px-hover:hover { background-color: #fcf5e3; box-shadow: 8px 8px 0px 0px #fcf5e3, inset 4px 4px 0px 0px white; }
.fond-beige, .fond-beige-hover:hover { background-color: #FAF0E6; }
	.fond-beige-d, .fond-beige-d-hover:hover { background-color: #FAF0E6; box-shadow: 4px 4px 0px 0px #FAF0E6; }
	.fond-beige-d-bd2px, .fond-beige-d-bd2px-hover:hover { background-color: #FAF0E6; box-shadow: 5px 5px 0px 0px #FAF0E6, inset 3px 3px 0px 0px white; }
	.fond-beige-d2, .fond-beige-d2-hover:hover { background-color: #FAF0E6 ; box-shadow: 2px 2px 0px 0px #FAF0E6; }
	.fond-beige-d5-haut, .fond-beige-d5-haut-hover:hover { background-color: #FAF0E6; box-shadow: 0px 0px 0px 5px #FAF0E6; }
	.fond-beige-d5-bas, .fond-beige-d5-bas-hover:hover { background-color: #FAF0E6; box-shadow: 0px 5px 0px 0px #FAF0E6; }
	.fond-beige-d5-bd4px, .fond-beige-d5-bd4px-hover:hover { background-color: #FAF0E6; box-shadow: 5px 5px 0px 0px #FAF0E6, inset 2px 2px 0px 0px white; }
	.fond-beige-d8-bd4px, .fond-beige-d8-bd4px-hover:hover { background-color: #FAF0E6; box-shadow: 8px 8px 0px 0px #FAF0E6, inset 4px 4px 0px 0px white; }
	.fond-beige-d8-bd4px-gris, .fond-beige-d8-bd4px-hover:hover { background-color: #FAF0E6; box-shadow: 8px 8px 0px 0px #FAF0E6, inset 4px 4px 0px 0px #202020; }
.fond-rouge, .fond-rouge-hover:hover { background-color: #EF6969; }
	.fond-rouge-d, .fond-rouge-d-hover:hover { background-color: #EF6969; box-shadow: 4px 4px 0px 0px #EF6969; }
	.fond-rouge-d-bas, .fond-rouge-d-bas-hover:hover { background-color: #EF6969; box-shadow: 0px 4px 0px 0px #EF6969; }
	.fond-rouge-d2, .fond-rouge-d2-hover:hover { background-color: #EF6969 ; box-shadow: 2px 2px 0px 0px #EF6969; }
	.fond-rouge-d5-haut, .fond-rouge-d5-haut-hover:hover { background-color: #EF6969; box-shadow: 0px 0px 0px 5px #EF6969; }
	.fond-rouge-d5-bas, .fond-rouge-d5-bas-hover:hover { background-color: #EF6969; box-shadow: 0px 5px 0px 0px #EF6969; }
	.fond-rouge-d5-bd4px, .fond-rouge-d5-bd4px-hover:hover { background-color: #EF6969; box-shadow: 5px 5px 0px 0px #EF6969, inset 2px 2px 0px 0px white; }
	.fond-rouge-d8-bd4px, .fond-rouge-d8-bd4px-hover:hover { background-color: #EF6969; box-shadow: 8px 8px 0px 0px #EF6969, inset 4px 4px 0px 0px white; }
	.fond-rouge-d8-bd4px-gris, .fond-rouge-d8-bd4px-hover:hover { background-color: #EF6969; box-shadow: 8px 8px 0px 0px #EF6969, inset 4px 4px 0px 0px #202020; }

/* Bordures */
.bordure { border: solid; }
.bordure-haut { border-top: solid; }
.bordure-bas { border-bottom: solid; }
.bd-noir, .bd-noir-hover:hover { border-color: black; }
.bd-gris, .bd-gris-hover:hover { border-color: #202020; }
.bd-blanc { border-color: white; }
.bd-bleu { border-color: #B6D8F2; }
.bd-1px { border-width: 1px; }
.bd-2px { border-width: 2px; }
.bd-3px { border-width: 3px; }
.bd-4px { border-width: 4px; }
.bd-arrondi-2px { border-radius : 2px; }
.bd-arrondi-4px { border-radius : 4px; }
.bd-arrondi-7px { border-radius : 7px; }
.bd-arrondi-10px { border-radius : 10px; }
.bd-collapse { border-collapse: collapse; }

/* Ombres */
.ombre-6px { box-shadow: 0 0 6px 1px rgb(0 0 0 / 0.2); }
.ombre-10px { box-shadow: 0 0 10px 0 rgb(0 0 0 / 0.2); }
.ombre-10px-in { box-shadow: inset 0 0 10px 0 rgb(0 0 0 / 0.2); }

/* Tailles */
.largeur-adapte { width: fit-content; }
.largeur-place { width: -webkit-fill-available; width: -moz-available; }
.largeur-100px { width: 100px; }
.largeur-min-100px { min-width: 100px; }
.largeur-min-150px { min-width: 150px; }
.largeur-min-max { min-width: max-content; }
.largeur-max-900px { max-width: 900px; }
.largeur-max-adapte { max-width: fit-content; }
.hauteur-adapte { height: fit-content; }
.hauteur-70px { height: 70px; }
.hauteur-90px { height: 90px; }
.hauteur-100px { height: 100px; }
.hauteur-160px { height: 160px; }
.hauteur-max-160px { max-height: 160px; }
.hauteur-max-80vh { max-height: 80vh; }

/* Marges */
.marges-auto { margin: auto; }
.marges-10px { margin: 10px; }
.marges-haut-auto { margin-top: auto; }
.marges-haut-5px { margin-top: 5px; }
.marges-haut-10px { margin-top: 10px; }
.marges-haut-20px { margin-top: 20px; }
.marges-haut-50px { margin-top: 50px; }
.marges-bas-auto { margin-bottom: auto; }
.marges-bas-5px { margin-bottom: 5px; }
.marges-bas-20px { margin-bottom: 20px; }
.marges-gauche-auto { margin-left: auto; }
.marges-droite-7px { margin-right: 7px; }
.marges-gauche-droite-15px { margin-left: 15px; margin-right: 15px; }
.marges-haut-bas-auto { margin-top: auto; margin-bottom: auto; }

/* Padding */
.padding-1px { padding: 1px; }
.padding-2px { padding: 2px; }
.padding-3px { padding: 3px; }
.padding-5px { padding: 5px; }
.padding-7px { padding: 7px; }
.padding-10px { padding: 10px; }
.padding-15px { padding: 15px; }
.padding-20px { padding: 20px; }
.padding-30px { padding: 30px; }
.padding-haut-20px { padding-top: 20px; }
.padding-haut-50px { padding-top: 50px; }
.padding-gauche-droite-5px { padding-left: 5px; padding-right: 5px; }
.padding-gauche-droite-15px { padding-left: 15px; padding-right: 15px; }

/* Transitions */
.transition-fond-300ms { transition: background-color 0.3s; }

/* Adapte */
@media screen and (max-width: 320px) {
	.marges-0-adapte320px { margin: 0; }
	.flex-colonne-adapte320px { flex-direction: column; }
}

@media screen and (max-width: 350px) {
	.padding-gauche-droite-5px-adapte350px { padding-left: 5px; padding-right: 5px; }
}

@media screen and (max-width: 360px) {
	.marges-0-adapte360px { margin: 0; }
	.flex-colonne-adapte360px { flex-direction: column; }
}

/* Page */
#conteneur-corps { transition: width 0.3s ease; }
.corps { padding: 20px; width: fit-content; margin: auto; transition: width 0.3s ease; }
@media screen and (max-width: 450px) { .corps { padding-left: 10px; padding-right: 10px; } }

/* Footer */
#footer-container { height: 70px; }
@media screen and (max-width: 500px) { #footer-container { height: 100px; } }
@media screen and (max-width: 340px) { #footer-container { height: 120px; } }

/* PAGE ORGANISATION */
.nom-salarie { padding-left: 15px; padding-right: 15px; }
.nom-salarie:hover { padding-right: 0; }
.nom-salarie .nom-salarie-x { display: none; padding:0; padding-right:4px; }
.nom-salarie:hover .nom-salarie-x { display: inline; }

/* Tableau */
.tableau-liste { border-spacing: 0; }
.tableau-liste th, .tableau-liste td { padding-left: 8px; padding-right: 8px; }

.tableau-bordure-bd-1px th, .tableau-bordure-bd-1px td { border: solid; border-width: 1px; }
.tableau-bordure-bd-1px-sauf-gauche th, .tableau-bordure-bd-1px-sauf-gauche td { border: solid; border-width: 1px; border-left-width: 0; }
/* Surligne première case td d'une ligne tr au passage de lo souris */
.ligne-survol:hover td:first-child { background-color: black; color: white; }
.tableau-autodeclaration td input { background-color: transparent; }

.ligne-sticky th { border-bottom: 1px solid black; padding-top:10px; }

/* Tableau récapitulatif des présences et absences */
.tableau-recap-presences { overflow: scroll; max-width: calc(100vw - 100px); min-height: 160px; }
@media screen and (max-width: 450px) { .tableau-recap-presences { max-width: calc(100vw - 80px); } } /* A modifier en fonction de .corps */
.tableau-recap-presences-nom { width: 200px; padding-left: 5px; padding-right: 15px; position: sticky; left:0px; }
@media screen and (max-width: 450px) { .tableau-recap-presences-nom { width: 160px; position: relative; } }
.tableau-recap-presences-sticky { position: sticky; left: 0; }
@media screen and (max-width: 450px) { .tableau-recap-presences-sticky { position: relative; left: unset; } }
.tableau-recap-presences-mois { left: 220px; position: sticky; top:0px; border-left: solid 1px #d9d9d9; }
@media screen and (max-width: 450px) { .tableau-recap-presences-mois { left: 0px; } }


/* KAIROS */
.avatar { width: fit-content; margin: auto; }
.bouton-admin {
	background-color: #E9B6F2;
	border: solid 1px black;
	padding: 5px 10px;
	width: fit-content;
	margin: auto; }
.bouton-admin:hover { background-color: #F2E8B6; }