@charset "UTF-8";

/**
 * @author Claudie Langlais claudielanglais@users.noreply.github.com
 *
 * TABLE DES MATIERES
 * Normalize
 * Utilitaires
 * Charte typographique
 * Header
 * Main
 * Footer
 * ... (Adapter la table des matières en fonction du contenu du fichier)
 */

/* NORMALIZE
   ========================================================================== */

/* UTILITAIRES
   ========================================================================== 
 * Harmoniser le modèle de boîte avec Box-Sizing
 * Nous réviserons les modèles de boîte (box models)
 * dans les cours qui suivent.
 * 
 * https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model
 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
   box-sizing: inherit;
}

/* CHARTE TYPOGRAPHIQUE
   ========================================================================== */
/*Roboto Condensed*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,700;1,700&display=swap');

/*News Cycle*/
@import url('https://fonts.googleapis.com/css2?family=News+Cycle&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    font-family:"Roboto Condensed", sans-serif;
    font-size: lem;
    color: #333;
}
/* HEADER - WEB
   ========================================================================== */
.header__nav {
   padding-top: 13rem;
   background-image: url(../images/texture.jpg);
}
@media (max-width:600px) {
   .header__logo {
      position: absolute;
      top: 5%;
      left: 15%;
   }
}
.header__picture {
   max-width: 1000px;
}
.header__img {
   width: 100%;
}
.header__fig {
   text-align: center;
}
/*HEADER - LIENS */
.header__lien:link,
.header__lien:visited {
  color: black;
  text-decoration: none;
}
.header__lien:hover,
.header__lien:active {
  color: rgb(17, 168, 168);
  text-decoration: underline;
}
/*BOUTON*/ 
@media (max-width:600px) {
   .header__nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
   }
   .header__bouton {
      padding: 0.5rem 1rem;
      font-size: 1rem;
      background: #333;
      color: #fff;
      border: none;
      cursor: pointer;
   }
   .header__liste {
      display: none;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
   }

   .header__nav.nav--ouverte .header__liste {
      display: block;
   }
   .header__liste a {
      display: block;
      padding: 0.5rem 1rem;
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid black;
      text-align: center;
   }
   .header__liste a:hover {
      background-color: #ccc;
   }
}
/* HEADER - DESKTOP
   ========================================================================== */
@media (min-width:600px) {
   .header__nav {
      padding-top: 5rem;
      margin-bottom: 1rem;
   }
   .header__bouton {
      display: none;
   }
   .header__liste {
      padding-right: 0vw;
      display: flex;
      flex-direction: row;
      list-style: none;
      justify-content: right;
   }
   .header__item {
      padding: 1rem;
      font-weight: bold;
      font-size: 1rem;
   }
   .header__logo {
      position: absolute;
      right:57%;
      top:2%;
   }
}
   @media (min-width:900px) {
   .header {
      text-align: center;
   }
   .header__img {
      width: 70%;
   }
   .header__liste {
      padding-right: 15vw;
   }
   .header__item {
      padding: 2rem;
   }
}
/* MAIN- WEB
   ========================================================================= */
.main {
   justify-content: center;
   align-items: center;
   text-align: center;
}
.main__intro-texte {
   padding-right: 1rem;
   padding-left: 1rem;
}
.main__titre {
   padding-top: 5rem;
   padding-bottom: 1rem;
   text-transform: uppercase;
}
.main__intro-texte {
   padding-top: 2rem;
   padding-bottom: 2rem;
}
.main__article {
   display: flex;
   flex-direction: column;
   list-style: none;
}
.main__liste {
   list-style: none;
   width: 100%;
}
.main__img {
   width: 100%;
}
.main__fig {
   font-size: small;
}
.main__titre-article {
   padding-bottom: 1rem;
   font-size: 1.5rem;
   text-transform: uppercase;
}
.main__article-texte {
   text-align: left;
   padding: 3rem;
}
.main__decouvert,
.main__utilisees {
   background-color: rgb(218, 245, 245);
   text-align: left;
   padding-top: 1rem;
   padding-left: 2rem;
   padding-bottom: 5rem;
   padding-right: 2rem;
   margin-bottom: 2rem;
   list-style: none;
}
.main__titre-source {
   font-weight: 300;
   text-transform:uppercase;
   font-size: 1.2rem;
   padding-bottom: 1rem;
}
.main__source-liste {
   list-style-type: disc;
   padding-left: 1rem;
}
.main__source-texte {
   padding-top: 0.5rem;
}
.main__infolettre {
   text-align: left;
   list-style: none;
   margin-bottom: 5rem;
   margin-top: 2rem;
   background-color: rgb(218, 245, 245);
   padding-left: 2rem;
   padding-top: 1rem;
   padding-bottom: 3rem;
   padding-right: 2rem;
}
.main__info {
   padding-bottom: 1rem;
}
.main__titre-info {
   font-weight: 300;
   text-transform:uppercase;
   font-size: 1.2rem;
   padding-bottom: 1rem;
}
.main__input {
   height: 3rem;
   width: 17rem;
   padding-bottom: 1rem;
   margin-top: 0.5rem;
}
.main__abonnez {
   height: 3rem;
   width: 7rem;
  margin-top: 0.5rem;
}
/*MAIN - LIENS */
.main__source-lien:link,
.main__source-lien:visited {
  color: black;
  text-decoration: none;
}
.main__source-lien:hover,
.main__source-lien:active {
  color: rgb(17, 168, 168);
  text-decoration:underline;
}
/* MAIN - DESKTOP
   ========================================================================= */
@media (min-width:600px) {
   .main {
      margin-left: 10vw;
      margin-right: 10vw;
   }
   .main__liste {
      margin: 1rem;
   }
   .main__article-texte {
      padding: 1rem 0rem 0rem 0rem;
   }
   .main__texte {
      padding-bottom: 1rem;
   }
   .main__input {
      padding-bottom: 0rem;
      width: 15rem;
   }
}
@media (min-width:900px) {
   .main {
      margin-left: 15vw;
      margin-right: 15vw;
   }
   .main__article {
      flex-direction: row;
   }
   .main__source {
      display: flex;
      flex-direction: row;
   }
   .main__decouvert,
   .main__utilisees {
      margin: 1rem;
   }
   .main__decouvert {
      padding-right: 6rem;
   }
   .main__infolettre {
      display: flex;
      flex-direction: row;
      margin: 1rem;
   }
   .main__info {
      margin: 1rem;
   }
   .main__form {
      padding-top: 1rem;
   }
}
/* FOOTER - WEB
   ========================================================================= */ 
.footer {
   justify-content: center;
   text-align: center;
   background-image: url(../images/texture.jpg);
}
.footer__liste {
   display: flex;
   flex-direction: column;
   padding-top: 1rem;
   padding-bottom: 1rem;
   border-bottom: black solid 2px;
   border-top: black solid 2px;
   list-style: none;
}
.footer__item {
   padding: 0.5rem;
}
.footer__copyright {
   padding: 2rem;
   padding-left: 3rem;
   padding-right: 3rem;
}
/*FOOTER - LIENS */
.footer__lien:link,
.footer__lien:visited {
  color: black;
  text-decoration: none;
}
.footer__lien:hover,
.footer__lien:active {
  color: rgb(17, 168, 168);
  text-decoration: underline;
}
/* FOOTER - DESKTOP
   ========================================================================= */
@media (min-width:600px) {
   .footer__liste {
      justify-content: center;
      margin-left: 10vw;
      margin-right: 10vw;
      flex-direction: row;
   }
}
@media (min-width:900px) {
   .footer {
      margin-top: 4rem;
   }
   .footer__liste {
      margin-left: 15vw;
      margin-right: 15vw;
   }
}