/* ---------------------------------------- */
/* ==            SUMMARY              */
/*---------------------------------------- */

		/* == COLOR CODES  */
		/* == FONT  */
		/* == GENERAL  */
		/* == HEADER  */
		/* == SECTION 1  */
		/* == SECTION 2  */
		/* == SECTION 3  */
		/* == SECTION 4  */
		/* == SECTION 5  */
		/* == FOOTER  */
		/* == MEDIA QUERIES  */

/* ---------------------------------------- */
/* ==       COLOR CODES           */
/*---------------------------------------- */

/*
Black (text) :            						#000
Green (Body BG, BG S2 Card, BG S5 Header) : 	#6AA84F
Dark Green (Main Header BG) :    				#274E13
Light Gray (BG S1) : 							#274E13
Light Gray 2 (BG S3 Header, BG S4-S5) : 		#EEEEEE
Gray (BG S2 Header, BG S3) : 					#CCCCCC
Gray 2 (BG S4 Card): 							#999999
Dark Gray (BG S2, BG S4 Header, BG Footer): 	#333333
*/

/* ---------------------------------------- */
/* ==              FONT                 */
/*---------------------------------------- */

@font-face {
    font-family: 'AlexBrush';
    src: url('assets/font/AlexBrush-Regular.ttf')  format('truetype');
  }
  
  @font-face {
    font-family: 'OpenSans';
    src: url('assets/font/OpenSans-Regular.ttf')  format('truetype');
  }
  
  * {
      font-family: "OpenSans", sans-serif; 
      font-size: 1em;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-family: "AlexBrush", sans-serif;
  }
  
  h1 {
      font-size: 2em;
  }
  
  h2 {
      font-size: 1.7em;
  }
  
  h3 {
      font-size: 1.4em;
  }
  
  /* ---------------------------------------- */
  /* ==            GENERAL                */
  /*---------------------------------------- */
  
  body {
      background: #6AA84F;
      margin: 0;
  }
  
  .main-container {
      max-width: 960px; /* Largeur maximale du conteneur principal */
      margin: 0 auto; /* Centrer horizontalement le conteneur principal */
  }
  
  img { /* Rendre les images responsive */
      width: 100%;
      height: auto;
  }
  
  h1, h2, h3, h4, h5, h6 {
      margin: 0; /* Retire les marges des titres */
  }
  
  .section-padding {
      padding: 1em 4em; /* Padding général sur les sections */
  }
  
  /* ---------------------------------------- */
  /* ==            HEADER                */
  /*---------------------------------------- */
  
  .main-header {
      background: #274E13;
      padding: 0 4em;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .logo {
      max-width: 20%; /* Largeur maximale du logo */
      padding: 1em 0;
  }
  
  /*     Navigation      */
  
  nav {
      width: 80%; /* Largeur du menu */
      font-size: 1.1em;
  }
  
  nav a {
      color: #FFF;
      text-decoration: none; /* Retire le soulignage des liens du menu de navigation */
      font-weight: bold;
  }
  
  nav a:hover {
      text-decoration: underline; /* Soulignage des liens du menu de navigation en hover */
  }
  
  nav ul {
      display: flex;
      justify-content: flex-end; /* Les menus sont répartis équitablement
      Le bord du premier est aligné sur le début du conteneur et la fin du dernier est alignée sur la fin du conteneur */
      list-style: none; /* Retire les puces du menu de navigation */
      padding: 0; /* Retire le padding du menu */
  }
  
  nav li {
      margin-left: 1em;
  }
  
  /* ---------------------------------------- */
  /* ==            SECTION 1                */
  /*---------------------------------------- */
  
  .section1 {
      background: #EEEEEE;
  }
  
  .section1-header {
      padding-bottom: 0; /* Retire le padding bas du header de la S01 */
  }
  
  .section1-content {
      padding-top: 0; /* Retire le padding haut du contenu de la S01 */		
  }
  
  .section1-card-container {
      display: flex;
      margin-top: 1.5em;
      justify-content: space-between;
  }
  
  .section1-card {
      width: 49%;
  }
  
  .section1-card-img {
      position: relative;
      padding-top: calc(27% / 46 * 100);
  }
  
  .section1-card-img img {
      border: 2px solid #666666;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
  }
  
  /* ---------------------------------------- */
  /* ==            SECTION 2                */
  /*---------------------------------------- */
  
  .section2 {
      background: #333333;
  }
  
  .section2 header {
      background: #CCCCCC;
  }
  
  .section2-content {
      display: flex;
      justify-content: space-between;
  }
  
  .section2-card {
      background: #6AA84F;
      width: 27%;
      padding: 1em; /* Padding dans les cartes de la S02 */
  }
  
  .section2-card-img {
      position: relative;
      padding-top: calc(18% / 25 * 100);
      margin-bottom: 1rem;
  }
  
  .section2-card-img img {
      border: 2px solid #666666;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
  }
  
  .section2-card-content {
      text-align: center; /* Centre le texte des cartes de la S02 */
  }
  
  .section2-card-content p {
      color: #FFF;
  }
  
  /* ---------------------------------------- */
  /* ==            SECTION 3                */
  /*---------------------------------------- */
  
  .section3 {
      background: #CCCCCC;
  }
  
  .section3 header {
      background: #EEEEEE;
  }
  
  .section3 header p {
      text-align: center; /* Centre le texte du paragraphe du header de la S03 */
      max-width: 40%; /* Largeur maximale du paragraphe du header de la S03 */
      margin: auto; /* Centre horizontalement le paragraphe du header de la S03 */
  }
  
  /* ---------------------------------------- */
  /* ==            SECTION 4                */
  /*---------------------------------------- */
  
  .section4 {
      background: #EEEEEE;
  }
  
  .section4 header {
      background: #333333;
      color: #FFF;
  }
  
  .section4 header p {
      margin-top: -0.5em; /* Retire de la marge haut sur le paragraphe du header de la S04 */
  }
  
  .section4-content h2 {
      margin: 0.2em 0; /* Ajoute de la marge haut-bas sur les h2 du contenu de la S04 */
  }
  
  /*     Section 4 Article      */
  
  .section4-card-container {
      display: flex;
      justify-content: space-between;
  }
  
  .section4-card {
      background: #999999;
      width: 19%;
      padding: 1em; /* Padding dans les cartes de la S04 */
  }
  
  .section4-card-img {
      position: relative;
      padding-top: calc(12% / 19 * 100);
      margin-bottom: 1rem;
  }
  
  .section4-card-img img {
      border: 2px solid #666666;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
  }
  
  .section4-card-content {
      text-align: center; /* Centre le texte des cartes de la S04 */
  }
  
  .section4-card-content p {
      margin-bottom: 1em; /* Ajoute de la marge bas sur les paragraphes des cartes de la S04 */
  }
  
  .section4-card-social {
      display: flex;
      justify-content: space-between;
      width: 75%;
      margin: 0 auto;
  }
  
  .section4-card-social a { /* Taille des icones des réseaux sociaux */
      width: 2em;
      height: 2em;
  }
  
  .section4-card-social img {
      border: none; /* Retire les bordures des icones des réseaux sociaux */
  }
  
  /*     Section 4 Customer Reviews     */
  
  .section4-customer-reviews-content {
      display: flex;
      margin-bottom: 1rem;
  }
  .section4-customer-reviews-img-container {
      width: 30%; /* Largeur du containeur de l'image des avis client */
  }
  
  .section4-customer-reviews-img {
      position: relative;
      padding-top: calc(16% / 31 * 100);
  }
  
  .section4-customer-reviews-img img {
      border: 2px solid #666666;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
  }
  
  .section4-customer-story {
      width: 70%; /* Largeur du conteneur du témoignage des avis client */
      margin-left: 2em; /* Espace entre l'image et le témoignage des avis client */
      background: #FFF;
      display: flex;
      align-items: center; /* Centre verticalement le texte des avis client */
  }
  
  .section4-customer-story p {
      margin-left: 1em; /* Espace le texte du témoignage des avis client */
      font-weight: bold;
  }
  
  /*     Section 4 Gallery     */
  
  .section4-gallery-img-container {
      display: flex;
      justify-content: space-between;
  }
  
  .section4-gallery-card {
      width: 24%;
  }
  
  .section4-gallery-img {
      position: relative;
      padding-top: calc(16% / 31 * 100);
  }
  
  .section4-gallery-img img {
      border: 2px solid #666666;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
  }
  
  .section4-gallery-img {
      margin-right: 1em; /* Espace entre les images de la galerie photo */
  }
  
  /* ---------------------------------------- */
  /* ==            SECTION 5                */
  /*---------------------------------------- */
  
  .section5 {
      background: #EEEEEE;
  }
  
  /*     Section 5 Header     */
  
  .section5 header {
      background: #6AA84F;
      color: #FFF;
      display: flex;
      justify-content: space-between; /* Les containeur du header de la S05 sont répartis équitablement
      Le bord du premier est aligné sur le début du conteneur et la fin du dernier est alignée sur la fin du conteneur */
  }
  
  .section5-header-social-container {
      display: flex;
  }
  
  .section5-header-social-container a {
      color: #fff;
  }
  
  .section5-header-social-container img {
      height: 2em; /* Hauteur des icones des liens des réseaux sociaux */
      margin-right: 0.5em; /* Espace entre les icones et le texte des liens des réseaux sociaux */
  }
  
  .section5-header-social-container {
      display: flex;
  }
  
  .section5-header-social a {
      display: flex;
      align-items: center; /* Centre verticalement le texte des liens des réseaux sociaux */
      margin-left: 3em; /* Espace entre les liens des réseaux sociaux */
  }
  
  .section5-header-social a:hover {
      color: #EEE;
  }
  
  /*     Section 5 Title    */
  
  .section5-content-title {
      text-align: center; /* Centre horizontalement le title de la S05 */
      color: #6AA84F;
  }
  
  .section5-content-title h2 {
      text-decoration: underline; /* Souligne le h2 de la S05 */
  }
  
  .section5-content-title p {
      margin-bottom: 1em;  /* Ajoute de la marge bas sur le paragraphe du titre de la S05 */
  }
  
  /*     Section 5 Content    */
  
  .section5-contact {
      display: flex;
  }
  
  .section5-contact-information {
      min-width: 30%; /* Largeur minimum des information de contact */
      margin-top: 2em; /* Ajoute de la marge haut des informations de contact */
      font-weight: bold;
  }
  
  .section5-contact-information ul {
      list-style: none; /* Retire les puces de la liste des informations de contact*/
  }
  
  /*     Section 5 Contact Form    */
  
  .section5-contact-form-line1 {
      display: flex;
      justify-content: space-between;
  }
  
  .section5-contact-form-line1 input, .section5-contact-form textarea{
      border: none; /* Retire les bordures des champs du formulaire*/
      background: #B3B3B3;
  }
  
  .section5-contact-form-line1 input {
      width: 100%; /* Largeur des champ de la premiere ligne du formulaire, dans leurs conteneur */
      margin-bottom: 1em; /* Marge bas des champ de formulaire */
      height: 2em; /* Hauteur des champs du formulaire de la premier ligne */
  }
  
  .section5-contact-form-input {
      width: 32%;
  }
  
  .section5-contact-form textarea {
      width: 100%; /* Largeur du champ message du formulaire */
      height: 8em; /* Hauteur du champ message du formulaire */
  }
  
  .section5-contact-form-button {
      background: #6AA84F;
      border: 1px solid #666666;
      color: #fff;
      padding: 0.5em 2em;
      border-radius: 2%;
      margin: 1em 0;
      transition: 0.3s; /* Temps de transition des animations du bouton du formulaire */
  }
  
  .section5-contact-form-button:hover {
      background: #274E13;
  }
  
  /* ---------------------------------------- */
  /* ==            FOOTER                 */
  /*---------------------------------------- */
  
  .footer {
      background: #333333;
      display: flex;
      justify-content: center; /* Groupe les colonnes du footer au centre */
  }
  
  .footer-container {
      width: 70%; /* Largeur du conteneur principal du footer */
      display: flex;
      justify-content: space-around; /* Les colonnes du footer sont répartis équitablement
      À chaque extrémité, entre le bord du conteneur et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément */
      margin: 2em 0 4em 0; /* Marge haut-bas du conteneur principal du footer */
  }
  
  .footer-column ul {
      list-style: none; /* Retire les puces des listes des colonnes du footer */
      padding-left: 0; /* Retire le padding gauche des listes des colonnes du footer */ 
  }
  .footer-column ul li {
      line-height: 1.2em; /* Hauteur des lignes des listes des colonnes du footer */
  }
  
  .footer-column a {
      text-decoration: none; /* Retire le soulignage des liens des listes des colonnes du footer */
      color: #fff;
  }
  
  .footer-column a:hover {
      text-decoration: underline; /* Soulignage les liens des listes des colonnes du footer en hover */
  }
  
  .footer-column-title {
      color: #6AA84F;
  }
  
  .credit {
      text-align: center; /* Centre horizontalement le texte des crédits */
      color: #fff;
      margin: 1.5em 0; /* Marge haut-bas des crédits */
  }
  
  /* ---------------------------------------- */
  /* ==       MEDIAS QUERIES        */
  /*---------------------------------------- */
  
  /*     Smartphone    */
  @media screen and (max-width: 600px) {
  
  /*     GENERAL      */
  h1, h2, h3, h4, h5, h6 {
      text-align: center;
  }
  
  h1 {
      font-size: 3em;
  }
  
  h2 {
      font-size: 2em;
  }
  
  h3 {
      font-size: 2em;
  }
  
  p {
      text-align: justify;
      font-size: 1.2em;
  }
  
  .section-padding {
      padding: 1em 2em;
  }
  
  /*     HEADER      */
  .main-header {
      flex-wrap: wrap;
  }
  
  .logo {
      max-width: 100%;
  }
  
  nav {
      width: 100%;
  }
  
  nav ul {
      flex-wrap: wrap;
      padding: 0;
  }
  
  nav li {
      width: 100%;
      text-align: center;
      margin: 0.8em 0;
  }
  
  /*     SECTION 1      */
  .section1-header {
      padding-bottom: 0;
  }
  
  .section1-content {
      padding-top: 0;
  }
  
  .section1-card {
      width: 100%;
      margin-bottom: 1rem;
  }
  
  .section1-card-container {
      flex-wrap: wrap;
  }
  
  .section1-card-img {
      margin-right: 0;
  }
  
  /*     SECTION 2      */
  .section2-content {
      flex-wrap: wrap;
  }
  
  .section2-card {
      margin-right: 0;
      margin-bottom: 1em;
      width: 100%;
  }
  
  /*     SECTION 3      */
  .section3 header p {
      max-width: 80%;
  }
  
  /*     SECTION 4      */
  .section4 header p {
      text-align: center;
  }
  
  .section4-card-container {
      flex-wrap: wrap;
  }
  
  .section4-card {
      margin-right: 0;
      margin-bottom: 1em;
      width: 100%;
  }
  
  .section4-card-social a {
      width: 3em;
      height: 3em;
  }
  
  .section4-customer-reviews-content {
      flex-wrap: wrap;
  }
  
  .section4-customer-reviews-img-container {
      width: 100%;
  }
  
  .section4-customer-reviews-img {
      margin-bottom: 1em;
      width: auto;
      height: auto;
  }
  
  .section4-customer-story {
      width: 100%;
      margin-left: 0;
      justify-content: center;
  }
  
  .section4-customer-story p {
      margin-left: 0;
  }
  
  .section4-gallery-card {
      width: 100%;
      margin-bottom: 1rem;
  }
  
  .section4-gallery-img-container {
      flex-wrap: wrap;
  }
  
  .section4-gallery-img {
      margin-right: 0;
  }
  
  /*     SECTION 5      */
  .section5 header {
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .section5-header-social-container {
      width: 100%;
      justify-content: space-around;
  }
  
  .section5-header-social a {
      margin-left: 0;
  }
  
  .section5-contact {
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .section5-content-title p {
      text-align: center;
  }
  
  .section5-contact-form-line1 {
      flex-wrap: wrap;
  }
  
  .section5-contact-form-input {
      margin: 0;
      width: 100%;
  }
  
  .section5-contact-information {
      width: 80%;
      text-align: center;
      margin-top: 0em;
  }
  
  .section5-contact-information ul {
      padding: 0;
  }
  
  .section5-contact-form-button {
      width: 100%;
  }
  
  /*     FOOTER      */
  .footer-container {
      flex-wrap: wrap;
      margin: 1em 0;
  }
  
  .footer-column {
      width: 50%;
      text-align: center;
  }
  
  .credit {
      margin: 1.5em 2em;
  }
  }