/*
-------------------------------------------------------------------------------
-- écrans plus petits que 1450 pixels
-------------------------------------------------------------------------------
*/

@media only screen and (max-width:1450px)
{
  #sacs {
    width: 70%;
  }
  #brand {
    font-size: 1em;
    width: calc(70% - 140px);
  }
}

/*
-------------------------------------------------------------------------------
-- écrans plus petits que 1023 pixels
-------------------------------------------------------------------------------
*/

@media only screen and (max-width:1023px)
{
  body{
    font-size: 1.4em;
  }

  #brand {
    font-size: 1em;
    width: calc(90% - 140px);
  }

  .texte-sac {
    max-width: 40%;
  }

  #sacs {
    width: 90%;
  }

  .familyStyle1 .title-card {
    left : 10px;
    transition: all .4s;
  }

  .familyStyle1:nth-child(2n+1) .title-card {
    right : 10px;
    left: auto;
  }
}

/*
-------------------------------------------------------------------------------
-- écrans plus petits que 1023 pixels et TACTILES
-------------------------------------------------------------------------------
*/

@media only screen and (any-hover: none) and (max-width:1023px)
{
    body{
      font-size: 3em;
    }

    #brand {
      margin-bottom: 150px;
      border-radius: 12px;
    }

    #header-title {
      width: 500px;
      height: 286px;
      top: calc(45vh - 143px);
      left: calc(50% - 250px);
    }

    #hideGradient{
      height: 20vh;
      display: block;
    }

    #brand p:first-of-type { /* first "p" child of "brand" div */
      font-size: 1em;
    }

    #brand p {
      font-size: 1em;
    }

    #sacs {
      padding: 0 0 15vh 0;
    }

/*-- big cards -------------------------*/
    .familyStyle1 {
      margin: auto auto 100px auto;
    }

    .title-card {
      border-radius: 12px;
    }

    .tag {
      border-radius: 12px;
      top:20px;
      left: 20px;
      color : #fff;
    }

    .familyStyle1 .title-card {
      position: static;
      margin-top: -15vh;
      right: auto;
      bottom: auto;
      margin-left: 20px;
      width: calc(90% - 40px);
      pointer-events: all;
    }

    .familyStyle1:nth-child(2n+1) .title-card {
      top: 35vh;
      right: auto;
      bottom: auto;
      left: 20px;
    }

/*-- small cards -------------------------*/
    .image-box{
      border-radius: 12px;
      height: 740px;
    }

    .familyStyle2 {
      width: calc((100% / 2) - (20px / 2));
      margin: 0px 20px 100px 0px;
    }

    .familyStyle2:nth-child(3n+2) {
      margin: 0px 20px 100px 0px;
    }

    .familyStyle2:nth-child(2n) {
      margin: 0px 0 100px 0px;
    }

    .familyStyle2 .title-card-hidden {
      position: static;
      margin: -15vh 0 0 20px;
      width: calc(100% - 100px);
      transition: all 1s;
      border-radius: 12px;
      background-color: #fff;
      padding: 20px 30px 30px 30px;
      pointer-events: none;
      transition: all .4s;
    }

    .familyStyle2 .title-card {
      display: none;
    }

    .familyStyle2 .title-card-hidden {
      display: block;
    }

    .familyStyle2 .separator, .familyStyle2 p {
      opacity: 1;
    }

    #listeMiniatureSacs .familyStyle2 a .image-box {
      height: 600px;
    }

/*-- boutons -------------------------*/

    .btn {
      margin-top: 4px;
      padding: 10px 20px;
      border-radius: 12px;
    }

    .btn .imgBtn {
      width: 50px;
      height: 50px;
    }
}