@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");

body {
  font-family: "Roboto", sans-serif;
}


.container h1 {
  text-align: center;
  font-family: sans-serif;
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.container h2 {
  text-align: center;
  font-family: sans-serif;
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #444;
}

.container p {
  text-align: center;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #555;
}



form {
  max-width: 500px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: sans-serif;

  display: flex;
  flex-direction: column;
}



label {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
}

input, select, textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  border: 1px solid #aaa;
  border-radius: 4px;
}

textarea { height: 100px; min-height: 80px; resize: vertical; }

button {
  margin-top: 1.5rem;
  margin-left: auto; /* pousse le bouton à droite */
  padding: 0.7rem 1.2rem;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}




.row {
    display: flex;
    gap: 1rem;
}

.row > div {
    display: flex;
    flex-direction: column;
}

.w1 { flex: 1; }
.w2 { flex: 2; }
.w3 { flex: 3; }
.w4 { flex: 4; }
.w5 { flex: 5; }


.grid {
    display: grid;
    gap: 1rem;              /* spacing between cells */
    grid-template-columns: repeat(12, 1fr);  /* 12‑column system */
}

/* Column spans */
.col1  { grid-column: span 1; }
.col2  { grid-column: span 2; }
.col3  { grid-column: span 3; }
.col4  { grid-column: span 4; }
.col5  { grid-column: span 5; }
.col6  { grid-column: span 6; }
.col7  { grid-column: span 7; }
.col8  { grid-column: span 8; }
.col9  { grid-column: span 9; }
.col10 { grid-column: span 10; }
.col11 { grid-column: span 11; }
.col12 { grid-column: span 12; }


/* Answer message box */
.message-box { background: #e8f7e4; border: 1px solid #8bc98b; padding: 12px 16px; margin-bottom: 20px; border-radius: 6px; font-size: 1rem; }