/* FONT */

@font-face {
  font-display: swap;
  font-family: "Germania One";
  font-style: normal;
  font-weight: 400;
  src: url('../../font/germaniaone/germaniaone.woff2') format("woff2");
}

@media (width>= 769px) {
  /* -------------------- */

   /*  ------body--------  */

  /*  ------------------  */

  body {
    font-family: "Germania One", sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  /* HEADER */

  .site-header {
    background-color: #007cb7;
    padding: 20px;
    width: 100%;
  }

  .site-header .logo {
    height: 50px;
    width: auto;
  }

  /* ------------------------- */

  /* ------CONTAINER PRINCIPAL-------- */

  /* -------------------------------- */

  main {
    margin: 10px auto 0;
    max-width: 1000px;
    padding: 0 20px;
  }

  /* HOME */

  .accueil nav ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }

  .accueil nav ul li::before {
    color: black;
    content: "> ";
    font-weight: 700;
  }

  .accueil nav ul li a {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* TITLE */

  .title {
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }

  /* ADMISSION BOX */

  .admission-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    text-align: justify;
    width: 100%;
  }

  .admission-box h2 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
  }

  .admission-footer {
    color: black;
    font-weight: 700;
    margin: 0;
  }

  .admission-footer p {
    margin: 0;
  }

  /* REGISTRATION BOX */

  .registration-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
  }

  .registration-box h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    margin-top: 0;
    text-align: center;
  }

  .registration-form {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr)
        minmax(0, 1fr)
        minmax(0, 2fr);
    width: 100%;
  }

  .registration-form span {
    color: #373737;
    font-size: 1rem;
  }

  input,
  select,
  textarea {
    padding: 5px 8px;
  }

  .registration-form select {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    color: #373737;
    cursor: pointer;
    font-size: 1rem;
  }

  .registration-form label {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
  }

  .registration-form input {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    text-align: left;
  }

  .registration-form textarea {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: 2 / 5;
    height: 130px;
    resize: vertical;
  }

  .addresse {
    display: grid;
    gap: 5px;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .sexe label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .sexe input{
    margin-right: 8px;
    text-align: left;
  }

  .connaissances label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .connaissances input{
    margin-right: 8px;
    text-align: left;
  }

  .orientation label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .orientation input{
    margin-right: 8px;
    text-align: left;
  }

  input:valid,
  select:valid {
    border-left: 4px solid #218838;
  }

  input:invalid,
  select:invalid {
    border-left: 4px solid #c82333;
  }

  .addresse input:first-child{
    grid-column: 1 / 3;
  }

  /* noinspection CssInvalidPseudoSelector */
  input[type="date"]::-webkit-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  /* noinspection CssInvalidPseudoSelector */
  input[type="date"]::-moz-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="checkbox"]:hover,
  input[type="radio"]:hover {
    cursor: pointer;
  }

  .button{
    margin-top: 40px;
    text-align: center;
  }

  .button button {
    background-color: #007cb7;
    border: 2px solid black;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 50px;
  }

  .button button:hover {
    background-color: #005680;
  }

  /* FOOTER */

  .site-footer {
    background-color: #373737;
    color: #fff;
    font-size: 1rem;
    padding: 6px;
    text-align: center;
    width: 100%;
  }







.form .row {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.form label {
  font-weight: bold;
  margin-bottom: 6px;
}

.form input,
.form select,
.form textarea {
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px;
}

.inline {
  display: flex;
  gap: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.submit {
  background: #0080d0;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  margin-top: 20px;
  padding: 12px;
  width: 150px;
}

.submit:hover {
  background: #0069b3;
}

.footer {
  color: #444;
  font-size: 14px;
  padding: 25px;
  text-align: center;
}

}





@media (width >= 480px) and (width <= 768.5px) {
  /* BODY */
  body {
    font-family: "Germania One", sans-serif;
    font-size: 1rem;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
  }

  /* HEADER */
  .site-header {
    background-color: #007cb7;
    padding: 20px;
    position: sticky;
    top: 0;
    width: 100%;
  }

  .site-header .logo {
    height: 50px;
    width: auto;
  }

  /* MAIN */
  main {
    margin: 10px auto 0;
    max-width: 768px;
    padding: 0 20px;
  }

  /* HOME NAV */
  .accueil nav ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
  }

  .accueil nav ul li::before {
    color: black;
    content: "> ";
    font-weight: 700;
  }

  .accueil nav ul li a {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* TITLE */
  .title {
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }

  /* ADMISSION BOX */
  .admission-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    text-align: justify;
    width: 100%;
  }

  .admission-box h2 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
  }

  .admission-footer {
    color: black;
    font-weight: 700;
    margin: 0;
  }

  .admission-footer p {
    margin: 0;
  }

  /* REGISTRATION BOX */
  .registration-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
  }

  .registration-box h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    margin-top: 0;
    text-align: center;
  }

  .registration-form {
    align-items: center;
    display: grid;
    gap: 8px 20px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .registration-form span {
    color: #373737;
    font-size: 1rem;
  }

  input,
  select,
  textarea {
    padding: 5px 8px;
  }

  .registration-form select {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    color: #373737;
    cursor: pointer;
    font-size: 1rem;
    grid-column: inherit;
    min-width: 0;
    width: 100%;
  }

  .registration-form label {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    grid-column: inherit;
    text-align: left;
  }

  .registration-form input {
    align-content: end;
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: inherit;
    min-width: 0;
    text-align: left;
  }

  .registration-form textarea {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: 1 / 3;
    height: 130px;
    resize: vertical;
  }

  .addresse {
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .sexe label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .sexe input {
    margin-right: 8px;
    text-align: left;
  }

  .connaissances label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .connaissances input {
    margin-right: 8px;
    text-align: left;
  }


  label[for="nom"] { grid-column: 1; grid-row: 1; }
  #nom              { grid-column: 1; grid-row: 2; }

  label[for="prenom"] { grid-column: 2; grid-row: 1; }
  #prenom             { grid-column: 2; grid-row: 2; }

  label[for="email"] { grid-column: 1; grid-row: 3; }
  #email             { grid-column: 1; grid-row: 4; }

  label[for="naissance"] { grid-column: 2; grid-row: 3; }
  #naissance             { grid-column: 2; grid-row: 4; }


  .orientation label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .registration-form > label:nth-of-type(5) { grid-column: 1; grid-row: 5; }
  .registration-form > .sexe                { grid-column: 1; grid-row: 6; }

  .registration-form > label:nth-of-type(6) { grid-column: 2; grid-row: 5; }
  #civil                                    { align-self: start; grid-column: 2; grid-row: 6; }

  .registration-form > label:nth-of-type(8) { grid-column: 2; grid-row: 7; }
  #avs                                      { align-self: start; grid-column: 2; grid-row: 8; }

  .registration-form > label:nth-of-type(9) { grid-column: 1; grid-row: 9; }
  .registration-form > .connaissances       { align-self: start; grid-column: 1; grid-row: 10; }

  .registration-form > label:nth-of-type(10) { grid-column: 2; grid-row: 9; }
  .registration-form > .orientation         { align-self: start; grid-column: 2; grid-row: 10; }

  .registration-form > label:nth-of-type(11) { grid-column: 1 / 3; grid-row: 11; }
  #remarque                                  { grid-column: 1 / 3; grid-row: 12; }



  .orientation input {
    margin-right: 8px;
    text-align: left;
  }

  input:valid,
  select:valid {
    border-left: 4px solid #218838;
  }

  input:invalid,
  select:invalid {
    border-left: 4px solid #c82333;
  }

  .addresse input:first-child {
    grid-column: 1 / 3;
  }

  input[type="date"]::-webkit-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="date"]::-moz-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="checkbox"]:hover,
  input[type="radio"]:hover {
    cursor: pointer;
  }

  .button {
    margin-top: 40px;
    text-align: center;
  }

  .button button {
    background-color: #007cb7;
    border: 2px solid black;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 50px;
  }

  .button button:hover {
    background-color: #005680;
  }

  .site-footer {
    background-color: #373737;
    color: #fff;
    font-size: 1rem;
    padding: 6px;
    text-align: center;
    width: 100%;
  }
}













@media (width>= 431px) and (width<=479.5px) {
  /* BODY */

  body {
    font-family: "Germania One", sans-serif;
    font-size: 1rem;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
  }

  /* HEADER */

  .site-header {
    background-color: #007cb7;
    padding: 20px;
    position: sticky;
    top: 0;
    width: 100%;
  }

  .site-header .logo {
    height: 50px;
    width: auto;
  }

  /* CONTAINER PRINCIPAL */

  main {
    margin: 10px auto 0;
    max-width: 1000px;
    padding: 0 20px;
  }

  /* HOME */

  .accueil nav ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
  }

  .accueil nav ul li::before {
    color: black;
    content: "> ";
    font-weight: 700;
  }

  .accueil nav ul li a {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* TITLE */

  .title {
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }

  /* ADMISSION BOX */

  .admission-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    text-align: justify;
    width: 100%;
  }

  .admission-box h2 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
  }

  .admission-footer {
    color: black;
    font-weight: 700;
    margin: 0;
  }

  .admission-footer p {
    margin: 0;
  }

  /* REGISTRATION BOX */

  .registration-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 20px;
  }

  .registration-box h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    margin-top: 0;
    text-align: center;
  }

  .registration-form {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr);
    width: 100%;
  }

  .registration-form span {
    color: #373737;
    font-size: 1rem;
  }

  input,
  select,
  textarea {
    padding: 5px 8px;
  }

  .registration-form select {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    color: #373737;
    cursor: pointer;
    font-size: 1rem;
  }

  .registration-form label {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
  }

  .registration-form input {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    text-align: left;
  }

  .registration-form textarea {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: 1 / 3;
    height: 130px;
    resize: vertical;
  }

  .addresse {
    display: grid;
    gap: 5px;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .sexe label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .sexe input{
    margin-right: 8px;
    text-align: left;
  }

  .connaissances label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .connaissances input{
    margin-right: 8px;
    text-align: left;
  }

  .orientation label{
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .orientation input{
    margin-right: 8px;
    text-align: left;
  }

  input:valid,
  select:valid {
    border-left: 4px solid #218838;
  }

  input:invalid,
  select:invalid {
    border-left: 4px solid #c82333;
  }

  .addresse input:first-child{
    grid-column: 1 / 3;
  }

  input[type="date"]::-webkit-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="date"]::-moz-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="checkbox"]:hover,
  input[type="radio"]:hover {
    cursor: pointer;
  }

  .button{
    margin-top: 40px;
    text-align: center;
  }

  /* SEND BUTTON */

  .button button {
    background-color: #007cb7;
    border: 2px solid black;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 50px;
  }

  .button button:hover {
    background-color: #005680;
  }

  /* FOOTER */

  .site-footer {
    background-color: #373737;
    color: #fff;
    font-size: 1rem;
    padding: 6px;
    text-align: center;
    width: 100%;
  }

}













@media (width <= 430.5px) {
  /* -------------------- BODY -------------------- */
  body {
    font-family: "Germania One", sans-serif;
    font-size: 1rem;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
  }

  /* -------------------- HEADER -------------------- */
  .site-header {
    background-color: #007cb7;
    padding: 20px;
    position: sticky;
    top: 0;
    width: 100%;
  }

  .site-header .logo {
    height: 50px;
    width: auto;
  }

  /* -------------------- MAIN -------------------- */
  main {
    margin: 10px auto 0;
    max-width: 768px;
    padding: 0 20px;
  }

  /* -------------------- HOME NAV -------------------- */
  .accueil nav ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
  }

  .accueil nav ul li::before {
    color: black;
    content: "> ";
    font-weight: 700;
  }

  .accueil nav ul li a {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* -------------------- TITLE -------------------- */
  .title {
    font-size: 2rem;
    margin: 0;
    text-align: center;
  }

  /* -------------------- ADMISSION BOX -------------------- */
  .admission-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    text-align: justify;
    width: 100%;
  }

  .admission-box h2 {
    font-size: 1.5rem;
    margin: 0;
    text-align: left;
  }

  .admission-footer {
    color: black;
    font-weight: 700;
    margin: 0;
  }

  .admission-footer p {
    margin: 0;
  }

  /* -------------------- REGISTRATION BOX -------------------- */
  .registration-box {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 20px 0;
    padding: 20px;
  }

  .registration-box h2 {
    font-size: 1.5rem;
    margin: 0 0 40px;
    text-align: center;
  }

  /* -------------------- FORM -------------------- */
  .registration-form {
    align-items: center;
    display: grid;
    gap: 8px 0;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .registration-form span {
    color: #373737;
    font-size: 1rem;
  }

  input,
  select,
  textarea {
    padding: 5px 8px;
  }

  .registration-form select {
    background-color: #f6f7f8;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    color: #373737;
    cursor: pointer;
    font-size: 1rem;
    min-width: 0;
    width: 100%;
  }

  .registration-form label {
    color: #007cb7;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
  }

  .registration-form input {
    align-content: end;
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    min-width: 0;
    text-align: left;
  }

  .registration-form textarea {
    background-color: #fff;
    border: 1px solid #d6d8db;
    border-radius: 5px;
    font-size: 1rem;
    grid-column: 1;
    height: 130px;
    resize: vertical;
  }

  .addresse {
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .sexe label,
  .connaissances label,
  .orientation label {
    color: #373737;
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-align: left;
  }

  .sexe input,
  .connaissances input,
  .orientation input {
    margin-right: 8px;
    text-align: left;
  }

  /* -------------------- GRID FORM POSITION -------------------- */
  label[for="nom"] { grid-column: 1; grid-row: 1; }
  #nom            { grid-column: 1; grid-row: 2; }

  label[for="prenom"] { grid-column: 1; grid-row: 3; }
  #prenom             { grid-column: 1; grid-row: 4; }

  label[for="email"] { grid-column: 1; grid-row: 5; }
  #email             { grid-column: 1; grid-row: 6; }

  label[for="naissance"] { grid-column: 1; grid-row: 7; }
  #naissance            { grid-column: 1; grid-row: 8; }

  .registration-form > label:nth-of-type(5) { grid-column: 1; grid-row: 9; }
  .registration-form > .sexe                { grid-column: 1; grid-row: 10; }

  .registration-form > label:nth-of-type(6) { grid-column: 1; grid-row: 11; }
  #civil                                    { grid-column: 1; grid-row: 12; }

  .registration-form > label:nth-of-type(7) { grid-column: 1; grid-row: 13; }
  #addresse                                  { grid-column: 1; grid-row: 14; }

  .registration-form > label:nth-of-type(8) { grid-column: 1; grid-row: 15; }
  #avs                                      { grid-column: 1; grid-row: 16; }

  .registration-form > label:nth-of-type(9) { grid-column: 1; grid-row: 17; }
  .registration-form > .connaissances           { grid-column: 1; grid-row: 18; }

  .registration-form > label:nth-of-type(10) { grid-column: 1; grid-row: 19; }
  .registration-form > .orientation       { grid-column: 1; grid-row: 20; }

  .registration-form > label:nth-of-type(11) { grid-column: 1; grid-row: 21; }
  #commentaire                               { grid-column: 1; grid-row: 22; }

  /* -------------------- VALIDATION -------------------- */
  input:valid,
  select:valid {
    border-left: 4px solid #218838;
  }

  input:invalid,
  select:invalid {
    border-left: 4px solid #c82333;
  }

  .addresse input:first-child {
    grid-column: 1 / 3;
  }

  input[type="date"]::-webkit-datetime-edit,
  input[type="date"]::-moz-datetime-edit {
    color: #373737;
    cursor: pointer;
  }

  input[type="checkbox"]:hover,
  input[type="radio"]:hover {
    cursor: pointer;
  }

  /* -------------------- BUTTON -------------------- */
  .button {
    margin-top: 40px;
    text-align: center;
  }

  .button button {
    background-color: #007cb7;
    border: 2px solid black;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 50px;
  }

  .button button:hover {
    background-color: #005680;
  }

  /* -------------------- FOOTER -------------------- */
  .site-footer {
    background-color: #373737;
    color: #fff;
    font-size: 1rem;
    padding: 6px;
    text-align: center;
    width: 100%;
  }
}