*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

/*------ STYLE GENERALITE --------- */
.flex{display: flex;}
.space-between{justify-content: space-between;}
.center{text-align: center;}
.none{display: none;}
a{text-decoration: none;color: inherit;}
li{list-style: none;}

.w05{width: 5%;}
.w10{width: 10%;}
.w20{width: 20%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}

.icone{padding: 5px 10px;}

/*--------------------------------- */
html,body{height: 100%;margin: 0;
  background: linear-gradient(var(--blue-1),var(--blue-4));
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;}


  
body{
    display: grid;
    grid-template-areas: 
    'header header header'
    'main main main'
    'footer footer footer';
    grid-template-rows: 150px 1fr 50px;
}

header{
    grid-area: header;
    display: grid;
    grid-template-areas: 
    'parametre titre connexion'
    'logo navbar .';
    grid-template-columns: 1fr 4fr 1fr;
    border-bottom: 2px solid ;
    /* grid-template-rows: 30px 50px; */
}

main{
  grid-area: main;

}

footer{
  grid-area: footer;
}

/* ----- CONTENU DU HEADER ----- */
.titrepage{
  grid-area: titre;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.navbar{
  grid-area: navbar;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-menu{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 15px;
}

#connexion{
  grid-area: connexion;
  display: flex;
  align-items: center;
  justify-content: center;

}

#parametre{
  grid-area: parametre;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- CONTENU DU MAIN ------- */

/* ----- LOGIN PAGE ------- */

.logo-line{display: flex;justify-content: center;padding: 20px 0 20px 0;}
.logo-line img{width: 150px;height: 150px;padding: 10px;}
#cmfp{width: 70%;height: 70%;}

.section-content{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.login-form-content{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-form{
  width: 40%;
  border: 2px solid var(--gray-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--blue-2);
}

.stagiaire-form{
  width: 60%;
  border: 2px solid var(--gray-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--blue-2);
}

.form-sided{
  width: 100%;
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 1fr 1fr;
}

.right-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.line-input{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  text-align: left;
}

.line-select{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.line-input-img{
  display: flex;
  flex-direction: column;
}

.line-input-img img{
  width: 200px;
  height: 200px;
  padding: 15px;
}

.line-choix{
  display: flex;
  justify-content: space-evenly;
  margin: 15px;
  align-items: center;
}

.line-btn{
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  padding: 15px;
}


#mdp-oublie{text-decoration: underline; color: blue;}

/* -------- BATIMENTS LISTE -------- */

.list-batiment{
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.card-bat{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid var(--gray-7);
  border-radius: 5px;
}


.card-bat img{
  width: 100%;
  height: auto;
}

.card-bat h2{padding: 5px;}

.desc-bat{
  padding: 5px;
}

.desc-hebergement{
  padding: 5px;
  text-align: left;
  margin-left: 30%;

}
.desc-hebergement li{
  list-style: circle;
  margin-left: 10px;
  list-style-position: inside;
}

.info-bat{
  padding-top: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

}

/* ------- BATIMENT DETAIL ----- */

.header-section{
  display: grid;
  grid-template-areas: 
  '. titre btn';
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  position: relative;

}

.searcharea{
  display: flex;
  justify-content: center;
  align-items: center;
}

.searcharea input{
  border-radius: 5px;
  width: 70%;
  height: 50%;

}

.header-section::after{
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background-color: var(--blue-12);
  position: absolute;
  bottom: 0;
  left: 25%;
}

.btn-centre{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.etage-content{
  width: 90%;
  margin: auto;
  padding: 30px 0;
  position: relative;
}

.etage-content::after{
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background-color: var(--blue-12);
  position: absolute;
  bottom: 0;
  left: 25%;
}

.etage-content h3{
  padding-bottom: 10px;
  margin-left: 15px;
}


.modal{
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

/* -------- LES FORMATIONS ---- */

.tableaux{width: 90%;margin: auto;text-align: center; height: 100%;}
.tableaux tbody{text-align: center;}
.tableaux th, .tableaux td{height: 25px;}
.tableaux h3{padding: 10px;}

.description{padding: 10px;}

.dateSearch{
  width: 30% !important;
  margin: 0 10px;
}

.img-tab{
  width: 50px;
  height: 50px;
}



/* ------- FICHES STAGIAIRES ----- */

.fiche-container{
  display: grid;
  grid-template-areas: 
  'header'
  'informations';
  width: 80%;
  margin: auto;
  margin-top: 20px;
  border: 3px solid var(--blue-11);
  padding: 20px;

}

.fiche-header{
  display: grid;
  grid-template-areas: 'photo contact';
  
}
.fiche-photo{display: flex;justify-content: center;align-items: center;}
.fiche-contact{display: flex;flex-direction: column;justify-content: center;}
.fiche-photo img{width: 200px; height: 200px;}

.fiche-main{
  grid-area: informations;
  padding: 30px 0px 30px 150px;
}

.info{padding: 15px 0;}



/* --------- LES BOUTON ----------- */

button{all: unset;cursor: pointer;}

.btn{
    border-radius: 10px;
    min-width: 100px;
    padding: 10px;
    /* height: 100%; */
    text-align: center;
    background-color: var(--blue-4);
}

.btn-card{
  border-radius: 10px;
  min-width: 100px;
  padding: 10px;
  /* height: 100%; */
  text-align: center;
  background-color: var(--blue-4);
  margin: 5px;
  display: inline-block;

}

.btn-icone{
  cursor: pointer;
}

.btn.red{
  background-color: #ff4d4d;
}

.btn.green{
  background-color: #4CAF50;
}

.btn.blue{background-color: #3b82f6;}
.btn.blue:hover{background-color: #2563eb;}

.btn.green:hover{background-color: #388E3C;}

.btn.red:hover{
  background-color: #cc0000;
}

.btn:hover{background-color: var(--blue-5);cursor: pointer;color: black;}
.btn-card:hover{background-color: var(--blue-5);cursor: pointer;}

.active{background-color: var(--blue-12);color: white;}

/*------   LES TABLEAUX   -------------*/

table{border-collapse: collapse;width: 100%;margin: 15px;}
table td,table th{border: 1px solid black;}

.table-etage td{text-align: center;}

tbody{min-height: 50vh;}



/*--- COULEURS ---*/




  

/*---------- RADIX COLORS ------------*/
.gradiant{background: linear-gradient(var(--blue-1),var(--blue-7));}

:root, .light, .light-theme {
  --blue-1: #fcfdff;
  --blue-2: #f6f9ff;
  --blue-3: #ebf2ff;
  --blue-4: #deeaff;
  --blue-5: #cde0ff;
  --blue-6: #bad2ff;
  --blue-7: #a3c0fc;
  --blue-8: #81a7f5;
  --blue-9: #3d74f5;
  --blue-10: #3568e0;
  --blue-11: #3062da;
  --blue-12: #182f63;

  --blue-a1: #0055ff03;
  --blue-a2: #0055ff09;
  --blue-a3: #005aff14;
  --blue-a4: #005dff21;
  --blue-a5: #0061ff32;
  --blue-a6: #0059ff45;
  --blue-a7: #0051f75c;
  --blue-a8: #004deb7e;
  --blue-a9: #0048f2c2;
  --blue-a10: #0041d8ca;
  --blue-a11: #003ed2cf;
  --blue-a12: #001953e7;

  --blue-contrast: #fff;
  --blue-surface: #f4f8ffcc;
  --blue-indicator: #3d74f5;
  --blue-track: #3d74f5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.4% 0.0025 263.9);
      --blue-2: oklch(98.2% 0.0091 263.9);
      --blue-3: oklch(96% 0.019 263.9);
      --blue-4: oklch(93.6% 0.0365 263.9);
      --blue-5: oklch(90.5% 0.0541 263.9);
      --blue-6: oklch(86.3% 0.0721 263.9);
      --blue-7: oklch(80.8% 0.0904 263.9);
      --blue-8: oklch(73.3% 0.1212 263.9);
      --blue-9: oklch(59.5% 0.2024 263.9);
      --blue-10: oklch(55.2% 0.1912 263.9);
      --blue-11: oklch(53.5% 0.1912 263.9);
      --blue-12: oklch(31.9% 0.0967 263.9);

      --blue-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --blue-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
      --blue-a3: color(display-p3 0.0078 0.3216 0.949 / 0.075);
      --blue-a4: color(display-p3 0.0039 0.3255 0.9373 / 0.122);
      --blue-a5: color(display-p3 0.0039 0.3098 0.9373 / 0.181);
      --blue-a6: color(display-p3 0.0039 0.2824 0.9412 / 0.251);
      --blue-a7: color(display-p3 0.0039 0.2588 0.9098 / 0.338);
      --blue-a8: color(display-p3 0.0039 0.2471 0.8667 / 0.463);
      --blue-a9: color(display-p3 0 0.2275 0.902 / 0.71);
      --blue-a10: color(display-p3 0 0.1961 0.7922 / 0.742);
      --blue-a11: color(display-p3 0 0.1843 0.7686 / 0.761);
      --blue-a12: color(display-p3 0 0.0745 0.298 / 0.887);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
      --blue-indicator: oklch(59.5% 0.2024 263.9);
      --blue-track: oklch(59.5% 0.2024 263.9);
    }
  }
}

:root, .light, .light-theme {
  --gray-1: #fdfdfc;
  --gray-2: #faf9f7;
  --gray-3: #f1f0ed;
  --gray-4: #eae9e4;
  --gray-5: #e2e1dc;
  --gray-6: #dbd9d3;
  --gray-7: #d0cfc7;
  --gray-8: #bebbb1;
  --gray-9: #908d81;
  --gray-10: #858277;
  --gray-11: #65635a;
  --gray-12: #222019;

  --gray-a1: #55550003;
  --gray-a2: #60400008;
  --gray-a3: #392b0012;
  --gray-a4: #3930001b;
  --gray-a5: #2c250023;
  --gray-a6: #2f23002c;
  --gray-a7: #29250038;
  --gray-a8: #2b21004e;
  --gray-a9: #1f19007e;
  --gray-a10: #1b150088;
  --gray-a11: #110e00a5;
  --gray-a12: #0a0800e6;

  --gray-contrast: #FFFFFF;
  --gray-surface: #ffffffcc;
  --gray-indicator: #908d81;
  --gray-track: #908d81;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: oklch(99.4% 0.0019 95.41);
      --gray-2: oklch(98.2% 0.0025 95.41);
      --gray-3: oklch(95.6% 0.0039 95.41);
      --gray-4: oklch(93.2% 0.0058 95.41);
      --gray-5: oklch(91% 0.0065 95.41);
      --gray-6: oklch(88.6% 0.0085 95.41);
      --gray-7: oklch(85.3% 0.0106 95.41);
      --gray-8: oklch(79.2% 0.0142 95.41);
      --gray-9: oklch(64.1% 0.0175 95.41);
      --gray-10: oklch(60.6% 0.0164 95.41);
      --gray-11: oklch(49.8% 0.0135 95.41);
      --gray-12: oklch(24.3% 0.0135 95.41);

      --gray-a1: color(display-p3 0.349 0.349 0.0235 / 0.012);
      --gray-a2: color(display-p3 0.3882 0.2667 0.0196 / 0.032);
      --gray-a3: color(display-p3 0.2275 0.1725 0.0078 / 0.071);
      --gray-a4: color(display-p3 0.2235 0.1882 0.0039 / 0.106);
      --gray-a5: color(display-p3 0.1765 0.149 0.0078 / 0.138);
      --gray-a6: color(display-p3 0.1647 0.1216 0.0039 / 0.169);
      --gray-a7: color(display-p3 0.149 0.1294 0.0039 / 0.216);
      --gray-a8: color(display-p3 0.1451 0.1176 0.0039 / 0.302);
      --gray-a9: color(display-p3 0.1059 0.0902 0.0039 / 0.491);
      --gray-a10: color(display-p3 0.0902 0.0745 0 / 0.53);
      --gray-a11: color(display-p3 0.0627 0.051 0 / 0.644);
      --gray-a12: color(display-p3 0.0353 0.0275 0 / 0.899);

      --gray-contrast: #FFFFFF;
      --gray-surface: color(display-p3 1 1 1 / 80%);
      --gray-indicator: oklch(64.1% 0.0175 95.41);
      --gray-track: oklch(64.1% 0.0175 95.41);
    }
  }
}

:root, .light, .light-theme, .radix-themes {
  --color-background: #fff;
}