* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul.sm {
    margin-top:1em;
}

nav ul li {
    margin: 0 .1em;
}

nav ul li a {
    color: white;
    text-decoration: none;
}


nav ul li a.active {
    color: orange;
    text-decoration: none;
}

main {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

section form {
    text-align:center;
}

section form input, section form button {
    margin: .4em;
    padding: .4em;
}

section p {
    margin: 1em;
    text-align:center
}

section table {
    font-family: monospace;
    border-collapse: collapse; /* Pour éviter les doubles bordures */
    border: 1px solid black; /* Bordure solide autour de la table */
    width: 100%; /* Optionnel : pour que la table prenne toute la largeur */
}

section tr {
    border: 1px solid black; /* Bordure solide pour chaque ligne */
}

section td, section th {
    border: 1px dotted black; /* Bordure pointillée pour chaque cellule */
    padding: .3em 1em; /* Optionnel : pour ajouter de l'espace à l'intérieur des cellules */
    text-align: left; /* Optionnel : alignement du texte */
}
section th {text-align:center}
h1 {
    text-align:center;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

.alerte {
    color:red;
}

a{
    font-size: 80%;
    text-decoration: none;
    border-radius: .4em;
    color: black;
    padding: .5em;
    border: .1em solid gray;
    cursor: default
}

a:hover{
    text-decoration: none;
    background-color: lightgray;
    color: black;
    padding: .5em;
}
a:focus{
    background-color: darkgrey
}

.faux td {
     position: relative; /* Nécessaire pour le pseudo-élément */
}

.faux td:not(:last-child)::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 50%;
     height: 1px; /* Épaisseur de la ligne */
     background-color: red; /* Couleur de la ligne */
     transform: translateY(-50%); /* Centrer la ligne */
     z-index: 1; /* S'assurer que la ligne est au-dessus du texte */
}

.faux td:not(:last-child) {
     position: relative; /* Nécessaire pour le pseudo-élément */
     z-index: 2; /* S'assurer que le texte est au-dessus de la ligne */
}





.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.left, .right {
    margin:.2em;
}

.right{
    width:16em;
}


.left a[href*="-"] {
        background-color: red;/*#4CAF50;*/
     color:white;
    font-weight: bold

}
.left h2, .right h2 {
    margin-bottom: 10px;
}

.left label {
    display: block;
    margin: 5px 0;
}

textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}


/* Style de la checkbox cachée */
/* Style de la checkbox cachée */
.toggle-container {
    position: relative;
}

.toggle-checkbox {
    display: none; /* Cacher la case à cocher */
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.4em;
    background-color: #ccc;
    border-radius: .8em;
    padding: .1em 1.4em;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

.toggle-label:hover {
    background-color: #bbb;
}

.toggle-text {
    color: #fff;
    z-index: 1; /* S'assurer que le texte est au-dessus de la bille */
}

.toggle-ball {
    position: absolute;
    top: .2em;
    left: .2em;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #4caf50; /* Couleur lorsque coché */
}

.toggle-checkbox:checked + .toggle-label .toggle-ball {

    transform: translateX(calc(1000% - 2.1em)) ; /* Déplacer la bille à droite */
}


.container h3 {
 margin:.4em 0;
}

.container table, .container tr, .container th, .container td{
margin: 0;
padding: 0;
border: none; /* Bordure solide autour de la table */
}

.container h3 a{
    font-size: .6em;
    background-color: #fff;
}

.container h3 a.actif{
    font-size: .6em;
    background-color: #fff;
    border-bottom:.2em solid #fff;
    z-index: -10;
}

.container table a{
    cursor: pointer;
    padding:.1em .2em;
}


.container #contactForm {
    z-index: -20;
    margin-top:-.3em;
    padding:.2em;
    border:.1em solid gray}


.right table th, .right table td{
    text-align: center;

}
.right table input[type="number"]{
    width:3.6em;
text-align:right;
    padding:0;margin:0;
}


#listesms{
    border: solid .1em grey;
    margin: 0 1.2em;
    padding:.8em;

}

#listesms div{
    padding:0;
    margin:0 0 .5em 0;
    border-radius: .5em;
    border:.15em solid silver;
}


.menulistesms{
    margin: 0 2em ;
}
.menulistesms a{
    font-size: .7em;
    background-color: #fff;
}

.menulistesms a.actif{
    font-size: .7em;
    background-color: #fff;
    border-bottom:.2em solid #fff;
    z-index: 10;
}

.menulistesms a{
    cursor: pointer;
    padding:.1em .2em;
}

#listesms{
    padding:.4em;
    height:18em;overflow-y: auto;
}
#listesms div strong{
    border-radius: .5em .5em 0 0;
    padding: .3em;
    background-color: silver;
    display: block;
    text-align: right;
    font-size:.75em;
    margin-bottom: .2em;
}

#listesms div pre{
    padding:.3em;
}


@keyframes sending {
    0% { color:red; opacity: .7; }
    50% { color:orange;  opacity: .5; }
    100% { color:red;  opacity: .7; }
}

.sending strong{
    animation: sending 1s ;
    animation-iteration-count: 15
}




        footer p span {
            display: inline-block;
            animation: bounce 5.3s infinite alternate;
        }

        footer p span:nth-child(1) {
            animation-delay: 0.15s;
        }

        footer p span:nth-child(2) {
            animation-delay: 0.12s;
        }

        @keyframes bounce {
            0% {
                transform: translateY(0em)   rotate(90deg); color:red;padding:0 .3em;margin: 0 .2em;
            }
            100% {
                transform: translateY(-.1em)  rotate(80deg); color:lightgreen;padding:0 .5em;margin:0;
            }
        }




#cadran{
  display: inline-flex;
  overflow:hidden;
  background:transparent;
  height: 1em;
  margin-right: 4em;
  color:#18f018
}


#cadran p{
  margin:0;padding:0;border:0;font-size: 1em; line-height:  1em;
  background:transparent;
  color:#18f018
}


#cadran div {display:inline}
#cadran p{background:transparent
}

@keyframes tour60{
    from{transform: translateY(0)}
    to{transform:translateY(-60em)}
}

@keyframes tour24{
    from{transform: translateY(0)}
    to{transform:translateY(-24em)}
}

#minutes{animation: tour60 3600s steps(60, end) infinite}
#heures{animation: tour24 86400s steps(24, end) infinite}
#secondes{animation: tour60 60s steps(60, end) infinite}

.sec {
     animation: clignoter 2s steps(1, end) infinite; /* Utilisation de steps pour un clignotement saccadé */
}

@keyframes clignoter {
     0% {
             opacity: 1; /* Visible */
     }
     50% {
             opacity: 0; /* Invisible */
     }
     100% {
             opacity: 1; /* Retour à visible */
     }
}

footer p {font-size: 65% }
footer div{float: right}



a[href$="dec=out"] {
    transition: background-color 0.5s; /* Ajoute une transition pour le changement de couleur */
}

@keyframes slide {
    0% { }
    100% {
        background-color: orange;
        color:orange;
    }
}



.mess { padding: 15px; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 4px; margin-bottom: 20px; color: #2e7d32; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="text"], textarea, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
textarea { height: 100px; resize: vertical; }
.frequence-group { display: flex; align-items: center; gap: 10px; }
.frequence-group input[type="number"] { width: 80px; }
.frequence-group select { flex-grow: 1; }
.actions { display: flex; gap: 10px; }
.actions a { padding: 8px 12px; background-color: #ffcdd2; color: #c62828; text-decoration: none; border-radius: 4px; font-size: 0.9em; }
.actions a:hover { background-color: #ef9a9a; }
button { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
button:hover { background-color: #0056b3; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }


/* Le conteneur doit être en position relative pour que la bulle (position absolute)
 *  se positionne par rapport à lui et non par rapport à la page. */
.task-tooltip-container {
    position: relative;
    /* Optionnel: pour un meilleur curseur au survol */
    cursor: help;
}

/* La bulle d'info elle-même */
.task-tooltip {
    /* Par défaut, elle est cachée et hors de l'écran */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%; /* Positionne la bulle au-dessus du texte */
    left: 50%;
    transform: translateX(-19%); /* Centre la bulle horizontalement */

    /* Style de la bulle */
    background-color: #333;
    color: #fff;
    text-align: justify;
    padding: 8px 12px;
    border-radius: 6px;
    width: 450px;
    z-index: 1; /* S'assure que la bulle est au-dessus des autres éléments */
    /* Transition pour une apparition/disparition en douceur */
    transition: opacity 0.5s;
    font-size:.95em;
}



/* La petite flèche sous la bulle */
.task-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Positionne la flèche en bas de la bulle */
    left: 50%;
    margin-left: -5px; /* Centre la flèche */
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Au survol du conteneur, on rend la bulle visible */
.task-tooltip-container:hover .task-tooltip {
    visibility: visible;
    opacity: 1;
}

.notes1{color:red; height:auto !important;}



.container2 {
    max-width: 700px;
}
.container2 h2 {
    text-align: center;
    margin-bottom: 20px;
}
.container2 .form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.container2 .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}
.container2 .form-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.container2 .form-group button {
    padding: 10px;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.container2 .form-group button:hover {
    background-color: #0056b3;
}

.actions-cell{width:9em}

@media (min-width: 1080px) {
    .container2 .form-group {
        flex-direction: row;
        align-items: center;
    }
    .container2 .form-group label {
        width: 40%;
        text-align: right;
        margin-right: 10px;
    }
    .container2 .form-group input, .container2 .form-group button {
        width: 55%;
    }
}
@media (max-width: 1080px) {
    .container2 .form-group label {
        display: none;
    }
    .container2 .form-group input {
        width: 100%;
        padding: 8px;
        font-size: 14px;
    }
}
.container2 .numeric-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.container2 .numeric-group input {
    width: 30%;
    padding: 8px;
    font-size: 14px;
}
.container2 .numeric-group label {
    width: 20%;
    text-align: right;
    margin-right: 10px;
}

.response {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Masquer par défaut */
}

#response {
/* On annule les règles de .response */
position: static; /* Le contraire de absolute, elle reprend sa place normale */
z-index: auto;    /* Annule le z-index forcé */
background-color: transparent; /* Annule le fond blanc */
border: none;     /* Annule la bordure */
max-height: none; /* Annule la hauteur maximale */
overflow-y: visible; /* Annule la barre de défilement */

/* Et on la rend visible ! */
display: block;   /* On l'affiche comme un bloc normal */
}

.response ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.response li {
    padding: 8px;
    cursor: pointer;
}

.response li:hover {
    background-color: #f0f0f0;
}