:root {
    --decalage-infos: 350px;
}

html{
    min-width: 400px;
    margin:0;
}

body {
    background:url('img/ble.jpg')  center center fixed;
    background-size: cover;
    font: normal 0.9em/1.1em Arial, Helvetica, sans-serif;
    margin: 10px auto;
    color: #222;
    box-sizing: border-box;
}

.fond-blanc {
    background-color: rgba(255,255,255,0.7);
    display: inline-block;<span>Me déconnecter</span>
    position: relative;
    // Move the element to the right by 50% of the container's width
    left: 80%;
    // Calculates 50% of the element's width, and moves it by that
    // amount across the X-axis to the left
    transform: translateX(-40%);
    padding: 10px;
    border-radius: 10px;
    margin-top: 5px;
}

#content {margin-left: 10px;margin-top: 55px;width: auto;height: auto;}

#login {display: flex;flex-direction: column; width: 280px;}

#table_famille {background-color:rgba(255,255,255,0.4);}
table input {background-color: #eee; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; height: 20px; text-align: left;}
table select {background-color: #eee; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}

#hautgauche button {position: absolute; top: 5px; left: 5px;}
img {vertical-align: middle; }
.image {vertical-align: middle; font-size:0;}

#cadregauche {}

#cadredroite {}

.message {text-align:center;font-size:150%;color:red;}
#sujet {text-align:left;font-size:100%;}
#corpsmessage {text-align:left;font-size:100%; width:300px;}
/* #gauche {float:left; width:8em;}
#droite {margin-left:8em} #} */
.euro {text-align: right; }
.col_euro {width: 5em; }
.gauche {text-align: left;}
.droitenormal {text-align: right;}
.centrer {text-align: center;}
.centrerb {text-align: center; font-weight: bold;}
.centrer1 {text-align: center; color: blue;}
.centrer2 {text-align: center; color: darkgreen;}
.droite {text-align: right;}
.droite1 {text-align: right; font-weight: bold; color: blue;}
.droite2 {text-align: right; font-weight: bold; color: darkgreen;}
.petit_espace_vertical {height: 10px;}
.space-between {display: flex; justify-content: space-between;}
.gris { color: #999; font-weight: normal; }
.auto-calc { color: #000; background: #fff9c4; border-left: 3px solid #fbc02d; }
.bold { color: #000; font-weight: 600; }
.vide { color: #ccc; }
.col-min { text-align: center; color:#d9534f; font-weight:600; }   /* rouge */
.col-max { text-align: center; color:#5cb85c; font-weight:600; }   /* vert */
.col-voulu { text-align: center; font-weight:600; }
.recu-famille-input {text-align: center; width:3.5em; background: transparent;}
.recu-famille-input {text-align: center; width:3.5em; background: transparent;}
.ht-input {text-align: center; width:3.5em; background: transparent;}
.bl-input {text-align: center; width:3em; background: transparent; font-weight: 600;}
.diff-negative { color: red; font-weight: bold; }
.diff-positive { color: blue; font-weight: bold; }
.remarque-input {text-align: left; background: transparent;}
.validsaisie {background:url(img/yes_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;}
.novalidfavori {background:url(img/favori_NB_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;font-size:0;}
.validfavori {background:url(img/favori_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;;font-size:0;}
.valider {background:url(img/save_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:30px;}
.annuler {background:url(img/no_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:30px;}
.newfonction {background: url(img/new_p.png) no-repeat;border:0;margin:0px auto;height:20px;width:30px;}
.save {background: url(img/save_p.png) no-repeat;border:0;margin:0px auto;height:35px;width:30px;font-size:0;}
.prorata {font-weight: bold; background: green; color: white; width:1.7em;}
input[type="radio"].select_radio {
  display: none;
}
input[type="radio"].select_radio + label {
  border: 1px solid #000;
  min-width: 12px;
  text-align:center;
  color: white;
}
input[type="radio"].select_radio.visible_yes:hover + label {
  background-color: green;
}
input[type="radio"].select_radio.visible_yes + label {
  background-color: grey;
}
input[type="radio"].select_radio.visible_yes:checked + label {
  background-color: green;
}
input[type="radio"].select_radio.visible_no:hover + label {
  background-color: red;
}input[type="radio"].select_radio.visible_no + label {
  background-color: grey;
}
input[type="radio"].select_radio.visible_no:checked + label {
  background-color: red;
}
.infohaute {
    background-color: rgba(255,255,255,0.7);
    position: relative;
    top: -15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 20px;
    margin: 0;}

button.green_button {
    background-color: green;
    padding: 0px;
    color: white;
    border-radius: 5px;
}

button.red_button {
    background-color: red;
    padding: 0px;
    color: white;
    border-radius: 5px;
}

input.green_button {
    background-color: green;
    padding: 0px;
    color: white;
    border-radius: 5px;
}

input.red_button {
    background-color: red;
    padding: 0px;
    color: white;
    border-radius: 5px;
}
.yes {background: transparent url(img/prod_inactif_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;}
.nondispo {background: red ) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;}
.no {background:transparent url(img/prod_actif_p.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;color:hsl(9,10%,100%);}
.del {background: url(img/delete_m.png) no-repeat;alignContent:top;no-repeat;border:0;height:20px;width:20px;vertical-align: top;font-size:0;}
.edite {background:transparent url(img/edite_p.png) no-repeat;border:0;margin-bottom:4px;height:20px;width:20px;font-size:0;}
.valide-del {background:transparent url(img/delete_p_yes.png) no-repeat;border:0;margin: 0px auto;height:20px;width:20px;color:hsl(9,10%,100%);font-size:0;}
.new {background: url(img/new_p.png) no-repeat;border:0;height:20px;width:25px;margin-top:5px;color:hsl(9,10%,100%);}
.maj_prod {background:url(img/maj_prod_p.png) no-repeat;border:0;height:20px;width:20px;color:hsl(9,10%,100%);}

.suivant {background: url(img/avance.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.precedent {background: url(img/arriere.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.premier {background: url(img/sautarriere.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.cinqmoins {background: url(img/reverse.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.pluscinq {background: url(img/forward.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.dernier {background: url(img/sautavant.png) 80% no-repeat;border:0;margin:1px;height:30px;width:30px;font-size:0;}
.pagination {font: bold 1em/1em Arial, Helvetica, sans-serif;align-items: center;}
.oeil {background: url(img/oeil_p.png) no-repeat;border:0;margin:0px auto;height:30px;width:30px;font-size:0;}

.ordi {background: url(img/ecran_p.png) no-repeat;border:0;margin:0px auto;height:20px;width:20px;font-size:0;}
.pasordi {background: url(img/ecran_no_p.png) no-repeat;border:0;margin:0px auto;height:20px;width:20px;font-size:0;}


fieldset {background-color:rgba(255,255,255,0.6);}
.colorgray {font-style: italic; color: #666;}
#centrerjaune {text-align: center;background-color: yellow;}
#gris {text-align: center; color:gray;}
#white {text-align: center; color:white;}
#red {text-align: center; color:red;}
#blue {text-align: center; color:blue;}
.rouge {color:red;}
.bleu {color:blue;}
.vert {color:green;}
#dialogue {position: absolute; top: 1.5em; left: var(--decalage-infos); background-color: yellow;}
#filgreen {background-color: green; color: white; height: 1.6em; font-weight: bold;}
#filred {background-color: red; color: white; height: 1.6em; font-weight: bold;}
#choixdossier {background-color: rgba(255,255,255,.3); font-weight: bold;}
#choixfichier {background-color: rgba(255,255,255,.3); font-weight: bold;}
.entete {position: absolute; top: 1em; left: 40em; font-weight: bold; color: blue;}
.semitransparent {background-color: rgba(255,255,255,.3); font-weight: bold;}
.absolue {position: absolute; top: 4.5em; left: 30em; font-weight: bold;}
.absolue1 {position: absolute; top: 2em; left: 1em; font-weight: bold;}

.dossier {min-height: 12px; padding-left: 16px; background-color: transparent; background-repeat: no-repeat; 
          background-position: left center; background-image: url(../../static/img/dossier_p.png);}
.fichier {min-height: 12px; padding-left: 16px; background-color: transparent; background-repeat: no-repeat; 
          background-position: left center; background-image: url(../../static/img/droite_p.png);}

/*  supprimer flèches input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Toasts Django - version finale */
.django-toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 16px 24px;
    text-align: center;
    font-weight: 500;
    font-size: 18px;

    /* Effet verre dépoli blanc */
    background-color: rgba(200, 200, 200, 0.5);
    /* background-color: rgba(30, 30, 30, 0.6); */
    color: #1a1a1a; /* texte foncé */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);

    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.django-toast.hide {
    opacity: 0;
    transform: translateY(-100%);
}

/* On garde juste une bordure colorée fine pour différencier */
.django-toast.success { border-bottom: 3px solid rgba(25, 135, 84, 0.8); }
.django-toast.error { border-bottom: 3px solid rgba(220, 53, 69, 0.8); }
.django-toast.warning { border-bottom: 3px solid rgba(255, 193, 7, 0.8); }
.django-toast.info { border-bottom: 3px solid rgba(13, 110, 253, 0.8); }

.django-toast-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;
    opacity: 0.5;
    color: #333;
    line-height: 1;
}
.django-toast-close:hover {
    opacity: 0.9;
}

/* Navigation dans les menus */
#menu {
    position: fixed;
    left: 20px;
    top: 5px;
    z-index: 1000;
}
#nav img {padding: 0; width: 1.5em; height: 1.5em;}

#nav {margin: 0;padding: 5px 4px 0;background: #7d7d7d url(../../static/img/gradient.png) repeat-x 0 -110px;line-height: 80%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#nav li {margin: 0; padding: 0 0 5px; float: left; position: relative; list-style: none;}

/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding: 8px 15px; margin: 0;
	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
	text-shadow: 0 1px 1px rgba(0,0,0, .3);}

/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../../static/img/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);}

/* sub levels link hover */
#nav ul .encours, #nav ul a:hover {background: #0078ff url(../../static/img/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	 text-align: left;
	text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#nav li:hover li a {background: none; border: none; color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;}

/* dropdown */
#nav li:hover > ul {display: block;}

/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 40px;left: 0;
	background: #ddd url(../../static/img/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#nav ul li {float: none;margin: 0;padding: 0;}

#nav ul a {font-weight: normal; text-align: left; text-shadow: 0 1px 0 #fff;}

/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;

	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;

	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}


.span {
   text-decoration: none;
}
.info span{
   position: absolute;
   display: none; /* On masque l'infobulle. */
}
.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
.info:hover span {
    display: block; /* On affiche l'infobulle. */
    position: fixed;
    white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
    top: 13px; /* On positionne notre infobulle. */
    left: var(--decalage-infos);
    color: white;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
    background: #7d7d7d url(../../static/img/gradient.png) repeat-x 0 -110px;
    padding: 10px;
    border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}

/* Simple fenêtre popup */
.message-content {
	position: relative;
	padding: 20px;
	margin: 0 auto;
	background-color: white;
	width: 400px;
	top: 5vh;
}
#popup {
	display: none;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	height: 100%;
	width: 100%;
}

.message_popup {
	display: block;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	height: 100%;
	width: 100%;
}

/* RESPONSIVE DESIGN : MOBILE */
@media only screen and (max-width: 767px) {
    h1 {
        font-size: 24px;
        margin-top: 6px;
        /*margin-bottom: 0px;*/
    }
    h2 {
        font-size: 18px;
        /*margin-top: 6px;*/
        /*margin-bottom: 0px;*/
    }
}
/* Bootstrap */
<style>
.cModalIframeConteneur {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.cModalIframeConteneur iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.cModalPlein {min-width: 100%;margin: 0;}
.cModalPlein .modal-header {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.cModalPlein .modal-content {min-height: 100vh;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}
.cModalPlein .modal-footer {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}

.cModalMedium {min-width: 90%;margin: 0 auto;}
.cModalMedium .modal-content {min-height: 80vh;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}

.cModalSansEntete .modal-header {display:none;}
.cModalSansEntete .modal-footer {display:none;}

.cModalRouge .modal-header {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;background-color: #dc3545;color: #ffffff;}
.cModalRouge .modal-footer {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;background-color: #dc3545;color: #ffffff;}

.cModalInfo .modal-header {background-color: #17a2b8;color: #ffffff;border:none;}
.cModalInfo .modal-body {background-color: #17a2b8;color: #ffffff;}
.cModalInfo .modal-footer {background-color: #17a2b8;color: #ffffff;border:none;}
</style>