@font-face {
    font-family: 'American_Typewriter';
    src: url("../fonts/American_Typewriter_Light.ttf") ;
}
@font-face {
    font-family: 'Baskerville_Bold';
    src: url("../fonts/Baskerville_Bold.otf") ;
}
@font-face {
    font-family: 'Baskerville_CU';
    src: url("../fonts/Baskerville_Cyrillic_Upright.otf") ;
}
@font-face {
    font-family: 'Baskerville_Light';
    src: url("../fonts/Baskerville_Light.ttf") ;
}
@font-face {
    font-family: 'Baskerville_SemiBold';
    src: url("../fonts/Baskerville_SemiBold.ttf") ;
}
@font-face {
    font-family: 'titreAccueilPhoto';
    src: url("../fonts/Birds_of_Paradise.ttf") ;
}

html {
    height: 100%;
    /*
    --color-text-1: rgb(255, 255, 255);
    --color-text-2:  rgb(0, 0, 0);
    --color-text-3:  rgb(121, 199, 118);
    --color-text-4:  rgb(38, 38, 38);
    */
    --color-fond-site: rgb(235, 235, 235);      /* blanc */
    --color-fond-page: rgb(209, 209, 209);      /* gris */
    --color-trait-menu : rgb(255, 255, 255);    /* blanc */
	/* Couleur de texte */
    --color-text-1:  rgb(255, 255, 255);        /* blanc */
    --color-text-2:  rgb(0, 0, 0);              /* noir */
    --color-text-3:  rgb(121, 199, 118);        /* vert */
	/* Couleur de background */
    --color-background-1:  rgb(255, 255, 255);  /* blanc */
    --color-background-2:  rgb(0, 0, 0);        /* noir */
    --color-background-3:  rgb(121, 199, 118);  /* vert */
	/* Couleur de border */
    --color-border-1:  rgb(255, 255, 255);      /* blanc */
    --color-border-2:  rgb(0, 0, 0);            /* noir */
    --color-border-3:  rgb(121, 199, 118);      /* vert */
	/* Couleur de box-shadow */
    --color-box-shadow-1:  rgb(255, 255, 255);  /* blanc */
    --color-box-shadow-2:  rgb(0, 0, 0);        /* noir */
    --color-box-shadow-3:  rgb(121, 199, 118);  /* vert */
}
  
body {
    font-family : 'American_Typewriter', 'Baskerville_Bold', 'Baskerville_Light','Baskerville_SemiBold', sans-serif;
    background-color: var(--color-fond-site);
    color : var(--color-text-2);
    /*min-width: 100vh;*/
}

.titrepage
{
   width: 100%;
   font-size: 60px;
   text-align: center;
   color: var(--color-text-2);
   font-family :  'American_Typewriter','Baskerville_Light','Baskerville_SemiBold','Baskerville_Bold', 'American_Typewriter', sans-serif;

}

.titre1
{
   width: 100%;
   font-size: 40px;
   text-align: center;
   color: var(--color-text-3);
   font-family :  'Baskerville_SemiBold','American_Typewriter','Baskerville_Light','Baskerville_Bold', 'American_Typewriter', sans-serif;

}

.soustitrepage
{
   font-size: 30px;
   font-family :  'American_Typewriter','Baskerville_Light','Baskerville_SemiBold','Baskerville_Bold', 'American_Typewriter', sans-serif;
}

.texte
{
   font-size: 18px;
   font-family :  'Baskerville_SemiBold','Baskerville_Bold', 'Baskerville_Light','American_Typewriter', sans-serif;
}

.gras
{
    font-weight: bold;
}

.sousligne
{
    text-decoration: underline;
}

.cadre
{
   /*border-radius:  0.7em;*/
   text-align: center;
   padding-top: 15px;
}

.cadre1
{
    border-style: solid;
}

.radius
{
   border-radius:  0.7em;

}

.fondCadreCouleur1 {
    color : var(--color-text-1);
    background-color: var(--color-background-2); 
    border-color: var(--color-border-2);
    box-shadow: 7px 5px 5px  var(--color-box-shadow-3); 
}
.fondCadreCouleur2 {
    color : var(--color-text-2);
    background-color: var(--color-background-3); 
    border-color: var(--color-border-3);
    box-shadow: 7px 5px 5px  var(--color-box-shadow-2);     
}
.fondCadreCouleur3 {
    color : var(--color-text-2);
    background-color: var(--color-background-1); 
    border-color: var(--color-border-3);
    box-shadow: 7px 5px 5px  var(--color-box-shadow-2);     
}

  
.centrertexte
{
   width: 100%;
   text-align: center;
}

.flexprincipal
{
   display: flex;
   justify-content: space-between;
   justify-items: center;
   flex-wrap: wrap;
   /*padding: 0%;*/
   padding : 15px;
   /*margin: 15px;*/

}
 

/* gestion responsive */
@media screen and (max-width :599px)
{
    .fondCadreCouleur1 {box-shadow: 5px 3px 3px  var(--color-box-shadow-3);}
    .fondCadreCouleur2 {box-shadow: 5px 3px 3px  var(--color-box-shadow-2);}
    .fondCadreCouleur3 {box-shadow: 5px 3px 3px  var(--color-box-shadow-2);}
    .titrepage {font-size: 48px;}
}

@media screen and (min-width :600px) and (max-width :1000px)
{
    .fondCadreCouleur1 {box-shadow: 5px 3px 3px  var(--color-box-shadow-3);}
    .fondCadreCouleur2 {box-shadow: 5px 3px 3px  var(--color-box-shadow-2);}
    .fondCadreCouleur3 {box-shadow: 5px 3px 3px  var(--color-box-shadow-2);}
    .titrepage {font-size: 48px;}
}

@media screen and (min-width :1000px) and (max-width :1200px)
{
    .fondCadreCouleur1 {box-shadow: 7px 5px 5px  var(--color-box-shadow-3);}
    .fondCadreCouleur2 {box-shadow: 7px 5px 5px  var(--color-box-shadow-2);}
    .fondCadreCouleur3 {box-shadow: 7px 5px 5px  var(--color-box-shadow-2);}
    .titrepage {font-size: 60px;}
}

@media screen and (min-width :1200px)
{
    .fondCadreCouleur1 {box-shadow: 7px 5px 5px  var(--color-box-shadow-3);}
    .fondCadreCouleur2 {box-shadow: 7px 5px 5px  var(--color-box-shadow-2);}
    .fondCadreCouleur3 {box-shadow: 7px 5px 5px  var(--color-box-shadow-2);}
    .titrepage {font-size: 60px;}
}

a
{
    color : var(--color-text-1)
}

a:hover
{
    color : var(--color-text-3);
}