@font-face {
  font-family: 'VAG Rounded';
  src: url('../Files/FONTS/VAGRounded.otf?v=<?=time()?') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   
  align-items: center;
  padding-top: 60px;             
  color: #FFA500;
  background-color: #808080;
  font-family: 'VAG Rounded', Arial, sans-serif;
  background-image: url('../Files/IMG/fond_new.jpg?v=<?=time()?>');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center ;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="text"],
input[type="number"],
select
{
      text-align: center;
      font-family: 'VAG Rounded',Arial, sans-serif;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

option
{
  text-align:center;
}

table {
  min-width: 500px;
  margin-top: 2px;
  margin-left: auto;
  margin-right: auto;
  table-layout: auto;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  padding: 1px 12px;
}

.orange th {
  background-color: #FFA500;
  color: #232729;
  font-weight: bold;
  font-size: 1.15em;
  border-bottom: 3px solid #FFA500;
}

.cloud {
  background: rgba(255,255,255,0.18);      
  border-radius: 24px;                    
  box-shadow: 0 8px 32px rgba(31,38,135,0.12); 
  backdrop-filter: blur(8px);              
  -webkit-backdrop-filter: blur(8px);      
  border: 1px solid rgba(255,255,255,0.25);
  padding: 1px 40px;                     
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

.green {
  display: inline-block;
  text-align:center;
  padding: 10px 14px;
  border-radius: 40px;
  background: #232729;
  color: #50C878;      
  font-size: 1em;
  border: 2px solid #65e06d; 
  box-shadow: 0 0 8px #27ff8a30;
  margin-top: 10px;
}

.orange {
  border: 2px solid #FFA500;
  border-radius: 5px;
  background: #232729;
  color: #FFA500;
  padding: 8px;
  font-size: 1.1em;
  outline: none;
  margin-bottom: 20px;
}

.white {
  font-family: 'VAG Rounded', Arial, sans-serif;
  display: inline-block;
  text-align: center;
  padding: 6px 20px;         
  border-radius: 40px;
  background: #232729;
  color: #fff;           
  font-size: 1em;
  border: 2px solid #fff; 
  box-shadow: 0 0 6px #ffffff4c;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-bottom: 10px;
}

.white:hover {
  background: #fff;
  color: #232729;
  border-color: #fff;
}

.blue {
  font-family: 'VAG Rounded', Arial, sans-serif;
  display: inline-block;
  text-align: center;
  padding: 6px 20px;         
  border-radius: 40px;
  background: #232729;
  color: #279ddd;           
  font-size: 1em;
  border: 2px solid #279ddd; 
  box-shadow: 0 0 6px #ffffff4c;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-bottom: 10px;
}

.blue:hover {
  background: #279ddd;
  color: #232729;
  border-color: #279ddd;
}

.btn {
  font-family: 'VAG Rounded', Arial, sans-serif;
  display: inline-block;
  text-align: center;
  padding: 6px 20px;         
  border-radius: 40px;
  background: #fff;
  color: #A9A9A9;           
  font-size: 1em;
  border: 2px solid #A9A9A9; 
  box-shadow: 0 0 6px #A9A9A94D;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-top: 10px;
  margin-bottom: 10px;
}

#travail_oui.selected,
#travail_oui:hover {
  background: #232729;
  color: #238B22 ;
  box-shadow: none ;
  border-color: #238B22;
}

#travail_non.selected,
#travail_non:hover {
  background: #232729;
  color: #8B0000;
  box-shadow: none ;
  border-color: #8B0000;
}

#msg-nom,
#msg-prenom,
#msg-age {
  margin-top: 0;
}

.red {
  margin:15px;
  display: inline-block;
  text-align:center;
  padding: 10px 14px;
  border-radius: 40px;
  background: #232729;
  color: #FF0000;      
  font-size: 1em;
  border: 2px solid #FF0000;
  box-shadow: 0 0 6p #FF00004c;
  margin-top: 10px;
}

.redimension {
  width: 140px;
  height: auto;
  margin-bottom: 15px;
}

.alert {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alert .orange {
  margin-top: 10px;
  margin-bottom: 0px;
}

.alert .red {
  margin-top:0px;
  margin-bottom: 0px;
}
.alert .white{
  margin-top:0px;
}

.boutons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px; 
}

a[href="index.html"] {
    text-decoration: none;
}