/* Je vais changer des trucs et commenter tout. Hésites pas à suppr les commentaires et faire à ta sauce ensuite, mais commenter le code et l’ordonner un minimum, c’est essentiel pour s’y retrouver un mois / 1 an plus tard. */

/* RESETS */
/* Permet d’enlever les marges par défaut, entre autre */
/* source (prise au hasard): https://www.digitalocean.com/community/tutorials/css-minimal-css-reset */
html {
  /* border-box ensure consistent and predictable sizing */
  box-sizing: border-box;
  /* Change font size default if you want */
  font-size: 16px;
}

/* je sais pas à quoi cette règle sers, mais elle a résolu un des problème de ta page (une boîte dépassait de l’écran pour rien) */
*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;

  /* uncomment font-weight if you want to remove the bold defaults of headings */
  /* font-weight: normal; */
}

/* cette règle permet d’utiliser les listes <ul><li> dans les nav sans que les puces apparaissent. On peut rétablir ensuite le syle "puce" uniquement quand on en a besoin. */
/* remove if you want to keep the default bullet points for your lists. */
ol, ul {
  list-style: none;
}

/* Responsive images by default. */
img {
  max-width: 100%;
  height: auto;
}

/* HEADER */

header{
  width: 100%;
  height: 40px;
  /* Les background-color sont utilisés pour tester la taille des boîtes. À suppr pour la production */
  /* background-color: red; */


}
header nav{
  /* width: 100%; */
  height: inherit;
  /* background-color: blue; */

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items:center;
}

/* style liens menu */
nav a{
/* TO DO : reset les liens, ajouter gras et font-size */
}

/* style les ul et div qui ont pour parents header nav */
header nav ul, div{
  width: 100%;
  /* background-color: green; */

  display: flex;
  flex-direction: row;
  justify-content:space-around;

}

.nav-logo{
  justify-content: center;
}


/* MAIN */

main{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article{
  width: 50%;
  min-width: 400px;
  height: 70vh;
  border: 3px dashed #1c87c9;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* align-content: space-around; */

  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

@media only screen and (max-width: 800px){
  main{
    flex-direction: column;
  }
  article{
    width: 100%;
    height: auto;
    padding: 40px;
    min-width: auto;
  }
}

.bg-white{
/* préciser des valeurs par défaut si besoin */
}

.orange{
  /* c’est aussi possible d’utiliser des variables genre var-- quelque chose, pour les couleurs c’est pratique typiquement pour faire un thème sombre ou pour pouvoir changer d’avis facilement. je te laisse chercher si ça t’intéresse. */
  color:#f6a01c;
}

h2, .text-h2{
  /* text-align: center; */
  color: black;
  font-size: 3rem; /* permet des tailles de police plus responsive. 3*16px, la taille par défault mise plus haut dans RESET */
  font-weight: 600;
  /* line-height: 1.25; */
  /* margin: 0px; */

  border: 1px solid #999;  /* à enlever en prod */
}

.text-h2>span{
  font-size: 1rem;
  /* margin: -10px; */
}

article p{
  line-height: 1.2;
  padding: 20px;
}


.link-button{
  /* background-color: rgba(0, 0, 0, 0); */
  color: black;
  padding: 0.6em;
  text-decoration: none;
  text-align: center;
  outline: 2px solid black;
  font-size: 14px;
  /* font-weight: bold; */
  text-transform: none;
  border-radius: 8px;
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.link-button:hover {
    background-color: rgba(0, 0, 0, 1);
    color: white;
}






/*breizh-bitcoin-box-design-computer*/
    .row {
        display: flex;
    }
    .section {
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 70vh;
        border: 3px dashed #1c87c9;
        align-items:center;
        justify-content:center;
    }
    .section0 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 80vh;
        border: 3px dashed #1c87c9;
        align-items:center;
        justify-content:center;
    }
/* breiz-bitcoin-img*/
    .picture-50 {
        display:flex;
        max-width: 55vw;

        height:auto;
        width: auto;
        justify-content:center;
    }
    .picture-100 {
        display:flex;
        max-width:80vw;
        height:auto;
        justify-content:center;
    }
/* breiz-bitcoin-button*/
    .fcc-btn-black {
        background-color: rgba(0, 0, 0, 0);
        color: #000000; /* Couleur noir */
        padding: 0.6em;
        text-decoration: none;
        text-align: center;
        outline: 2px solid black;
        font-size: 14px;
        font-weight:bold;
        border-radius: 8px;
        box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    .fcc-btn-black:hover {
        background-color: rgba(0, 0, 0, 1);
        color: #fff; /* Couleur blanche */
    }
    .fcc-btn-white {
        background-color: rgba(255, 255, 255, 0);
        color: #fff; /* Couleur blanche */
        padding: 0.6em;
        text-decoration: none;
        text-align: center;
        outline: 2px solid white;
        font-size: 14px;
        font-weight:bold;
        border-radius: 8px;
        box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.2);
    }
    .fcc-btn-white:hover {
        background-color: rgba(255, 255, 255, 1);
        color: #000000; /* Couleur noir */;
    }
/*  breizh-bitcoin-font-display-computer*/
/*  border: 1px solid #999;*/
.text-56px-white {
    text-align: center;
    color: #fff; /* Couleur blanche */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    padding: 3.5vh;
    margin: 0px;
    border: 1px solid #999;
}
.text-18px-white {
    text-align: center;
    color: #fff; /* Couleur blanche */
    font-size: calc(12px + 0.3vw);
    font-weight: 600;
    line-height: 1.25;
    padding-top: 10vh;
    padding-bottom: 3vh;
    margin: 0px;
    border: 1px solid #999;
}
.text-18px-white-no-padding {
    text-align: center;
    color: #fff; /* Couleur blanche */
    font-size: calc(12px + 0.3vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-112px-black {
    text-align: center;
    color: #000000; /* Couleur noir */
    font-size: calc(70px + 2vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-56px-black-left {
    text-align: left;
    color: #000000; /* Couleur noir */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-56px-black-center {
    text-align: center;
    color: #000000; /* Couleur noir */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-18px-black {
    text-align: center;
    color: #000000; /* Couleur noir */
    font-size: calc(12px + 0.3vw);
    font-weight: 600;
    line-height: 1.25;
    padding-top: 10vh;
    padding-bottom: 3vh;
    margin: 0px;
    border: 1px solid #999;
}
.text-56px-f6a01c-center {
    text-align: center;
    color: #f6a01c; /* Couleur bitcoin */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-56px-f6a01c-center-phone {
    text-align: center;
    color: #f6a01c; /* Couleur bitcoin */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-56px-f6a01c-left {
    text-align: left;
    color: #f6a01c; /* Couleur bitcoin */
    font-size: calc(42px + 1.05vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
.text-18px-f6a01c {
    text-align: center;
    color: #f6a01c; /* Couleur bitcoin */
    font-size: calc(12px + 0.3vw);
    font-weight: 600;
    line-height: 1.25;
    margin: 0px;
    border: 1px solid #999;
}
/*  breizh-bitcoin-font-display-phone-portrait*/
/* Pour les téléphones */
@media only screen and (max-width: 767px) {
    /*  border: 1px solid #999;*/
    .text-56px-white {
            text-align: center;
            color: #fff; /* Couleur blanche */
            font-size: calc(24px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
            padding: 1.5vh;
      }
        .text-18px-white {
            text-align: center;
            color: #fff; /* Couleur blanche */
            font-size: calc(12px + 0.3vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
            padding-top: 3vh;
            padding-bottom: 3vh;
      }
        .text-18px-white-no-padding {
            text-align: center;
            color: #fff; /* Couleur blanche */
            font-size: calc(12px + 0.3vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-112px-black {
            text-align: center;
            color: #000000; /* Couleur noir */
            font-size: calc(40px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-56px-black-left {
            text-align: left;
            color: #000000; /* Couleur noir */
            font-size: calc(24px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-56px-black-center {
            text-align: center;
            color: #000000; /* Couleur noir */
            font-size: calc(24px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-18px-black {
            text-align: center;
            color: #000000; /* Couleur noir */
            font-size: calc(12px + 0.3vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
            padding-top: 3vh;
            padding-bottom: 3vh;
      }
        .text-56px-f6a01c-center {
            text-align: center;
            color: #f6a01c; /* Couleur bitcoin */
            font-size: calc(24px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-56px-f6a01c-center-phone {
            text-align: center;
            color: #f6a01c; /* Couleur bitcoin */
            font-size: calc(22px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-56px-f6a01c-left {
            text-align: left;
            color: #f6a01c; /* Couleur bitcoin */
            font-size: calc(24px + 1vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
        .text-18px-f6a01c {
            text-align: center;
            color: #f6a01c; /* Couleur bitcoin */
            font-size: calc(12px + 0.3vw);
            font-weight: 600;
            line-height: 1.25;
            margin: 0px;
      }
    }