/* Media queries */

/* max-width: si l'écran est infèrieur ou égal alors {...} => desktop-first */

/* min-width: si l'écran est supérieur ou égal alors {...} => mobile-first */



@media screen and (min-width: 320px) and (max-width: 767px) {

  /* Global Styles */

  button a {

    font-size: var(--header1);

  }



  html {

    font-size: 55%;

  }



  img {

    max-width: 100%;

  }



  /* Menu Navigation */

  #logo {

    text-align: center;

    font-size: var(--header3);

  }



  /* Burger Responsive */

  .burger {

    position: relative;

    display: block;

    cursor: pointer;

    z-index: 99999;

  }



  .burger span {

    display: block;

    margin: 0.5rem 0rem;

    padding: 0.2rem 2rem;

    background: var(--spanBurger);

    transition: all 0.5s ease;

  }



  nav ul {

    position: fixed;

    top: 0;

    left: 100%;

    width: 100%;

    height: 100%;

    flex-direction: column;

    align-items: center;

    padding: 1rem;

    background: var(--backgroundColorBurger);

    transition: transform 1s ease;

    z-index: 9999;

    opacity: 0.5;

  }



  nav ul li {

    display: flex;

    align-items: center;

  }



  nav ul li a {

    font-size: var(--header3);

    color: var(--hoverColor);

  }



  nav ul li a:hover {

    color: #fff;

  }



  nav > ul li:hover .sub-menu {

    display: none;

  }



  .nav-open {

    transform: translateX(-100%);

    opacity: 1;

  }



  .toggle .line1 {

    transform: rotateZ(45deg) translateY(300%);

    background: #fff;

  }



  .toggle .line2 {

    opacity: 0;

  }



  .toggle .line3 {

    transform: rotateZ(-45deg) translateY(-300%);

    background: #fff;

  }



  /* Section Présentation */

  #presentation {

    min-height: 60vh;

  }



  .presentation-image {

    margin-top: 1rem;

  }



  .presentation-image span {

    font-size: var(--header2);

  }



  .presentation-image img {

    width: 400px;

    max-width: 30%;

  }



  #presentation .type-writer {

    font-size: var(--header4);

  }



  #presentation h3 {

    padding: 2rem;

    font-size: var(--header3);

  }



  .btn-presentation {

    margin-bottom: 10%;

  }



  /* Section Collection */

  #collection {

    min-height: 85vh;

  }



  .collection-head {

    margin: 1rem auto;

  }



  .collection-head h2 {

    font-size: var(--header2);

  }



  /* Carousel Home */

  #owl-demo {

    width: 95%;

  }



  #owl-demo .item img {

    margin: 0 auto;

    width: max-content;

  }



  #owl-demo .item img:hover {

    pointer-events: none;

  }



  /* Carousel Atelier */

  #owl-demo .item .element {

    width: 100%;

  }



  .cards {

    align-items: flex-start;

    width: 100%;

    min-height: 10vh;

    margin: 0 auto;

  }



  .card {

    margin: 0rem 2rem;

  }



  .card-icon {

    padding: 0;

  }



  .card-icon h4 {

    font-size: var(--header2);

  }



  .collection-image {

    padding: 2rem;

  }



  .collection-image img {

    width: 30%;

    height: 30%;

    max-width: 70%;

    object-fit: cover;

  }



  .collection-image img:nth-of-type(2) {

    width: 40%;

  }



  .btn-collection {

    margin-top: 6rem;

  }



  /* Section Work */

  #work {

    margin: 5rem auto;

  }



  .work-head h2 {

    width: 95%;

    margin: 0 auto;

    font-size: var(--header2);

  }



  .work {

    flex-direction: column;

  }



  .work-text {

    flex: 0 0 auto;

  }



  .work-text p {

    margin: 0 auto;

    padding: 1rem;

    font-size: var(--paragraphe);

  }



  .work-image {

    margin: 1rem auto;

  }



  .work-image img {

    width: 100%;

    height: 90%;

    border-radius: 25%;

  }



  /* Section Atelier */

  #slider::before {

    top: 35%;

  }



  .history-head h2 {

    width: 100%;

    text-align: center;

    font-size: var(--header4);

  }



  .history {

    flex-direction: column;

  }



  .history-text {

    flex: 0 0 auto;

    order: 1;

  }



  .history p {

    padding: 2rem 0rem 0rem;

    text-align: center;

    font-size: var(--header1);

  }



  /* Section Collection */

  .article-head p {

    font-size: var(--paragraphe);

  }



  .image-head img {

    width: 100%;

    max-width: 15%;

  }



  .image-head h2 {

    font-size: var(--header4);

  }



  .cartes {

    flex-direction: column;

  }



  .carte {

    flex: 1 1 auto;

  }



  .carte h4 {

    padding: 0.5rem;

    font-size: var(--header3);

  }



  .carte p:nth-of-type(1) {

    font-size: var(--header1);

  }



  .carte p {

    font-size: var(--header2);

  }



  .carte img {

    max-width: 70%;

  }



  .carte .image__overlay p a {

    font-size: var(--header4);

  }



  /* Section Photos */

  #photo h2 {

    margin: 2rem auto;

    font-size: var(--header4);

  }



  .container {

    justify-content: center;

    max-width: 600px;

  }



  .container .image1,

  .container .image2,

  .container .image3 {

    max-width: 350px;

    min-width: 250px;

    padding: 3rem 1rem;

  }



  .container .image3 {

    transform: rotate(-5deg);

  }



  /* Section Map */

  #map {

    margin: 0rem auto 4rem;

  }



  #map iframe {

    max-width: 300px;

    height: 600px;

    margin: 1rem auto;

  }



  iframe {

    background-color: #fff;

  }



  /* Section CGU */

  #cgu {

    width: 90%;

    margin: 4rem auto;

  }



  #cgu h2 {

    margin: 3rem;

    font-size: var(--header3);

  }



  #cgu h2 img {

    display: none;

  }



  #cgu .paragraphe {

    padding: 1rem;

    text-align: left;

  }



  #cgu .paragraphe .title {

    text-align: center;

    font-size: var(--header1);

  }



  #cgu .paragraphe h2,

  #cgu .paragraphe h6 {

    text-align: center;

    font-size: var(--header1);

  }



  #cgu .paragraphe p,

  #cgu .paragraphe blockquote {

    font-size: var(--header1);

  }



  /* Section Articles */

  .introduction {

    margin: 0;

  }



  .introduction h2 {

    font-size: var(--header3);

  }



  .introduction p {

    font-size: var(--header2);

  }



  .container-image .definition {

    font-size: var(--header1);

  }



  .tabs .tab-label {

    font-size: var(--header1);

  }



  .tabs .tab-content p {

    font-size: var(--paragraphe);

  }



  .tabs .tab-content .danger {

    font-size: var(--paragraphe);

  }



  .tabs .tab-content span {

    font-size: var(--header6);

  }



  .tabs .tab-content table {

    font-size: var(--header6);

  }



  .tabs .tab-content caption {

    font-size: var(--paragraphe);

  }



  /* Section Contact */

  #contact {

    min-height: 65vh;

  }



  .form-wrapper {

    flex: 0 1 auto;

  }



  .form-header h2 {

    font-size: var(--header4);

  }



  .form-header p {

    font-size: var(--header1);

  }



  .form-header p i {

    font-size: var(--header1);

  }



  .form-header a {

    font-size: var(--header2);

  }



  .contact-logo {

    padding: 1rem;

  }



  .contact-logo img {

    width: 80%;

    margin: 2rem auto;

  }



  .logo-metier {

    padding: 1rem;

  }



  .logo-metier img {

    display: block;

    width: 40%;

    margin: 3rem auto;

  }



  /* Scroll To Top */

  .scrollToTop {

    right: 1rem;

    width: 35px;

    height: 35px;

    line-height: 35px;

  }



  /* About Footer */

  footer h4 {

    flex: 1 1 80rem;

    order: 2;

    text-align: center;

    font-size: var(--paragraphe);

  }



  footer ul {

    display: flex;

    flex-direction: column;

    align-items: center;

    order: 1;

    margin: 1rem auto 3rem;

  }



  footer ul li {

    flex: 1 1 auto;

    padding: 0.5rem;

  }



  footer ul li a {

    font-size: var(--header1);

  }



  footer ul li a i {

    font-size: var(--header2);

  }



  footer ul li a:hover {

    color: #fff;

  }

}