dialog {
            border: solid 4px green;
            border-radius: 10px;
            padding: 20px;
            background-color: #dddda4;
            font-size: 12px;
            line-height:14px
        }
        ::backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }


@font-face {
        font-family: 'Gandon';
        src: url('polices/gandon.ttf');

}
@font-face {
        font-family: 'Brush';
        src: url('polices/brus455n.ttf');

}
@font-face {
        font-family: 'Corsiva';
        src: url('polices/corsiva.ttf');

}
@font-face {
        font-family: 'Forte';
        src: url('polices/forte.ttf');
}
@font-face {
        font-family: 'Pertil';
        src: url('polices/pertili.ttf');
}
@font-face {
        font-family: 'BradHand';
        src: url('polices/bradhitc.ttf');
}

	.roundedTable
	{
		border-radius: 20px 20px 20px 20px;
		border: 1px solid #000;  
		border-spacing: 5px;
	}

   .curseur_normal
   {
   cursor:default;
 }
 .curseur_auto
{
 cursor:auto;
 }
 .curseur_croix
 {
 cursor:crosshair;
 }
 .curseur_aide
 {
 cursor:help;
 }
 .curseur_move
 {
 cursor:move;
 }
 .curseur_texte
 {
 cursor:text;
 }
 .curseur_attente
 {
 cursor:wait;
 }
 .curseur_pointer
 {
 cursor:pointer;
 }

 
 .none {
  border-style: none;
}
.hidden {
  border-style: hidden;
}
.solid {
  border-style: solid;
}
.dashed {
  border-style: dashed;
}
.dotted {
  border-style: dotted;
}
.double {
  border-style: double;
}
.groove {
  border-style: groove;
}
.rouge {
 border-color : red;
}

.relative{position: relative}
	.hauttext{top: 40px;}
	.bas{bottom: 20px;}
	.droite{right: 30px;}
	.absolu{position: absolute;}
	.relative{position: relative}
	.hauttext{top: 10px;}
	.droite{right: 30px;}
	.aligne{vertical-align: bottom}
}

.pagination_news text {
vertical-align : top;
}

.pagination_news text {
vertical-align : top;
}
                                                 /*  Modal sans js */

/* général*/ 
.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 77, 77, .0);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 0;
}

  /* HistoireNom*/ 
.modal_content1 { 
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 400px;
  width: 750px;
  height: 810px;
  max-width: 100%;
  background: #ece466;
  padding: 15px 10px 10px;
  }

 /* Publicité*/ 
.modal_content2 {
  border-radius: 6px;
  position: absolute;
  top: 150px;
  left: 800px;
  width: 340px;
  height: 260px;
  max-width: 90%;
  background: #47994a;
  padding: 0px 0px 0px;
  }

 /* Préambule*/ 
.modal_content3 {
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 400px;
  width: 840px;
  height: 790px;
  max-width: 100%;
  background: #ece466;
  padding: 15px 10px 10px;
  }

 /* Évolution*/ 
.modal_content4 { 
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 380px;
  width: 830px;
  height: 810px;
  max-width: 100%;
  background: #ece466;
  padding: 15px 10px 10px;
  }

 /* Calendrier des postes*/ 
 .modal_content5 {
  border-radius: 4px;
  position: absolute;
  top: 120px;
  left: 370px;
  width: 830px;
  height: 650px;
  max-width: 100%;
  background: #ee3624;
  padding: 15px 10px 10px;
  }

 /* Calendrier2025*/ 
.modal_content6 {
  border-radius: 4px;
  position: absolute;
  top: 90px;
  left: 80px;
  width: 1030px;
  max-width: 100%;
  background: #758cf3;
  padding: 15px 10px 10px;
  }

 /* CalendrierScolaire*/ 
.modal_content7 {
  border-radius: 4px;
  position: absolute;
  top: 140px;
  left: 350px;
  width: 1040px;
  height: 600px;
  max-width: 90%;
  background: #616dee;
  padding: 15px 10px 10px;
  }

 /* HorlStrasb*/ 
.modal_content8 {
  border-radius: 4px;
  position: absolute;
  top: 130px;
  left: 400px;
  width: 530px;
  height: 840px;
  max-width: 100%;
  background: yellow;
  padding: 15px 10px 10px;
  }

 /* CureMaires*/ 
.modal_content9 {
  border-radius: 4px;
  position: absolute;
   top: 90px;
   left: 350px;
   width: 965px;
  height: 690px;
  max-width: 100%;
  background: #3df346;
  padding: 15px 10px 10px;
}

/* Acte naissance*/ 
.modal_content10 {
  border-radius: 4px;
  position: absolute;
   top: 90px;
   left: 350px;
   width: 680px;
   height: 730px;
   max-width: 90%;
   background: #cb682c;
 padding: 15px 10px 10px;
}

 /* Population*/ 
.modal_content11 {
  border-radius: 4px;
  position: absolute;
   top: 90px;
   left: 350px;
  width: 700px;
  height: 820px;
  max-width: 90%;
  background: #2aec5b;
 padding: 15px 10px 10px;
}

 /* Definition*/ 
.modal_content12 {
  border-radius: 4px;
  position: absolute;
   top: 40px;
  left: 100px;
 height: 810px;
  max-width: 90%;
  background: #5e6f27;
 padding: 15px 10px 10px;
}

.modal_close {
  position: absolute;
  top: 6px;
  right: 1px;
  color: white;
  text-decoration: none; 
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

img.invisible{
    transition: opacity .100%;
}
img.invisible:hover{
    opacity:0;
}

.element {
    border-top: 3px #EB5353 dotted;
    border-right: 3px #EB5353 dotted;
    border-bottom: #EB5353 dotted;
    border-left: #EB5353 dotted;
}
.element1 {
    border-top: 3px #EB5353 dotted;
    border-right: 3px #EB5353 dotted;
    border-bottom:none;
    border-left: #EB5353 dotted;
}
.element2 {
    border-top: none;
    border-right: 3px #EB5353 dotted;
    border-bottom: #EB5353 dotted;
    border-left: #EB5353 dotted;
}
.element3 {
    border-top: none;
    border-right: 3px #EB5353 dotted;
    border-bottom: none;
    border-left: #EB5353 dotted;
}
* {
  box-sizing: border-box;
  }
  body {
 font-family: Arial, sans-serif;
 }
        .form-popup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 2px solid #144c0e;
            border-radius: 15px;
            z-index: 9;
            background-color: #f7d06f;
				display: inline-box;
            padding: 15px;
        }
        .form-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .form-container input {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .button-container {
            margin-top: auto;
            display: flex;
            justify-content: center;
        }
        .btn {
            background-color: green;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        table {
            border-collapse: collapse;
        }