body {
    background-repeat:no-repeat;
    font-family:https://fonts.google.com/specimen/Oswald, https://fonts.google.com/specimen/Roboto?query=roboto ,Arial, Helvetica, sans-serif;
	font-size:10pt;
    margin: 0;
    padding: 0;
    background-color:#F2F3F4;
}

H1 {
    align:center;
	font-family:https://fonts.google.com/specimen/Roboto?query=roboto;
    font-size:24;
    color:#000000;
}
H2 {
    text-align:center;
    font-size:18;
font-family:https://fonts.google.com/specimen/Roboto?query=roboto;
    color:#000000;
}

p {font-size: 10pt;
font-family:https://fonts.google.com/specimen/Oswald
color: #000000;
}

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 10px;
            overflow: hidden;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #201E45;
            color: white;
        }
        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #ffffff;
        }
        td, th {
            border-radius: 10px;
        }
        tr:first-child td {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        tr:last-child td {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

/* Flexbox */
.box {
  display: flex;
  justify-content: center;
}
.boxg {
  display: flex;
  justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 15px;
    width: 100%;
}


.container {
    width: 800px;
    height: 200px;
  display: flex;
  justify-content: center;
 }


.centered-element{
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 15px;
    width: 40%;
}

input.comm, textarea.com, select.comm {
 padding:3px;
 border:1px solid #F5C5C5;
 border-radius:5px;
 width:300px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
}

input.commlong, textarea.comlong, select.commlong {
 padding:3px;
 border:1px solid #F5C5C5;
 border-radius:5px;
 width:480;
 box-shadow:1px 1px 2px #C0C0C0 inset;
}

input.pres, textarea.pres, select.pres {
 padding:3px;
 border:1px solid #F5C5C5;
 border-radius:5px;
 width:150px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
}


INPUT.spec {
    border-width : thin;
    margin : 0;
    width : 100%;
}
INPUT.form {
    border-width : thin;
    margin : 0;
    width : 100%;
    background-color: #F2F3F4;
    font-size:10;
    text-align:right;
}

A:link {color: #000000; text-decoration: underline; font-size: 10pt;}
A:visited {color: #000000; text-decoration: underline; font-size: 10pt;}
A:hover {color: #A02030; text-decoration: none; font-size: 10pt;}

/*menu déroulants */
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:45em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:https://fonts.google.com/specimen/Oswald ;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

 /* Style de la barre de progression */
        #progress-bar {
            width: 100%;
            height: 30px;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        #progress-bar-fill {
            height: 100%;
            background-color: #4caf50;
            width: 0%;
        }




/* Style de la lightbox */
.lightbox {
            display: none; /* La lightbox est cachée par défaut */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .lightbox-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }

        .close-btn {
            background-color: red;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            right: 10px;
        }
		
		

/* === Media Queries === */

/* Petits appareils (mobiles) */
@media (max-width: 600px) {
  h1 {
    font-size: 1.5em;
  }

  .col {
    flex: 100%;
  }
}

/* Moyens appareils (tablettes) */
@media (min-width: 601px) and (max-width: 1024px) {
  h1 {
    font-size: 2em;
  }

  .col {
    flex: 50%;
  }
}

/* Grands écrans (desktop) */
@media (min-width: 1025px) {
  h1 {
    font-size: 2.5em;
  }

  .col {
    flex: 1;
  }
}