/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* page de connexion */
.login  {border: 2px solid #CCC; background: #FFF; padding:15px; width:600px; height:400px; margin:100px auto 0 auto; text-align:center; position:relative; overflow:hidden; }
.login .logos { text-align:left; }
.login .logos img.logocrf {width: 150px; display:block; }
.login .logos img.logoA { display:block; margin:20px auto; }
.login P { text-align:center; margin:15px 0;}
.login P.error { text-transform:uppercase; margin:20px 0; color:#F00; font-weight:bold; }
.login input[type=text], .login input[type=password] { width:70%; display:block; margin:20px auto; border-radius:10px; text-align:center;}
.login .connexion {cursor:pointer; font-size:18px; border-radius:5px; background:#e3001b; color:#FFF; padding:8px;}
.login .connexion:HOVER { background:#090;}

body{ font-family: 'Roboto', sans-serif; padding:0; margin:0; }
.conteneur {position:absolute; width: 100%; margin: 0 auto; padding: 0; background: #F2F2F2; }
.contenu { width: 72%; min-height:600px; margin: 0; padding: 10px 50px 20px 50px; float:left;  z-index: 500;}

hr {height: 1px; padding: 0; margin: 20px 0; color: #CCC; background: #CCC; border: 0; clear:both; float:none; display:block; }
.sep {float:none; clear:both; padding:20px 0; }
.sep10 {float:none; clear:both; padding:10px 0; }
.hidden { display: none; }

/* header */
.header { width:100%; height:113px; overflow:hidden; padding:0; margin:0; position:relative; background:#FFF; }
.header .logo {width:250px; height:113px; text-align:center; border-right:1px solid #CCC; padding:0 10px; }
.header .logo IMG { margin-top:20px;}
.header .logo span.name { text-transform:uppercase; color:#888; font-size:14px; }
.header .titre IMG { width:200px; position:absolute; top:20%; left:50%; }
.header .config { position:absolute; top:40px; right:20px;}
.header .config img { padding:0 15px; transition: filter 0.1s ease-in-out;}
.header .config img:hover { filter: drop-shadow(5px 5px 10px red); }
.header .config a.btndebug { background:#F00; color:#FFF; border-radius:10px; padding:5px; text-transform:uppercase; width:100px; text-align:center; margin-right:80px;  }
.header .config img, .header .config a.btndebug { display: inline-block; vertical-align: middle; }

.responsive_icon, SPAN.iconX { display:none; }

/* menu gauche */
.nav {width: 250px; min-height:800px; float:left; overflow:hidden; background:#FFF; margin:0; padding:40px 10px 0 10px; border-right:1px solid #CCC;}
.rub {margin: 5px; }
.rub H3 {background: #000;  font-family: 'Fira Mono', monospace; font-size: 16px; text-align:left; padding:5px; color: #FFF; font-weight: normal; margin: 20px 0; font-style:normal; text-transform:uppercase; }
.rub A { display:block; font-size:15px; border-bottom:1px dotted #DDD; padding: 10px 0 10px 28px; 	margin:10px 0; position:relative; z-index: 0; color:#000; }
.rub A:hover { color: #FFF; text-decoration: none; }
.rub A::before { content: ""; position: absolute;top: 0;left: 0; width: 100%;height: 100%;background: #e3001b;opacity: 0;transition: opacity 0.3s ease;z-index: -1; mix-blend-mode: multiply;}
.rub A:hover::before { opacity: 0.9; }

.rub A.ajout { background: url("/img/ajout.png") no-repeat 3px center; }
.rub A.edit { background: url("/img/edit.png") no-repeat 3px center; }
.rub A.suppr { background: url("/img/suppr.png") no-repeat 3px center; }
.rub A.gerer { background: url("/img/gerer.png") no-repeat 3px center; }
.rub A.plan { background: url("/img/planning.png") no-repeat 3px center; }
.rub A.chauffeurs { background: url("/img/drivers.png") no-repeat 3px center; }
.rub A.search { background: url("/img/search.png") no-repeat 3px center; }
.rub A.stat { background: url("/img/stat.png") no-repeat 3px center; }
.rub A.valider { background: url("/img/valider.png") no-repeat left top; }
.rub A.wait { background: url("/img/wait.png") no-repeat 3px center; }
.rub A.home { background: url("/img/board.png") no-repeat 3px center; }
.rub A.exit { background: url("/img/logout.png") no-repeat 3px center; color:#F00; }
.rub A.exit:hover { color:#FFF;}

/* menu horizontal */
.menu { display:block; overflow:hidden; margin-bottom:50px; padding:10px; text-align:center; background:#DDD; }
.menu A { }
.menu a.active { color: #e3001b; }
.menu A::after {content:'\25CF'; color:#CCC; margin:0 20px;}
.menu A:last-child::after { content:'';}
.menu A:hover { text-decoration:none; color:#006; }

/* home page */
span.welcome {display: block; font-size: 14px; color: #444; text-align: right; margin-top: -20px;}

.tableau {border:1px solid #CCC; float:left; width:20%; padding:20px; margin:20px 0 0 0; background:#FFF; }
.tableau.no-border { border-right: none; }
.tableau h2 { margin:0 0 8px 0; padding:0; color:#090; font-size:13px; text-transform:uppercase; }
.tableau h3 { margin:0; padding:0; color:#000; font-size:30px; letter-spacing: -2px;}

.blocHP {border: 1px solid #CCC; width:20%; height:150px; float:left; margin: 0 20px 0 0; padding:10px; background:#FEFEFE; text-align:center;}
.blocHP:hover { border:1px solid #e3001b; background:#FFF; }
.blocHP IMG {display:block; margin: 5px auto 15px auto; width:90px;}
.blocHP A {color:#666;}
.blocHP A:hover, .pave A:hover {color:#e3001b; text-decoration:none;}

.pave { border:1px solid #CCC; width:31%; float: left; margin:0 20px 20px 0; background:#FFF; position:relative; z-index:100; max-height: 400px; overflow-y: auto; }
.pave h2 {color:#e3001b; border-bottom:1px solid #DDD; margin:0 0 10px 0; padding:8px; }
.pave P { margin:5px 10px; font-size:15px; text-align:left; }
.pave P::before { content:"\25CF"; margin-right:5px; color:#e3001b; }
.pave P.placeholder { font-style:italic; color:#888; }
.pave P.placeholder::before { content:"";}
.pave A { color:#444; border-bottom:1px dashed #e3001b; font-size:15px;}
.pave span.editbox {position:absolute; bottom:10px; right:10px;}
.pave span.editbox A { border:none; }

.pave span.info { font-size:15px; font-style:italic; margin:5px 5px 10px 5px; color:#888; display:block;}
.pave P.drivers { border-bottom:1px solid #EEE; padding-bottom:3px;}
.pave span.confirmation { font-size:14px; font-weight:bold; text-transform:uppercase; color:#090; margin-left:10px;}
.infobulle { position: relative; display: inline-block; cursor: pointer; }
a.infobulle { border:none;}
.infobulle .infotext {
    visibility: hidden;
    width: 250px;
    background-color: #666;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    z-index: 200;
    bottom: 125%; /* Position au-dessus */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.infobulle.first .infotext {bottom: auto; top: 125%; }
.infobulle:hover .infotext { visibility: visible; opacity: 1; }
a.btnprop { border:none; margin-left:20px; padding:0 5px; background:#093; font-size:16px; color:#FFF;}


/* texte et titres */
H1, H2 { margin: 10px 0 20px 0; }
H1 {font-size: 22px; padding:5px; margin-bottom:30px; color: #e3001b; border-bottom: 2px solid #CCC; font-family: 'Fira Mono', monospace; font-weight:normal; position:relative; }
H2 {font-size: 18px;color: #088A08; font-weight:normal; }
h2.bonjour { font-size:22px; color:#090; }
H2.alerte { font-weight:bold; color:#FF0000; }
H3 { color:#088A08; font-family: 'Fira Mono', monospace; font-size:18px; font-weight:normal; text-transform:uppercase; }
H4 {background: #DDD; font-size: 18px; margin:20px 0 5px 0; padding:5px; color: #555; font-weight: normal; font-family: 'Fira Mono', monospace;}
H5 {font-size: 16px; margin:0; }
H5.info { color:#090; margin:20px 0; }
SPAN.no { background:#C30; color:#FFF; font-weight:normal; text-transform:uppercase; font-size:18px; margin:5px auto 20px auto; padding:3px 10px; display:block; width:15%; text-align:center; border-radius:10px; }
p { font-size: 16px; line-height:26px; color: #444; text-align:left; margin:0; padding:0; }
p.small { font-size:14px; font-style:italic; color:#555; margin:5px 0;}
span.exergue { color:#900; font-style:italic; }
span.alerte { font-weight:bold; color:#F00; }
span.alerte::before { content:'\26A0'; margin-right:5px; font-weight:normal; font-size:20px; }
span.warning { text-transform:uppercase; font-size:14px; color:#F00; margin-left:5px;}
span.wrong { color:#F00; padding-top:5px;}
span.checked { color:#060; }
span.checked::before { content:'\2713'; margin-right:3px; font-weight:bold; font-size:18px; color:#090; }

span.annulation { display:block; width:200px; border-radius:5px; background:#e3001b; color:#FFF; text-transform:uppercase; text-align:center; margin:0 auto; padding:5px; }

.bloc { width:43%; float:left; margin:20px 20px 10px 0; background:#FFF; border-radius:5px; padding:0 20px 20px 20px; position:relative;}
.bloc h2 { margin-top:20px;}
.bloc h2.gris { color:#333; font-weight:bold; }
.bloc .smallbtn, .benef .smallbtn { position:absolute; top:10px; right:10px;}

ul {margin:0 0 0 5px; padding:0; list-style:none;}
li {font-size: 15px; color: #333; margin: 10px 0; padding:10px 10px; border-bottom: 1px dotted #CCC; background:#FFF; overflow:hidden;  }
li.puce::before { content:'\25A0'; color:#F00; margin-right:10px; font-size:20px; }
li.cols { width:45%; float:left; margin-right:20px;}
li.trio { width:28%; float:left; margin-right:20px;}
li.quadri { width:18%; float:left; margin-right:10px;}
a {  font-size: 16px; color: #045FB4; text-decoration: none; font-weight: normal;}
a:hover {text-decoration:underline;}
.dates {font-size: 12px; color: #10099A; text-align:justify; }
.maj { font-size: 10px; font-style: italic; color: #333; text-align:center; }
.benef { margin:10px;padding:15px;background:#FFF;width:50%; line-height:22px; position:relative;}
.red { color:#FF0000; font-style:italic; font-size:16px;}
.vert { color:#006600; font-style:italic; font-size:14px;}
.orange {color:#FF6600; font-style:italic; }
P.com {color:#F60; font-style:italic; border:1px solid #F60; margin:10px 0; padding:10px; display:block;}
P.com2 {color:#900; text-align:left; }
P.com3 {border:1px solid #CCC; border-radius:5px; padding:5px; font-style:italic; background:#FFF; width:60%;}
.hour { font-weight:bold; color:#F00;}

li form { color:#666; }
li form input[type=text] { margin-right:20px;}
li form input.ok {width:100px;}

.message { width:50%; margin:20px auto; padding:20px 10px 30px 10px; border:1px solid #F00; border-radius:5px; background:#FFF; text-align:center; }

/* planning dispos */
.planning { float:left; width:23%; min-height:315px; overflow:hidden; background:#FFF; border:1px solid #CCC; border-radius:3px; padding:0; margin:0 15px 10px 0; }
.planning h3 { margin:0 0 5px 0; padding:10px 5px; color:#F00; text-align:center; background:#EEE; font-size:16px;}
.planning h4 {background:none; margin:20px 0 15px 0; padding:0; text-transform:uppercase; color:#444; font-weight:bold; font-size:14px; text-align:center; display:block;} 
.planning span.driver { display:block; margin:5px; padding:10px 0; border-bottom:1px dotted #CCC; font-size:14px; color:#666; }
.planning span.driver.on { color:#090; font-weight:bold;}
.planning .driver:nth-child(odd) { background-color:#FFF; }
.planning .driver:nth-child(even) { background-color: #F4F4F4; }
.planning a:hover {text-decoration:none;}
.planning A H3:hover { background:#F00; color:#FFF; }

.tranche { float:left; width:27%; min-height:200px; border:1px solid #CCC; margin:0 20px 30px 0; padding:10px; background:#FFF; }
.tranche h3 {color:#333; border-bottom:1px solid #CCC; padding-bottom:5px; margin:0 0 20px 0;}
span.oqp { text-transform:uppercase; color:#F00; display:block; font-style:italic; font-size:14px; }

.tooltip {
    position: relative;
	display: inline-flex; /* Utilisation de flexbox pour le centrage */
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
	width: 17px;
    height: 17px;
    text-align: center;
    border-radius: 50%;
    background-color: #EEE;
	color:#CCC;
    cursor: pointer;
}

.tooltip:before {
    content: attr(data-tooltip);
    position: absolute;
	width:200px;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background-color: #666;
    color: #fff;
	font-size:14px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip:hover:before {
    opacity: 1;
    visibility: visible;
}


/* planning transports */
.agenda { float:left; width:23%; min-height:315px; overflow:hidden; background:#FFF; border:1px solid #CCC; border-radius:3px; padding:0; margin:0 15px 5px 0; }
.agenda h3 { margin:0; padding:10px 5px; text-align:center; color:#FFF; background: #e3001b; font-size:16px;}
.agenda .rdv { margin:7px; padding:7px; border-bottom:1px dotted #DDD; position:relative;}
.agenda .rdv span.driver { font-size: 15px; color: #666; background:url(/img/driver.png) left no-repeat; padding-left:18px; }
.agenda .rdv.mytrajet { background:#FEE3E0;}
.rdv a.dupli { position:absolute; right:5px;}
.rdv a:hover.dupli { text-decoration:none; }
.rdv a.dupli::before { content:'\27F2'; font-size:20px; color:#888;}
.rdv a:hover.dupli::before { color:#F00; }
.rdv A.nodriver { color:#F00; font-size:16px; }
.rdv A.okdriver { font-size:16px; }

/* fenetre modale */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 70%);
    display: none;
    z-index: 998;
}

 #modale {
        visibility: hidden;
        position: fixed;
		top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		width: 100%;
        height: 100%;
        z-index: 1000;
      }

	#contenuModale {
        width: 500px;
        height: auto;
        margin: 300px auto 0 auto;
        background-color: #FFF;
        border-radius: 10px;
        padding: 10px 15px 30px 15px;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
      }

/* suggestions */
.suggestions {
            position: absolute;
			left:420px;
            border: 1px solid #ccc;
            background-color: white;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10;
            display: none;
        }
        .suggestions div {
            padding: 5px;
            cursor: pointer;
        }
        .suggestions div:hover {
            background-color: #CCC;
        }

a.close {color:#BBB; font-size:20px; font-weight:bold; text-align:right; display:block; }
a.close:hover { text-decoration:none; color:#F00; }
a.duplicate {display:block; text-align:right; text-transform:uppercase; font-size:13px; color:#99C; margin:0 5px; }

/* calendrier datepicker */
.ui-datepicker-today a {
    background: #F00 !important;
    color: #FFF !important; 
    font-weight: bold;
}

/* cadran HEURE */
.clockpicker-popover {
    position: absolute !important;  /* On force le positionnement absolu */
    z-index: 9999;  /* On s'assure qu'il soit au-dessus des autres éléments */
}
.clockpicker-popover .popover-content, .popover-title { background:#F00 !important;}
.popover-title span { color:#FFF;}
/* heures 00 et 13-23  */
.clockpicker-tick:nth-child(1), .clockpicker-tick:nth-child(n+14):nth-child(-n+24) {font-weight: bold !important;  color: #666;  }
/* heures 12 et 1-11 */
.clockpicker-tick:nth-child(13), .clockpicker-tick:nth-child(n+2):nth-child(-n+12) { font-weight: normal !important; color: #888; }
.clockpicker-minutes { font-weight: normal !important; color:#666; }


/* stats */
.filtre { text-align:right; font-size:12px; color:#666;}

.colstat { float:left; width:45%; margin-right:10px; }

/* diagramme */
		.chart-container {
            width: 50%;
			min-width:600px;
            margin: 10px 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 180px;
            padding: 30px 10px 10px 10px;
            position: relative;
			gap: 5px;
			background:#FFF;
			overflow:hidden;
        }

		.chart-container > div {
			margin: 0; 
			padding: 0;
			display: flex;
		    flex-direction: column; /* Empile la barre et le label */
		    align-items: center; 
		}
		
        .bar {
            width: 80px;
            background-color: #6CF;
            text-align: center;
            color: #FFF;
            font-size: 14px;
            position: relative;
            transition: 0.3s;
        }

        .bar:hover {
            background-color: #2980b9;
        }

        .bar span {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 5px;
            font-weight: bold;
            color: black;
        }

        .label { text-align: center; font-size: 14px; margin-top: 10px; }

		.donnee { font-size: 12px; position: absolute; bottom: 0;  width: 100%;  text-align: center; padding-bottom: 2px;  }

.camembert {
    width: 100%;   
    max-width: 500px;
    height: auto;
    margin: 0; 
	padding:0;
    position: relative;
}

.camembert H2 {position: absolute; margin:0; text-align:center;}

canvas {
    display: block; 
    width: 100%!important;  
    height: 100%!important;
}

/* pagination */
.pagination { clear:both; float:none; margin:20px 0; display:block; text-align:right; }
.pagination a { background:#FFF; border:1px solid #F00; padding:5px; color:#F00; margin:0 5px; }
.pagination span.pageactive {background:#F00; border:1px solid #F00; padding:5px; color:#FFF; margin:0 5px;}

/* FAQ */
.faq { background:#FFF; margin:20px auto; padding:20px; width:90%; overflow:hidden;}
.faq h2 { color:#000; font-size:22px; margin:10px 0 15px 0; font-family:'Fira Mono', monospace;  }
.faq h3 { color:#F00; font-size:18px; margin:10px 0; text-align:left; text-transform:inherit; }
.faq ul {margin:0 0 0 10px;}
.faq li { border:none; margin:5px 0; padding:0; line-height: 24px; }
.faq li::before { content: '\25CF'; color: #e3001b; font-size: 16px; margin-right: 8px;}
.faq .reponse { padding:10px; margin:10px 0; border:1px solid #CCC; border-radius:5px; width:80%; }
.faq .reponse a { text-decoration:underline;}

/* footer */
.footer { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal;  text-align:center; color: #EEE; display:block; overflow:hidden; padding:20px; margin:0; position:relative; background:#666; clear:both;}
.footer A { color:#EEE; font-size: 13px;}

/* boutons */
.btnOK {background:#009900; color:#FFF; padding:10px; margin-right:10px; border-radius:3px; width:100px;}
.btnOK:hover {background:#360; box-shadow:2px 2px 3px 2px #888;}
.btnNO {background:#FF0000; color:#FFF; padding:10px; border-radius:3px; width:100px;}
.btnNO:hover {background:#900; box-shadow:2px 2px 3px 2px #888;}
.btnOK A, .btnNO A {color:#FFF; font-weight:bold; font-size:17px;}
.btnOK A:hover, .btnNO A:hover {color:#FFF; font-weight:bold; text-decoration:none;}

A.btn { color:#FFF; border-radius:8px; padding:3px 10px; margin:0 10px; font-size:14px; display:inline-block; text-align:center; }
A.btn.voir {background: #06F;}
A.btn.voir::before { content:'\1F50E'; margin-right:5px;}
A.btn.choisir {background: #090;}
A.btn.choisir::before { content:'\25B6'; margin-right:5px;}
A.btn.gerer {background: #F60;}
A.btn.gerer::before { content:'\1F50E'; margin-right:5px;}
A.btn.big {margin:0 auto; font-size:15px;}
A.btn.abandon {background: #900;}
A.btn.edit {background: #F90;}
A.btn.del {background: #CCC; border-radius:50%; float:right; padding:1px 5px;}
A.btn.del:hover { background:#F00; text-decoration:none;}
A.btn.new {background: #F00; border:1px solid #F00;}
A.btn.new:hover {border:1px solid #F00; color:#F00; background:#FFF; text-decoration:none;}
A.btn.new::before { content:'\25B6'; margin-right:5px;}

A.btn.send, A.btn.print { background:#666; display: inline-flex;  align-items: center;}
A.btn.print::before { content:'\2399'; margin-right:5px; font-size:18px; vertical-align:middle;}
A.btn.send::before { content:'\2709'; margin-right:5px; font-size:18px; vertical-align:middle; }

A.btn.voir:hover, A.btn.choisir:hover, A.btn.gerer:hover, A.btn.send:hover, A.btn.print:hover { background:#F00; text-decoration:none;}

A.sendmail {font-size:18px; background:#090; padding:0 10px; color:#FFF; }
A.sendmail:hover { text-decoration:none; background:#F00; }

/* formulaires */
form.fL {float:left; margin-right:50px;}
input, textarea { background:#fff; font-size:16px; font-family: Arial, Helvetica, sans-serif; color:#444; padding:5px; margin:0 5px; border:1px solid #DDD; }
textarea { width:95%; }
textarea.sms { font-size:14px; color:#555; background:#f7f7f7f7; height:200px; border:2px solid #888; border-radius:10px; padding:10px;}
input:focus, textarea:focus, select:focus {border:1px solid #F00; outline:none;}
input.money { text-align:center; font-weight:bold; font-size:20px;}
select { background:#fff; font-size:16px; color:#444; border:1px solid #DDD; padding:5px; margin:0 5px; }
.bouton { font-family: arial, helvetica, sans-serif; border:1px solid #DE0029; font-size: 12px; color: #DE0029; top: 250px; background-color: #fff; cursor:pointer; }
.btnsuppr {border:1px solid #CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#FFF; padding:10px 15px; font-weight: bold; background:#FF0000; cursor:pointer; border-radius:3px;}
.btnedit {border:1px solid #CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#FFF; padding:10px 15px; font-weight: bold; background:#009900; cursor:pointer; border-radius:3px;}
.btnedit:hover {background:#FF0000;}
.ok {cursor:pointer; background:#F00; color:#FFF; font-weight:bold; border-radius:5px; width:35px;}
.ok:hover {background:#390;}

.confirm {cursor:pointer; color:#FFF; font-weight:bold; border-radius:5px; }
.confirm.YES {background:#090; width:100px;}
.confirm.NO {background:#F00; width:50px;}

/* boutons radio et check */
input[type=radio] { visibility: hidden; position: absolute; left: 0; top: 0; }
input[type=radio].driver { visibility:visible; position:relative;}
label.radio { width: 100px; color: #FFF; text-align: center; border: 1px solid #CCC; color: #666; background:#DDD; padding: 0 5px; border-radius: 5px; cursor: pointer; margin: 0 15px 0 0; display: inline-block; font-size:15px; 
vertical-align: baseline; transition: background-color 0.3s, color 0.3s;}
label.radio:hover { background: #900; color: #FFF;  }
label.radio.active { background: #F00; color: #FFF;  }
input[type="radio"]:checked + label.radio { border-color: #F00; background: #F00; color: #FFF; }
label.radio { transition: background-color 0.3s, color 0.3s; }
input[type=checkbox], label.check { cursor:pointer;}

label.radio2 { cursor:pointer; border: 1px solid #CCC; border-radius: 5px; background:#EEE; padding: 2px 5px; font-size:15px; vertical-align: baseline; }
label.radio2:hover { background:#DDD;}

/* bouton planning */
.tranche label { display:block; cursor:pointer; color:#333; margin:5px 0;}
label.on {color:#F00;}

button.copy { cursor:pointer; border:1px solid #CCC; margin-top:10px; border-radius:5px;}
button.copy::before { content:'\2398'; margin-right:5px; font-size:20px; }
button.copy.copied::before { content: '\2714'; margin-right: 5px; font-size:15px; color:#0C0; }
button.copy:hover { background:#DDD;}

button.noradio { cursor:pointer; margin:0 0 10px 0;}
input[readonly] { background:#DDD; border:#CCC;}
input[type=file] { background: #FEDEE1; font-style:italic; color:#888; }

form.small { overflow:hidden; background:#FFF; margin:20px auto; width:500px; padding:20px; text-align:left; border:1px solid #CCC; border-radius:5px; }
form.small P, form.moyen P { margin:20px 0;}
form.moyen { overflow:hidden; background:#FFF; margin:20px auto; width:700px; padding:10px 20px 20px 30px; text-align:left; border:1px solid #CCC; border-radius:5px; }

/* loader */
#global-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none; /* Caché par défaut */
}

/* Animation de rotation */
.spinner {
    width: 100px;
    height: 100px;
    border: 10px solid #ccc;
    border-top-color: #e74c3c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/********** STYLE MOBILE **********/
@media screen and (max-width: 640px) {
.login { width:90%; }

.header { height:95px;}
.header .logo { display:none;}
.header .titre IMG { position:relative; margin:15px auto 0 auto; top:0; left:0; display:block; }
.header .config {top: 5px; right: 5px; }
.header .config img {padding: 0 5px; }
.header .config a.btndebug { position:absolute; top:50px; right:-80px; font-size:10px; width:50px; }

.responsive_icon { display:block; position:absolute; left:10px; top:-5px; cursor:pointer; margin:0; padding:0; color:#F00; font-size:50px; text-align:center; }
SPAN.iconX {font-family:Arial, Helvetica, sans-serif; position:relative; display:block; margin: 10px auto 0 auto; padding:0 0 3px 0; width:25px; height:25px; background:#F00; cursor:pointer; border-radius:5px; color:#FFF; font-size:25px; text-align:center; }
.nav {margin:0; padding:0; width:80%; z-index:300; position:absolute; float:none; display:none; border:none; overflow: hidden; border:2px solid #CCC;}
.nav.on { height:auto; transition-property: height; transition-duration: 0.5s; padding-bottom:20px; display:block; }

.contenu {width: 96%; margin: 0; padding: 10px 5px; float: none; }
span.welcome { margin-bottom:20px;}
.tableau { width:37%; height:55px; margin:0; }
.tableau h3 { font-size:25px;}
.tableau.no-border {border-right: 1px solid #CCC; }

.blocHP { width: 37%; height: 150px; margin:10px; }
.pave { width: 95%; float: none; margin: 0 5px 20px 5px;}
.agenda, .planning, .tranche, .bloc { width:93%; margin:0 5px 10px 5px; padding:10px; float:none;}

form.moyen { width: 85%; padding: 10px; margin:10px auto; }

#contenuModale { width:90%; margin-top:100px;}
}