:root {
    /* Default (light) theme */
    --col-fond: #f5efe6;
    --col-fond-accent: #ead2cd;
    --col-txt: #212121;
    --col-txt-light: #585858;
    --col-txt-ombre: #5858588b;
    --col-bord: #898EA4;
    --col-btn: #0d47a1;
    --col-btn-vol: #0b069f;
    --col-code: #d81b60;
    --col-surligne: #ffdd33;
    --col-desactive: #efefef;
    --col-blanc:#fff;
    --col-noir:#000;
}
* {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-rows: 1fr 4fr 1fr 1fr; */
  grid-template-rows: 60px auto 60px 30px;
  grid-auto-columns: auto;
  grid-auto-rows: auto auto auto minmax(20px, 60px);
  gap: 3px 0px;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "entete entete entete"
    "contenu contenu contenu"
    "piedepage piedepage piedepage"
    "copydroits copydroits copydroits";
}

.entete {
  grid-area: entete;
  justify-self: center;
  align-self: center;
  background-color: var(--col-fond-accent);
  border-radius: 20px;
  padding: 20px 40px 10px 40px;
}

/* Format navigation */
.entete nav {
    font-size: 1rem;
    line-height: 2;
    padding: 1rem 0 0 0;
}

.entete nav a,
.entete nav a:visited {
    margin: 0 0.5rem 1rem 0.5rem;
    border: var(--col-bord) solid 1px;
    border-radius: 10px;
    color: var(--col-btn);
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
    text-decoration-color: var(--col-fond);
}

.entete nav a:hover,
.entete nav a.current,
.entete nav a[aria-current="page"],
.entete nav a[aria-current="true"] {
    background: var(--col-btn-vol);
    border-color: var(--col-bord);
    color: var(--col-fond-accent);
    text-decoration-color: var(--col-fond);
    cursor: pointer;
}










.contenu {
  grid-area: contenu;
  justify-self: stretch;
  align-self: start;
}

.contenu form {
  color: var(--col-txt-light);
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
  width: 380px;
  max-width: 380px;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
}


.contact-form button {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

.choix-radio {
  display: flex;
  width: 250px;

}

.piedepage {
  background-color: var(--col-fond-accent);
  padding: 10px 30px 0 30px;
  border-radius: 20px;
  grid-area: piedepage;
  justify-self: center;
  align-self: center;
}

.piedepage nav {
    display: flex;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
}

.piedepage nav a,
.piedepage nav a:visited {
    margin: 0 0.5rem 1rem 0.5rem;
    border-radius: 10px;
    color: var(--col-btn-vol);
    display: inline-block;
    padding: 0.1rem 1rem;
    text-decoration: none;
}

.piedepage nav a:hover,
.piedepage nav a.current,
.piedepage nav a[aria-current="page"],
.piedepage nav a[aria-current="true"] {
    background: var(--col-btn-vol);
    border-color: var(--col-txt);
    color: var(--col-fond);
    text-decoration-color: var(--col-fond);
    cursor: pointer;
}


.copydroits {
  grid-area: copydroits;
  font-size: xx-small;
  font-style: italic;
  justify-self: center;
  align-self: center;
}




/* .container * {
  border: 1px solid red;
  position: relative;
} */