@font-face {
  font-family: "AlegreyaThin";
  src: url(../font/alegreyaSans/AlegreyaSans-Thin.ttf);
}

@font-face {
  font-family: "Alegreya";
  src: url(../font/alegreyaSans/AlegreyaSans-Regular.ttf);
}

@font-face {
  font-family: "AlegreyaBold";
  src: url(../font/alegreyaSans/AlegreyaSans-Bold.ttf);
}

@font-face {
  font-family: "AlegreyaBlack";
  src: url(../font/alegreyaSans/AlegreyaSans-Black.ttf);
}

@font-face {
  font-family: "Fredericka";
  src: url(../font/frederickatheGreat/FrederickatheGreat-Regular.ttf);
}

:root {
  --color-one: #032e15;

  --color-two: #2d7a4d;

  --color-three: #8cd1a7;

  --color-light: rgb(227, 255, 239);

  --color-four: #e1ad01;
  --color-fourlight: #e1ad01ab;
  /* --color-four: #ded052; C1B125*/

  --color-five: #fff;

  --color-six: #000;
}

* {
  font-family: "Alegreya", Arial, Helvetica, sans-serif;
  
}

main {
  min-height: 81vh;
}

img {
  width: 100%;
}

section {
  padding: 1rem;
}

.dnone {
  display: none;
}
.dblock {
  display: block;
}
.gris,
.help-text {
  color: grey;
}
.gras {
  font-weight: bold;
}
.df {
  display: flex;
  flex-wrap: wrap;
}

/* Messages flash */

.alert-success .alert-message {
  background-color: rgba(0, 100, 0, 0.3);
  color: darkgreen;
  padding: 1rem;
  font-weight: bold;
  width: 100%;
}

.alert-danger .alert-message {
  background-color: rgba(220, 20, 60, 0.3);
  color: crimson;
  padding: 1rem;
  font-weight: bold;
  width: 100%;
}

.alert-warning .alert-message {
  background-color: rgba(255, 140, 0, 0.3);
  color: darkorange;
  padding: 1rem;
  font-weight: bold;
  width: 100%;
}
.alert-warning-jaune .alert-message {
  background-color: rgba(222, 208, 82, 0.3);

  color: rgb(201, 184, 34);
  padding: 1rem;
  font-weight: bold;
  width: 100%;
}

.alert-warning-bleu .alert-message {
  background-color: rgba(105, 134, 230, 0.3);

  color: rgb(201, 184, 34);
  padding: 1rem;
  font-weight: bold;
  width: 100%;
}
/* Titres */

h1 {
  font-family: "AlegreyaBold", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.1rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 1rem;
}

/* IMAGES */
.avatar {
  max-width: 5rem;
}

.avatar img {
  border-radius: 50%;
  border: 4px solid var(--color-four);
  box-shadow: 0 4px 8px #0000001a, 0 2px 5px 2px #0000000f;
}

.familleAvatar {
  max-width: 150px;
}

.familleAvatar img,
.amiAvatar img {
  border: 4px solid var(--color-three);
}

/* Boutons  */

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

.groupeBtnModifSupp {
  justify-content: space-between;
}
.groupeBtnModifSupp .modifSupp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.groupeBtnModifSupp .modifSupp i {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btnOk,
.btnModifier,
.btnSupprimer,
.btnRetour {
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 100;
  padding: 0.5rem;
  width: fit-content;
  min-width: 5rem;
  height: 2rem;
}

.btnOk {
  background-color: var(--color-three);
  color: var(--color-one);
}

.btnModifier {
  background-color: var(--color-one);
  color: var(--color-three);
}

.btnSupprimer {
  background-color: var(--color-four);
}

.btnRetour {
  background-color: var(--color-five);
  border: 1px solid gray;
}

/*  Icones */

.iconeAjout,
.iconeModifier,
.iconeSupprimer {
  padding: 0.3rem;
}
.iconeAjout i,
.iconeModifier i,
.iconeSupprimer i {
  font-size: 1.2rem;
}

.iconeAjout {
  color: var(--color-three);
}
.iconeOk {
  background-color: var(--color-three);
  color: var(--color-light);
  border-radius: 5px;
}
.iconeModifier {
  color: var(--color-two);
}
.iconeSupprimer {
  color: var(--color-four);
  background-color: #ffffff00;
}

/* formulaires */

input {
  max-width: 30rem;
}

.form-field {
  padding: 0.7rem 0;
  margin-top: 0;
  margin-bottom: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 1rem;
}

/* formulaire search */
#search form {
  display: flex;
  flex-wrap: nowrap;

}
#search form input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 40px;
}
#search form button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 40px;
  border: 1px solid var(--color-three);
}
/* *********************** 
   RESPONSIVE DESKTOP
   ************************ */

@media screen and (min-width: 576px) {

  
  /*fin responsive*/
}