@charset "UTF-8";
@font-face{font-family:"mont-bold";src:url(../fonts/mont-bold.woff) format("woff2");font-weight: normal;font-style: normal;}
@font-face {font-family: "monregular";src:url(../fonts/mont-regular.woff) format("woff2");font-weight: normal;font-style: normal;}
body, html{font-family: "monregular",sans-serif; background-color:#dedede;color:navy;font-size:20px;}
.site{padding-top:1%;}
.menu ul {  display: flex; list-style: none;  margin: 0;  padding: 0;  gap: 10px; }
.menu a { border-radius: 5px; text-decoration: none;  color: navy;  font-family: sans-serif;  font-weight: bold;  padding:5px;  padding-bottom:5px;  padding-left:5px; }/* Styles des liens */
.menu a:hover {  color: navy;  background-color:white;  border:1px solid #007bff;}
.submenu {  display: none !important;  position: absolute;  background-color: white;  list-style: none;  padding: 0;  margin: 0;  z-index: 1;}/* Cacher le sous-menu par défaut */
.has-submenu:hover .submenu {  display: block !important;}/* Afficher le sous-menu quand on survole l'élément parent */
.submenu li {  width: 100%;}/* Style des éléments du sous-menu */
.submenu a {  padding: 5px 5px;  color: navy;  display: block;}
.title{color:navy;font-size:24px;font-family: mont-bold; }
.cellTitle {border:2px solid white;   font-size:20px; padding: 10px;margin-left:25%;text-align:center;width:50%;color:navy;font-family: mont-bold;}
.cellForm { border: 2px solid white; font-size:20px; padding: 10px; }
.texte{font-size:18px;}
.blocarrondi{background-image: linear-gradient(to right,lightblue, #ffffff,#ffffff,lightblue);border-radius: 15px;border:2px solid white;}
.bloc1100pc {background-image: linear-gradient(to right,lightblue, #ffffff,#ffffff,lightblue);border-radius: 15px;border:2px solid white;font-size:30px; padding: 5%;text-align: justify;}
.table {display: grid; grid-template-columns: repeat(3, calc(32% - (2 * 10px / 3)));gap:10px;justify-content: start;}
.cell {width: 95%; /* Prend toute la largeur de la colonne définie */ }
.rotationHorizontale { transform: rotateY(180deg);}
.dyna{ --couleur-bg: #0ff;   background-color: var(--couleur-bg);  color: navy;   padding: 2%;  margin: 10px;  border:2px solid white;  border-radius: 15px;
  transition: background-color 0.3s ease; /* Animation douce */   background-image: linear-gradient(to right,var(--couleur-bg), #ffffff,#ffffff,#ffffff,#ffffff,#ffffff, var(--couleur-bg));
}
.w100L{	width:100%;float:left;}
.champ{height:35px;width:250px;font-size:18px;color:#303030;}
.center{text-align:center}
header{display:flex;}
h2{font-size:28px;font-family:mont-bold;}
/*****menu sandwich*******/
.navbar {  position: relative;  font-size:24px;padding: 10px;  align-items: center;  justify-content:space-evenly;  background:background-image: linear-gradient(to right,#00eeff, #ffffff, #00ddff);/* Adaptez selon votre design */}
.navbar-content {display: flex;  align-items: center;  justify-content: space-evenly;}
.logo img {  max-width: 25%;  display: block;margin-left:2%;margin-top:1%; }
.menu ul {  display: flex;  list-style: none;  margin: 0;  padding: 0;}/* Menu horizontal par défaut */
.menu ul li {  margin-left: 10px;  position: relative;}
/* Gestion simple des sous-menus au survol (Desktop) */
.menu ul .submenu {  display: none;  position: absolute;  top: 100%;  left: 0;  background: #fff;  box-shadow: 0 2px 5px rgba(0,0,0,0.2);  flex-direction: column;  width: 200px;font-size:18px;}
.menu ul li:hover .submenu {  display: flex;}
.nav-toggle{display:none;}/* --- Cacher l'élément de contrôle et le bouton hamburger sur PC --- */
.nav-toggle-label{display:none;order: 2;margin-left: 15px;}
/* --- VERSION MOBILE (Max 768px) --- */
@media screen and (max-width: 768px)
{
  .navbar{width:100%;}
  .table{grid-template-columns:1fr;}
  .cellTitle{margin-left:auto;border:2px solid white;font-size:20px;padding:10px;text-align:center;color:navy;width:80%;}
  .nav-toggle-label{display:block;cursor:pointer;padding:10px;z-index:1001;}
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {display:block;background:navy;height: 3px;width: 25px;position:relative;border-radius:2px;}
  .nav-toggle-label span::before,
  .nav-toggle-label span::after{content: '';position:absolute;}
  .nav-toggle-label span::before{bottom:8px;}
  .nav-toggle-label span::after{top:8px;}
  .nav-toggle:checked ~ .nav-toggle-label span {background: transparent;}
  .nav-toggle:checked ~ .nav-toggle-label span::before{transform: rotate(45deg);bottom:0;}
  .nav-toggle:checked ~ .nav-toggle-label span::after{transform: rotate(-45deg);top:0;}
  .navbar-content{flex-direction:column;align-items:flex-start;}
  .menu{width:100%;display:none;margin-top: 15px;}
  .menu ul {flex-direction:column;width:100%;}
  .menu ul li{margin: 0;width: 100%;border-bottom: 1px solid #eee;}
  .menu ul li a{display:block;padding: 15px;text-decoration: none;color:navy;}
  /* Sous-menus toujours visibles ou cliquables sur mobile */
  .menu ul .submenu {position: static;box-shadow: none;background: #f9f9f9;width: 100%;display: none; /* À gérer avec un peu de JS ou CSS :target si besoin */}
  .menu ul li:hover .submenu {display: flex;} /* afficher les sous-menus au survol ou clic sur mobile */
  .nav-toggle:checked ~ .navbar-content .menu {display: block;} /* OUVERTURE DU MENU : Si la checkbox est cochée, on affiche le menu */
  .logo{order: 1;} /* Le logo reste à gauche (ordre par défaut ou order: 1) */
}