@charset "utf-8";
/*  ==========================================================================
    Page d'accueil
    ========================================================================== */   
  
  
/*  Header
    ========================================================================== */   
    
    .page-accueil.header-banner {
        height: 10rem;
        position: relative;
    }
    @media (min-width: 33.1875rem) {
        .page-accueil.header-banner {
            height: 0;
            padding-bottom: var(--home-header-height);
        }
    }
    
    .page-accueil.header-banner .container {
        gap: 0;
        padding: 0;
        grid-template-rows: 10rem;
        grid-template-columns: 1fr;
	    grid-template-areas: "logo";
    }
    
    @media (min-width: 33.1875rem) {
        .page-accueil.header-banner .container {
            grid-template-rows: var(--home-header-height);
            grid-template-columns: .9fr 1.1fr;
    	    grid-template-areas: "titre logo";
        }
    }
    
    
    
    
    .page-accueil.header-banner .container .header-img {
        display: none;
    }
    @media (min-width: 33.1875rem) {
        .page-accueil.header-banner .container .header-img {
            background-size: cover;
            display: block;
            position: absolute;
            top: -0.0625rem;
            left: 0;
            height: 100%;
            width: 42vw;
    	    clip-path: url(#clippath);
        }
    }
    
    .page-accueil.header-banner .container .logo-quebec-animee {
	    place-self: center center;
	    width: 17.3125rem;
	    max-width: 37.5rem
    }
    @media (min-width: 33.1875rem) {
        .page-accueil.header-banner .container .logo-quebec-animee {
            width: calc(30vw + 10vh);
    	    place-self: center left;
        }
    }


    .section.activites-en-vedette {
        margin-top: 2em;
        padding-top: clamp(0rem, 2.577vw + -0.693rem, 1.563rem);
        padding-bottom: clamp(1.563rem, 0.428vw + 1.447rem, 1.875rem);
    }

      
    
 /* Contenu
    ========================================================================== */     
    
    main.page-accueil {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    h2 {
        position: relative;
        margin-left: 2.25rem;
        margin-bottom: 1em;
    } 
    h2:before {
        content: "";
    	background-image: url(/media/y21f0jk2/demi-cercle.svg);
    	background-repeat: no-repeat;
    	position: absolute;
    	width: 1.125rem;
    	height: 2.375rem;
    	left: -2.1875rem;
    	background-size: 100%;
    	top: clamp(-0.187rem, 0.309vw + -0.271rem, 0rem);
    }
  
    .activites-a-venir {
        background-color: #F9FAFB;
    }
    .activites-a-venir::before {
        background-color: #F9FAFB;
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }

    
    .umb-block-grid .btn {
        min-width: 12rem;
        text-align: center;
    }
    .umb-block-grid__layout-container {
        gap: 1rem !important;
    }


/*  ==========================================================================
    Slider - Flickity - En vedette (pleine largeur)
    ========================================================================== */  


    #slider-en-vedette .carousel-cell {
        max-width: none;
        width: 75vw;
    }
    #slider-en-vedette .carousel-cell:focus .carousel-savoirplus .btn {
        background-color: #1B3D59;
        outline: 2px solid black;
    }
    #slider-en-vedette .carousel-img {
        max-width: 48.0625rem;
        max-height: 27.125rem;
    }
    @media (min-width: 64rem) {
        #slider-en-vedette .carousel-img {
            margin-bottom: 0;
        }   
    }
    #slider-en-vedette .carousel-img img {
        max-height: none;
    }
    
    #slider-en-vedette .carousel-titre h3 {
        font-size: clamp(1.563rem, 2.139vw + 0.986rem, 3.125rem);
        line-height: 1;
    }
    #slider-en-vedette .carousel-lieu {
        font-size: 1.1rem;
        grid-column-start: 2;
        margin-bottom: 0.25rem;
    }
    @media (min-width: 26.9375rem) {
        #slider-en-vedette .flickity-prev-next-button {
          top: 21vw;
        }  
    }

    #slider-en-vedette 	.carousel-description,
    #slider-en-vedette 	.carousel-savoirplus {
        display: none;
    }
    @media (min-width: 64rem) {
        #slider-en-vedette .flickity-prev-next-button {
          top: 13.5vw;
        }  
        #slider-en-vedette .carousel-cell {
            width: 100%;
    		display: grid;
    		grid-template-columns: 1.15fr .85fr;
    		gap: 2.5rem;
    		min-height: auto;
        }
        #slider-en-vedette .carousel-titre {
            padding-top: 2px;
        }
        #slider-en-vedette .carousel-info {
            border-top: none;
            font-size: 1.1rem;
            font-weight: 600;
            padding-top: 0;
            margin-bottom: 0.2rem;
            position: relative;
        }   
        #slider-en-vedette .carousel-soustitre {
            font-size: clamp(1.25rem, 0.412vw + 1.139rem, 1.5rem);
    		font-weight: 500;
    		margin-top: clamp(-0.875rem, -0.412vw + -0.514rem, -0.625rem);
    		margin-bottom: .75rem;
        }
        
        #slider-en-vedette .carousel-description {
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 1.1rem;
          
        }
        #slider-en-vedette 	.carousel-description p:last-child {
            margin-bottom: 0;
        }
        #slider-en-vedette 	.carousel-savoirplus {
            display: block;
            position: relative;
            top: 1.5rem;
		    left: -2px;
        }
        #slider-en-vedette a.carousel-cell[href^="https://"] h3::after {
        	background-size: 3rem;
        	padding-right: 3rem;
        	width: 2rem;
		    height: 2rem;
		    bottom: -13px;
        }
        #slider-en-vedette .flickity-page-dots {
            bottom: -2.5rem;
        }
        #slider-en-vedette .flickity-prev-next-button {
            top: 50%;
	        transform: translateY(-50%);
        }
    }
    @media (min-width: 64rem) and (max-width: 95.25rem) {
        #slider-en-vedette 	.carousel-description {
            padding-right: 3rem;
        }
    }
    @media (min-width: 80rem) {
        #slider-en-vedette .carousel-description {
            -webkit-line-clamp: 5;
        }
        #slider-en-vedette .carousel-titre h3 {
            width: 75%;
        }
    }
  
 

/*  ==========================================================================
    Bloc Bandeaux externes
    ========================================================================== */

    .section.section-bandeau a {
        background-image: none !important;
	    padding-right: 0 !important;
	    margin: 0 auto;
    	display: block;
    }
    @media (min-width: 80rem) {
        .section-bandeau-flex {
         	display: flex;
    	    gap: 2.25rem;   
        }
    }



/*  ==========================================================================
    Bloc À consulter également
    ========================================================================== */
    
    .liens-consulter {
        margin-top: 2rem;
        text-align: center;
    }
    .lien-consulter {
        border-radius: var(--radius);
        display: inline-block;
        overflow: hidden;
        max-width: 17.1875rem;
        margin-bottom: .75rem;
        margin-right: .5rem;
        margin-left: .5rem;
    }
    @media (min-width: 48rem) { 
        .liens-consulter {
            display: flex;
            gap: 1.50rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .lien-consulter {
            flex-basis: calc(50% - 0.75rem);
            max-width: unset;
            margin: 0;
        }
    }
    @media (min-width: 56rem) {
        .liens-consulter {
            gap: 2.25rem;
            justify-content: space-between;
        }
        .lien-consulter {
            flex-basis: calc(25% - 1.5rem);
        }
    }

    .lien-consulter img {
        transition: transform .3s ease;
    }
    .lien-consulter:hover img {
    	transform: scale(1.05);
    }
    


/*  ==========================================================================
    Bloc Abonnez-vous
    ========================================================================== */
    
    .abonnement h2 {
        font-weight: 400;
        	max-width: 24rem;
    }
    .abonnement h2 span {
    	font-weight: 700;
    }
    .abonnement__separateur {
        border-bottom: 1px solid var(--noir);
    }
    @media (min-width: 64rem) {
        .section-abonnements {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }
        .abonnement {
            flex-basis: 50%;
        }
        .abonnement__separateur {
           border-right: 1px solid var(--noir);
           border-bottom: none;
        }
    }
    .abonnement .btn {
        margin-left: 2.25rem;
        min-width: 12rem;
        text-align: center;
    }
    .abonnement:first-child {
        padding-bottom: 1.5em;
    }
    .abonnement:last-child {
        padding-top: 2em;
    }
    @media (min-width: 64rem) {
        .abonnement:first-child {
            padding-bottom: 0;
        }
        .abonnement:last-child {
            padding-top: 0;
            padding-left: 2em;
        }
    }
    
    
 /* ==========================================================================
    Bloc bus / Vélo
    ========================================================================== */
    
    .section-transports  {
        display: flex;
        flex-wrap: wrap;
    }
    .transport {
        flex-basis: 100%;
        text-align: center;
    }
    .transport:first-child {
        margin-bottom: 2rem;
    }
    @media (min-width: 64rem) {
        .section-transports {
            justify-content: space-between;
        }
        .transport {
            flex-basis: 50%;
            text-align: inherit;
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        .transport:first-child {
            margin-bottom: 0;
        }
    }
    
    
    .transport img {
        max-width: 9.375rem;
		display: inline-block;
    }
    .transport h2 {
        margin: 0.25em 0px .5em;
    }
    .transport h2:before {
    	content: none;
    }
    .transport .btn,
    .abonnement .btn {
        min-width: 12rem;
        text-align: center;
    }