/* ----------- SECTION PAGE 1------------ */
div.logo-LDD{
    position:absolute;
    top:50px;
    left:0;
    margin: 1rem 0;
        max-width: 230px;
        height: auto;
        }

    
@media (max-width: 768px) {
    .zone-mosaic div.row  {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-pack: center;
    justify-content:left!important;
    }
    }
    
    /* ----------- TEXTES ------------ */
    h1.main-title {
        font-size: 2.5rem;
        line-height: 1em;
        margin: 25px auto !important;
        position: relative;
    }   
    /* ----------- SECTION RESSOURCES MOZAIQUE ------------*/
    h2.title,
    .zone-mosaic h2.title {
        font-size: 2rem;
        line-height: 0.9em;
        margin: 25px auto !important;
        position: relative;
    }
    h2.title span,
    .zone-mosaic h2.title span {
        color: #006FBA;
    }
    
    .zone-mosaic div.row div.column h2 {
        font-family: "Gotham Cond A", "Gotham Cond B";
        color: #555 !important;
        text-transform: none !important;
        font-size: 1.8rem;
        line-height: 0.9em;
        font-weight: 900;
        letter-spacing: -1px;
        position: relative;
    }
    .zone-mosaic div.row {
        display: flex;
        justify-content: center;
        align-items: stretch!important;
    }

    .zone-mosaic div.column {
        width: 100%;
        min-height: 500px;
        height: 100%!important;
        flex-flow: row wrap;
        display: flex!important;
        justify-content: left;
        align-items: stretch!important;
    }
    .zone-mosaic a.button {
        align-self: flex-end!important;
        width: fit-content !important;
    }
    
    /* ----------- GRILLES PAGE 1------------ */
    
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        gap: 10px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 10px;
    }
    
    /* ----------- GRILLES MEDIAS ------------ */

/**/
    .grid-container2b {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: dense;
        gap: 10px;
        grid-row-gap: 0px;
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: 10px;
        padding: 20px;
        border-radius: 10px; 
    }

.grid-container3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: dense;
        gap: 10px;
        grid-row-gap: 0px;
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: 10px;
        padding: 20px;
        border-radius: 10px; 
    }

   .grid-container2-horizontal {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-auto-flow: dense;
       gap: 10px;
       grid-row-gap: 0px;
       max-width: 1200px;
       margin: 0 auto;
       margin-bottom: 10px;
       border-radius: 10px;

   }

    .grid-container-2col-1t-3t {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 10px;
    }
   .grid-container-2col-1f-4f {
        display: grid;
          grid-template-columns: 1fr 4fr;
         gap: 20px;
                border-radius: 10px;
        }

    .reverse {
        direction: rtl;
    }
    .reverse div.grid-item {
        direction: ltr;
    }
    .grid-item {
        color: #555555 !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 10px;
        padding-bottom: 0px !important;
        position: relative;
    }
    .grid-item.rowspan {
        grid-row-end: span 2;
    }
    .grid-item.colspan {
        grid-column-end: span 2;
    }
    
    /* ---------6 TUILES PAGE 1--------- */
    .grid-tils {
        padding: 2.5rem;
        margin: 0px;
        border-radius: 10px;
        position: relative;
        min-height: 280px;
    }
    
    a div.grid-tils h3 {
        font-family: "Gotham Cond A", "Gotham Cond B";
        color: #555555 !important;
        font-size: 1.8rem;
        line-height: 0.9em;
        font-weight: 900;
        letter-spacing: -1px;
        margin: 25px auto !important;
        position: relative;
    }
    a:not(.button):not([class]):hover,
    .inline-list > li a:active,
    .inline-list > li a:hover {
        text-decoration: none !important;
    }
    .grid-tils h3 span {
        color: #006FBA;
    }
    
    .grid-tils img {
        max-height: 70px !important;
    }
    .zone-2cols .column{
        margin-top: 25px;
        padding-left: 0;
    }
    /* ----------- ZONE VIDEOS ------------ */
    
    /* ----------- TEXTES VIDEOS PODCAST------------ */
    .zone-media h3 {     
        width: 100%;
        color: #007397 !important;
        font-size: 1.3em;
        line-height: 0.9em;
        font-weight: 500;
        letter-spacing: -1px;
        margin: 25px auto !important;
        position: relative;
    }
    .zone-media h3 span {
        color: #007397;
    }
    
    .zone-media {
        display: grid;
    }
    
    .zone-media .flex-video.widescreen {
        padding-bottom: 5% !important;
        min-height: 130px;
    }
    
    .box-podcast .flex-video iframe {
        height: auto;
    }
    /*podcast*/
    .box-podcast {
        background: white;
        padding: 10px;
        border-radius: 10px;
        position: relative;
    }
    /*videos*/
    .box-videos {
        background: black;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        position: relative;
    }
    .grid-container .grid-item .box-videos {
        max-height: 260px;
    }
    /* ----------------------- */
    
    .grid-container .grid-item .box-videos {
        max-height: 260px;
    }
    /* ----------------------- */
    .doodle {
        position: absolute;
        top: calc(100% - 85px);
        right: -10px;
        z-index: 1;
    }
    
    .doodle2 {
position: absolute;
    top: calc(100% - 65px);
    z-index: 1;
    left: -10px;
    }
 
    .doodle3 {
margin: -10px 0;
     }
        .doodle4 {
    width: fit-content;
        float: right;
        margin-top: -30px;
        }
.doodle3 img,
.doodle4 img{
        max-height: 80px
}

/* ARTICLE*/
.doodle-article {
    position: absolute;
    top: -10px;
    z-index: 1;
    left: 50%;
    max-width: 300px;
}

/* ENSEIGNEMENT*/
     .doodle-prof img {
     margin: -20px 30px;
           }
    /* ----------- FOND SUR ENCARTS VIDEOS, RESEAUTAGE, PORTRAITS ------------ */
    /* ----------- TEXTES------------ */
    
    .bg-dark {
        background-color: #f4f4f4;
    }
    .bg-light {
        background-color: white;
        border: 1px #e4e4e4 solid;
    }
    .bg-color {
        background-color: rgba(0, 158, 238, 0.2);
    }
    

    /*--Hover sur les encarts portraits--*/
    .box-related.bg-color:hover,
    .box-related.bg-dark:hover,
    .box-related-horizontal.bg-dark:hover,
    .box-related.bg-light:hover,
    .grid-tils.bg-dark:hover,
          .second-row:hover {
        background-color: rgba(0, 144, 73, 0.1);
    }
        
    /* ----------- ZONE RÉSEAUTAGE------------ */
    /* ----------- TEXTES------------ */
    
    .zone-network h2 {
        width: 100%;
        font-family: "Gotham Cond A", "Gotham Cond B";
        text-transform: none !important;
        font-size: 3em;
        line-height: 0.9em;
        font-weight: 900;
        letter-spacing: -1px;
        margin: 25px auto !important;
        position: relative;
    }
    .zone-network h2 span {
        color: #006FBA;
    }
    .zone-network .zone-links {
        position: relative;
        width:100%;
        padding: 20px 0 0 !important;
    }
    .zone-network .zone-links h3,
    h3.title2 {
        width: 100%;
        font-family: "Gotham Cond A", "Gotham Cond B";
        text-transform: uppercase;
        color: #555 !important;
        font-size: 2em;
        font-weight: 900;
        position: relative;
    }
    .zone-network .zone-links h3 {
        margin: 0 auto 25px;
          }
    h3.title2 {
      margin: 0 0 0 10px;
  }
    .zone-network .zone-links a {
        color: #555 !important;
    }
    .zone-network .zone-links a:hover {
        color: #009ee2 !important;
    }
    .zone-links p {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #009ee2;
    }
    
    /* ----------- ZONE RESSOURCES TUILES------------ */
    /* ----------- TEXTES------------ */

        .grid-container-2r {
            display: grid;
            grid-template-rows: auto 1fr;
            width: 100%;
        }
    
        .first-row {
            width: 100%;
        }

    .second-row {
    position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        width: auto;
        margin: 10px 10px 0 10px;
        padding:1rem;
        border-radius: 10px;  
        }

        .second-row div:nth-child(2) {
              margin-left: 20px;
    
          }
    
    .box-related h3,
    .box-related-horizontal h3,
    .second-row h3 {
        width: 100%;
        font-family: "Gotham Cond A", "Gotham Cond B";
        font-weight: normal !important;
        color: #555;
        font-size: 1.25rem;
        line-height: 1em;
        font-weight: 900;
        margin: 25px auto !important;
        position: relative;
    }
   .box-related h3 span,
   .box-related-horizontal h3 span,
   .second-row h3 span{
    display:block;
    font-weight: 500!important;
    }
/* ----------- ZONE PORTRAITS------------ */
    .box-related,
    .box-related-horizontal {
        padding: 1.5rem;
        margin: 0px;
        border-radius: 10px;
        position: relative;
    }


.box-related {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    width: 100%;
    min-height: 300px;
        }

/* ----------- AFFICHAGE HORIZONTAL------------ */

.box-related-horizontal {
    position: relative;
        display: flex;
        align-items: center;
       justify-content: flex-start;
        flex-direction: row;
        width: 100%;
        margin-bottom: 10px;
        }
  .box-related-horizontal div:nth-child(2){
    margin-left: 10px;

  }      
  .fit-content{
    width:fit-content;
  }
     
    /* ----------- ZONE PORTRAITS------------ */
    /* ----------- TEXTES------------ */
.box-picture {
    margin: auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.box-picture img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;

}
 /* ----------- PAGE PORTRAITS------------ */
.box-header {
    position: relative;
    width: 100%;
    padding: 60px 30px;
    margin-bottom: 5px !important;
    background-image: url("https://cpaquebec.ca/-/media/images/membres-cpa/regroupements-regionaux/RR-portraits/bg-header-rr.svg");
    background-repeat: no-repeat;
    background-position: bottom 0 left 0;
    background-size: 1027px;
}


h2.h2bloc {
    font-size: 4em;
    line-height: 0.8em;
    margin: 0px;
    text-align: end;
    position: relative;
    z-index: 2;
    margin: 0px;
   
}

h2.h2bloc span {
    font-size: 0.8em;
}

.grid-container-text {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 90%;

}

.grid-container-cards {
    position:relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 80%;
    margin-left: auto;
    margin-right: 0;
    margin-top:1rem;
    background: rgba(246, 251, 248, 0.87);
    border-radius: 8px;
    padding: 2rem 2rem 1rem 2rem;
}

.white{
    color:#fff;
}

.intro{
    border: #f4f4f4 solid 1px;
    border-radius: 0%;
    margin: 30px 0 30px 0;
    padding:1.5rem;
}
h2.name-title{
        width: 100%;
        font-family: "Gotham Cond A", "Gotham Cond B";
        text-transform: none !important;
        font-size: 32px;
        line-height: 0.9em;
        font-weight: 400 !important;
        letter-spacing: -1px;
}
h2.name-title span{
    display: block;
        font-weight: 900;
        letter-spacing: -1px;
        position: relative;
}
h2.name-title::after {
    content: '';
        display: block;
        width: 200px;
        height: 2px;
        background-color: #0081AD;
        margin-top: 8px;
}

h3.title {
    width: 100%;
    font-family: "Gotham Cond A", "Gotham Cond B";
    text-transform: none !important;
    font-size: 3em;
    line-height: 0.9em;
    font-weight: 900;
    letter-spacing: -1px;
    margin: 25px auto !important;
    position: relative;
}
h3.title span {
  color:#0081AD !important;
}
.quote{
    position: absolute;
    right:35px;
    top:-30px;
}
 /* ----------- FIN PAGE PORTRAITS ------------ */



    /* --------MOBILE-------- */
    
    @media (min-width: 768px) and (max-width: 1440px) {
    
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 0 auto;
            padding: 0;
            margin-bottom: 10px;
        }
    
        .doodle img,
        .doodle2 img{
            height: 60px;
            width:auto;
        }
        .doodle {
            position: absolute;
            top: calc(100% - 45px);
            right: -20px;
            z-index: 1;
        }
                .doodle3,
                .doodle4{
                   display:none;
                }
        .doodle2 {
            top: calc(100% - 30px);
            left: -20px;
            z-index: 1;
        }   
    .doodle-article {

        left: 80%;
        transform: translateX(-50%);
    }
    }
        
    
    @media only screen and (max-width: 812px) {

        .box-header {
              
                background-color: #0081AD !important;
               
            }

        .container {
          width: 100%;
          padding: 0 20px;
        }

        div.logo-LDD{
           
            display: none;
            
                }
            
        .grid-container,
        .grid-container2,
        .grid-container2b,
        .grid-container3,
        .grid-container-2col-1t-3t,
        .grid-container-2col-1f-4f,
        .grid-container2-horizontal {
            grid-template-columns: 1fr;

        }

       .grid-container-text,
        .grid-container-cards {
         width:100%
                
        }
        .grid-item.colspan {
            grid-column-end: span 1;
        }
        .zone-mosaic div.row  {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-flow: column;
            flex-flow: column;
            -ms-flex-pack: center;
            justify-content:left!important;
            }
    
        .doodle,
        .doodle2,
        .doodle3,
        .doodle4,
        .doodle-article {
            display: none;
        }
        
        /* ENSEIGNEMENT*/
        .doodle-prof img {
            margin: -20px 30px;
            max-width: 100px;
        }
        .grid-item.colspan {
            grid-column-end: span 1;
        }
        .zone-2cols .column {
            margin-top: 0;
            padding-left: 0;
        }
        .box-related-horizontal,
        .second-row {
        display: flex;
        flex-direction: column;
            align-items: stretch;
            justify-content: center;
            width: 100%;
            text-align: center;
            }
        .second-row{
                margin:auto;
                    padding: 1rem;
                    border-radius: 10px;
        }
         .second-row div:nth-child(2) {
             margin-left: 0;
    
         }
                h3.title2 {
                    margin: auto auto 20px auto;
                }
        .box-related h3 {              
        text-align: center;
        }
 }
    
    /*--MEDIA QUERIES EXCEPTIONS---*/

    @media all and (min-device-width: 768px) and (max-device-height: 1368px) and (orientation:portrait) {
        div.logo-LDD{
            display:none;
            }
      }
    @media all and (min-device-width: 892px) and (max-device-height: 412px) and (orientation:landscape) {
        div.logo-LDD{
            display:none;
            }
      }
      @media all and (device-width: 1024px) and (device-height: 768px) {
        div.logo-LDD{
            display:none;
            }
      }
    @media all and (device-width: 1024px) and (device-height: 600px) {
        div.logo-LDD{
            display:none;
            }
      }