/*-------------------*/
/*--all custom styles modal--*/
/*-------------------*/


/*-------------------*/
/*-------------------*/
/*-------------------*/

/*-------------------*/
/*--override default HTML MODAL--*/
/*a analyser, pourquoi une modal AJAX ne se comporte pas pareil qu'une modal HTML*/
/*-------------------*/


/*RESET FANCYBOX STYLE*/
.fancybox__content{
    padding: 0rem;
    background-color: #ffffff;
  }
  
  
  /*-------------------*/
  /*MODAL PAR DEFAUT > 2 PARTIES : 1 IMG + 1 CONTENT*/
  /*DESKTOP : 2 colonnes //  MOBILE : 1 colonne*/
  /*L'image UNIQUE prendra le plus de place possible dans la limite d'affichage*/
  /*le conteneur CONTENT sera fixé a 360px, la largeur d'un ecran mobile*/
  /*Cela permet de gerer l'affichage du contenu text avec peu de variant*/
  /*Le contenu se composera toujours A MINIMA de : 1titre / 1description / 1liste avec un titre de liste / 1 bouton*/
  /*-------------------*/
  .modal-default{
    background-color: #ffffff;
  }
  .modal-default .flex{
    display: flex;
    flex-direction:column;
  }
  .modal-img{
    width: 100%;
    min-height: 100%;
  }
  
  .modal-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
  }
  .modal-content{
    padding:2.44rem 2.22rem;
    box-shadow: 0px -8px 8px rgba(0, 0, 0, 0.1);
    color: var(--clr-neutral);
  }
  .modal-default .modal-content.flex{
    display: flex;
    flex-direction:column;
  }
  .modal-default .modal-content .title{
    font-size: 2rem;
    font-weight: bolder;
    line-height: 2.33rem;
    margin-bottom: 1.22rem;
    color: var(--clr-primary);
    padding-bottom:0.8rem;
    border-bottom: 1px solid var(--clr-secondary);
  }
  .modal-default .modal-content .desc-text{
    margin-bottom: 1rem;
  }
  .modal-default .modal-content .title-list{
    font-weight: bolder;
    margin-bottom: 0.66rem;
  }
  .modal-default .modal-content .desc-list{
    padding-left: 1rem;
  }
  .modal-default .modal-content .btn-primary{
    margin-top: 1.66rem;
    width: 100%;
  }
  
  @media (min-width:768px){
  
    .modal-default{
      width: calc(50% + 420px);
    }
    .modal-default .flex{
      flex-direction: row;
      align-items: stretch;
    }
  
    .modal-content{
      min-width: 420px;
      max-width: 420px;
      box-shadow: -8px 0px 8px rgba(0, 0, 0, 0.1);
    }
    
  }