@charset "utf-8";
@import url('global.css');
@import url('helpers.css');


:root {
    --beige: #F3F3EF;
    --bleu: #074B98;
    --cyan: #8BCBD1;
    --cyan-clair: #8BCBD126;
    --gris: #707070;
    --gris-clair: #C0C0C0;
    --gris-tres-clair: #E0E0E0;
    --noir: #1B3D59;
    --orange: #C94C13;
    --saumon: #ED764026;
    --turquoise: #388069;

    --radius: 0.703125rem;
    
    --home-header-height: calc(25vw + 2vh);
}



/*  ==========================================================================
    Styles généraux
    ========================================================================== */

    body {
        font-size: clamp(1.06rem, 0.31vw + 0.979rem, 1.25rem);
        font-family: 'proxima nova', sans-serif;
        line-height: 1.5;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        text-wrap: pretty;
        hyphens: auto;
        hyphenate-limit-chars: 8 4 4;
    }
    @media (min-width: 48rem) {
        body {
            animation: fadeInAnimation .5s;
        }   
    }
    main {
    	margin: 2em auto 3rem;
    	padding: 0 var(--16px);
    	min-height: 50vh;
     	max-width: 87.5rem;
    }
    @media (min-width: 31.25rem) {
        main {
        	padding: 0 2rem;
        } 
    }
    @media (min-width: 87.5rem) {
        main {
        	padding: 0 clamp(1.188rem, -19.008vw + 19.008rem, 2.376rem);
        } 
    }
 
    h1 {
        color: var(--noir);
        font-size: clamp(1.875rem, 3.093vw + 1.044rem, 3.75rem);;
    }
    h2 {
        color: var(--noir);
        font-size: clamp(1.75rem, 0.593vw + 1.591rem, 2.109rem);
    }

    h3 {
        color: var(--noir);
        font-size: var(--26px);
        font-weight: 600;
    }
    
    
    
/*  =========================================================================
    Sections
    ========================================================================= */
    
    .section {
        padding-top: clamp(1.875rem, 2.062vw + 1.321rem, 3.125rem);
        padding-bottom: clamp(1.563rem, 2.062vw + 1.008rem, 2.813rem);
        position: relative;
    }
    .section-couleur-peche {
        background-image: linear-gradient(180deg, rgba(252,234,226,1) 0%, rgba(255,250,242,1) 100%);
    }
    .section-couleur-peche::before {
    	background-image: linear-gradient(180deg, rgba(252,234,226,1) 0%, rgba(255,250,242,1) 100%);
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    .section-couleur-vert {
        background-image: linear-gradient(180deg, rgba(214,237,239,1) 0%, rgba(255,255,255,1) 100%);
    }
    .section-couleur-vert::before {
        background-image: linear-gradient(180deg, rgba(214,237,239,1) 0%, rgba(255,255,255,1) 100%);
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    .section-couleur-rose {
        background-image: linear-gradient(180deg, rgba(252,228,234,1) 0%, rgba(255,255,255,1) 100%);
    }
    .section-couleur-rose::before {
        background-image: linear-gradient(180deg, rgba(252,228,234,1) 0%, rgba(255,255,255,1) 100%);
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    .section-couleur-gris {
        background-image: linear-gradient(180deg, rgba(230,231,223,1) 0%, rgba(255,255,255,1) 100%);
    }
    .section-couleur-gris::before {
        background-image: linear-gradient(180deg, rgba(230,231,223,1) 0%, rgba(255,255,255,1) 100%);
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    
    
    
 /* =========================================================================
    Bandeau d'entête
    ========================================================================= */
   
    .header-banner {
        background-position: center center;
	    background-size: cover;
    }
    @media (min-width: 48rem) {
        .header-banner {
    	    background-size: 70%;
    	    height: 14rem;
        }
    }
    .header-banner.jaune {
        background-image: url(/media/oladiz0q/grains.svg), linear-gradient(0deg, rgba(252,234,226,1) 0%, rgba(255,255,255,1) 100%);
    }
    .header-banner.vert {
        background-image: url(/media/oladiz0q/grains.svg), linear-gradient(0deg, rgba(214,237,239,1) 0%, rgba(255,255,255,1) 100%);
    }
    .header-banner.rose {
        background-image: url(/media/oladiz0q/grains.svg), linear-gradient(0deg, rgba(252,228,234,1) 0%, rgba(255,255,255,1) 100%);
    }
    
    .header-banner .container {
        margin: 0 auto;
        padding: 1.25rem 2rem 0;
        max-width: 87.5rem;
        display: grid;
        gap: 2.376rem;
	    grid-template-columns: 1fr;
        grid-template-areas: 
                             "logo"
                             "titre";
    }
    @media (min-width: 48rem) {
        .header-banner .container {
            padding: 0 2rem 2.5rem;
    	    grid-template-columns: 1fr 1fr;
            grid-template-areas: "titre logo";
            height: 100%;
        }
    }
    @media (min-width: 87.5rem) {
        .header-banner .container {
            padding: 0 clamp(1.188rem, -19vw + 19rem, 2.375rem) 2.5rem;
        }
    }
    
    .header-banner .container h1 {
        grid-area:  titre;
        place-self: center center;
        margin-bottom: 0;
    }
    @media (max-width: 47.9375rem) {
        .header-banner .container h1 {
        	background-color: var(--bleu);
        	color: white;
        	margin-left: -2rem;
	        margin-right: -2rem;
        	padding: 0.25rem 0;
        	text-align: center;
        	width: 100vw;
        	font-weight: 600;
        }
    }
    @media (max-width: 31.1875rem) {
        .header-banner .container h1 {
        	margin-left: -2rem;
	        margin-right: -2rem;
        }
    }
    @media (min-width: 48rem) {
        .header-banner .container h1 {
            place-self: end start;
        }
    }
   
    .header-banner .container .logo-quebec-animee {
        grid-area:  logo;
        place-self: center center;
        width: 17.3125rem;
        max-width: calc(100vw - 4rem);
    }
    @media (min-width: 48rem) {
        .header-banner .container .logo-quebec-animee {
    	    place-self: end end;
    	    width: 20rem;
    	    margin-bottom: .5rem;
        }
    }

   
      
/*  Bandeau d'entête pages activité et lieu
    ========================================================================== */ 
   
   @media (min-width: 48rem) {
        .header-banner.page-activite .container,
        .header-banner.page-lieu .container {
            grid-template-columns: 1fr;
            grid-template-areas: "logo";
        }
        .header-banner.page-activite .container .logo-quebec-animee,
        .header-banner.page-lieu .container .logo-quebec-animee{
            margin-bottom: 1.5625rem;
    	    place-self: center center;
        }
    } 
    @media (min-width: 57.25rem) {
        .header-banner.page-activite .container,
        .header-banner.page-lieu .container {
            gap: 0;
            height: 100%;
        }
        .header-banner.page-activite .container h1,
        .header-banner.page-lieu .container h1{
            place-self: end start;
        }

        .header-banner.page-activite .container .logo-quebec-animee,
        .header-banner.page-lieu .container .logo-quebec-animee{
    	    place-self: end end;
    	    width: 20rem;
    	    margin-bottom: var(--8px);
        }
    }

   
/*  Bouton du menu mobile
    ========================================================================== */ 
    
    #mobile-menu-btn {
        background: transparent;
        border: none;
        position: absolute;
        right: 0;
        top: 50%;
        color: black;
        width: 4.375rem;
        height: 5.3125rem;
        transform: translateY(-50%);
    }
    @media (min-width: 48rem) {
        #mobile-menu-btn {
            display: none;
        }   
    }
    #mobile-menu-btn svg {
        position: relative;
	    margin: 0 auto;
    }
    
    
    
 /* =========================================================================
    Menu principal mobile
    ========================================================================= */
    
    @media (max-width: 47.9375rem) {
        .menu-principal {
            position: absolute;
            top: 5.3125rem;
            background-color: var(--couleur-bleu-ville);
            width: 100%;
            left: 0;
            height: calc(100vh - 6.25rem);
            z-index: 100;
            height: 5vh;
            opacity: 0;
            visibility: hidden;
            transition: all .4s ease;
            background-color: var(--noir);
            overflow-y: hidden;
            z-index: 20;
        }
        .menu-principal.visible {
            visibility: visible;
            opacity: 1;
            height: calc(100vh - 5.3125rem);
        }
        @supports (height: 100dvh) {
            .menu-principal.visible {
                height: 100dvh;
                
            }   
        }
        
        .menu-principal > ul {
            background-color: white;
            display: grid;
            grid-template-columns: 1fr;
	        grid-template-areas: "recherche";
            list-style: none;
            padding-left: 0;
        }
        .menu-principal > ul > li {
            border-bottom: 1px solid var(--gris);
        }
        .menu-principal a {
            color: var(--noir);
            display: block;
            font-size: 1.1rem;
            font-weight: 700;
            line-height: clamp(4.375rem, 10.753vh + -0.013rem, 6.25rem);
            padding-left: var(--16px);
            position: relative;
            text-decoration: none;
        }
  
        .menu-principal li:not(.dropdown) a:after {
            content: "";
            background-image: url(/media/hxhfdih5/picto-fleche.svg);
            width: var(--14px);
            height: var(--22px);
            background-size: var(--14px) var(--22px);
            position: absolute;
            right: 2.5rem;
            filter: invert(1) saturate(0) brightness(2);
            top: 50%;
            transform: translateY(-50%);
        }
        .menu-principal .dropdown-menu {
            list-style: none;
            margin-top: -3vh;
        }
        .menu-principal .dropdown-menu a {
            line-height: clamp(2.813rem, 5.376vh + 0.618rem, 3.75rem);
        }
        
        .btn-recherche {
            grid-area: recherche;
        }
        #btn-recherche {
            display: none;
        }
        #recherche { 
            padding-top: 2rem;
            padding-bottom: 2rem;
            background-color: var(--cyan-clair);
            padding: 1.5rem 0rem 2rem 1rem;
        }
        .search-form input {
            width: calc(100% - 5.25rem);
        }
        .search-form button {
            background: transparent;
            border: none;
          	padding: 0.5625rem 0.26rem 0;
        	width: 3.125rem;
        	height: 3.125rem;
        	vertical-align: bottom;
        }
        .search-form button img {
            width: 100%;
    	    height: auto;
        }
        /* ouverture du menu */
        .no-scroll {
            overflow: hidden;
        }
        #ligne-1, #ligne-2, #ligne-3 {
            transition: transform .3s, opacity .3s;
        }
        #ligne-1 {
            transform-origin: 0.84375rem var(--6px);
            transform: rotate(0deg) translate(0.25rem, 0.25rem)
        }
        #ligne-1.active {
            transform: rotate(45deg) translate(var(--5px), var(--6px));
        }
        #ligne-2 {
            transform: rotate(0deg) translate(0.25rem, 0.9375rem)
        }
        #ligne-2.active {
            opacity: 0;
        }
        #ligne-3 {
            transform-origin: 0.84375rem var(--22px);
            transform: rotate(0deg) translate(0.25rem, var(--26px));
        }
        #ligne-3.active {
            transform: rotate(-45deg) translate(0.25rem, var(--22px));
        }
    }
   
   
   
 /* =========================================================================
    Menu principal desktop
    ========================================================================= */
    
    @media (min-width: 48rem) {
        .menu-principal {
            background-color: #074B98;
            position: relative;
            display: none;
        }
        
        .menu-principal {
            display: block;
        }   
        
        .menu-principal > ul {
            margin: 0 auto;
            padding: 0 2rem 0 1.3125rem;
            max-width: 87.5rem;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(4, auto) .5fr;
        }
        
       
        .menu-principal > ul > li {
             position: relative;
        }
        .menu-principal .dropdown {
            width: fit-content;
        }
        .menu-principal > ul > li > a {
            color: white;
            display: inline-block;
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0.625rem 0;
            text-decoration: none;
            white-space: nowrap;
        }
        .menu-principal > ul > li > a > span {
            display: inline-block;
            padding: 0.3125rem 0.9375rem;
            border-radius: 2.1875rem;
            transition: 0.3s background-color;
        }
        .menu-principal > ul > li > a:hover > span,
        .menu-principal > ul > li > a:focus > span,
        .menu-principal > ul > li > a:active > span,
        .menu-principal > ul > li > a.hover > span
        {
            background-color: #388069;
        }
        .menu-principal .btn-recherche {
            justify-self: end;
            align-self: center;
        }
        button {
            cursor: pointer;
        }
        .menu-principal button {
    	    background: transparent;
            border: none;
            display: block;
            padding: 0;
        }
        .menu-principal button > span { 
            border-radius: 2rem;
            display: block;
            transition: 0.3s background-color;
        }
        .menu-principal .btn-recherche button > span {
            background-color: #388069;
            background-image: url("/media/vydjrosv/picto-recherche.svg");
            background-size: 2.8rem 2.8rem;
            color: white;
            width: 2.8rem;
            height: 2.8rem;
        }
        .menu-principal .btn-recherche button:hover > span,
        .menu-principal .btn-recherche button.hover > span {
            background-color: #1B3D59;
        }
        
        /* Style du sous-menu */
        .dropdown-menu {
            display: none; 
            position: absolute;
            top: 2.875rem; 
            left: 0;
            background-color: white; 
            border-radius: 1.09375rem;
            border: 1px solid var(--gris);
            padding: .25rem 0;
            z-index: 1000;
        }
    
        .dropdown-menu li {
            display: block;
            margin: 0 auto;
            padding: 0 0.9375rem 0 0.9375rem;
        	white-space: nowrap;
        	transition: background-color .3s, color .3s;
        }
        .dropdown-menu a {
            color: black;
            font-size: 1.125rem;
            font-weight: 400;
            padding: 0.9375rem var(--5px) 0.9375rem 1.125rem;
            position: relative;
            text-decoration: none;
            display: block;
            transition: 0.3s background-color;
            border-bottom: 1px solid var(--gris);
            
        }
        .dropdown-menu li:last-child a {
            border-bottom: none;
        }
        .dropdown-menu a::before {
        	content: "";
        	background-image: url(/media/y21f0jk2/demi-cercle.svg);
        	background-repeat: no-repeat;
        	position: absolute;
        	width: var(--9px);
        	height: var(--19px);
        	left: 0;
        	background-size: 100%;
        	top: 50%;
        	transform: translateY(-50%);
        }
        .dropdown-menu li:hover {
            background-color: var(--cyan-clair);
        }
        .dropdown-btn {
            cursor: pointer;
        }
        .dropdown-btn.hover > span {
            background-color: #388069;
        }
        
        .menu-lieux .dropdown-menu {
            display: none;
        }
        .menu-lieux.open .dropdown-menu {
            display: block;
        }

        
        
        #recherche {
            position: absolute;
            background-color: white;
            border: 1px solid var(--gris);
            border-radius: 1.09375rem;
            opacity: 0;
            padding: 1.5rem 0rem 2rem 1rem;
            top: 2.4375rem;
            right: -1em;
            text-wrap: nowrap;
            transition: opacity .3s, visibility .3s;
            visibility: hidden;
            z-index: 1;
        }
        #recherche.active,
        #recherche.is-focus {
            opacity: 1;
            visibility: visible;
        }
        .search-form input {
            background-color: #ffffff00;
            border-radius: 0;
            border: 1px solid transparent;
            border-bottom: 1px solid var(--bleu);
            box-shadow: none;
            display: inline-block;
            font-size: 1.25rem;
            padding-left: var(--7px);
            width: 18.75rem;
            transition: border 0.3s, background 0.3s;
            
        }
        .search-form input:focus {
            border: 1px solid var(--bleu);
            background-color: #ffffff;
       
        }
        .search-form button {
            background: transparent;
            border: none;
            display: inline-block;
            margin-right: var(--14px);
            margin-bottom: -0.1875rem;
        	padding: 0 0.25em;
        	width: 3.125rem;
        	height: 3.125rem;
        	vertical-align: bottom;
        }
        .search-form button img {
            width: 100%;
    	    height: auto;
        }
        
     
    }
   
    @media (min-width: 64rem) {
        .menu-principal > ul {
	        gap: 0 4rem;
	        grid-template-columns: repeat(4, auto) 1fr;
        }   
    }
    @media (min-width: 87.5rem) {
        .menu-principal > ul {
            padding: 0 clamp(1.188rem, -19vw + 19rem, 2.375rem) 0 clamp(0.313rem, -22vw + 20.938rem, 1.688rem);
        }   
    }
  
/*  ==========================================================================
    Page Activité
    ========================================================================== */   
   
   
/*  Grille
    ========================================================================== */  
    
    .entete-image {
       grid-area:  image;
    }
    .entete-intro {
       grid-area:  intro;
       margin-top: 1.25rem;
    }
    .section-contenu {
       grid-area: contenu;
    }
    .section-representations {
       grid-area: representations;
    }
    .section-message-annulation {
       grid-area: message-annulation;
    }
    .section-meteo {
       grid-area: meteo;
    }
    .section-lieu {
       grid-area: lieu;
    }
    .autres-activites {
       grid-area: autres;
    }
    main.page-activite {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "image"
            "intro"
            "contenu"
            "representations"
            "message-annulation"
            "meteo"
            "lieu"
            "autres"
    }
    @media (min-width: 57.25rem) {
        main.page-activite {
            gap: 1rem 80px;
            grid-template-columns: 7fr 4fr;
            grid-template-areas: 
                "image ."
                "intro contenu"
                "representations representations"
                "message-annulation ."
                "meteo ."
                "lieu lieu"
                "autres autres"
        }
    }
    .page-activite.header-banner {
        height: 14rem;
    }
    main.page-activite .section-contenu {
       margin-top: 2.1875rem; 
    }
   
/*  Éléments 
    ========================================================================== */  
    
    .image-vedette {
        position: relative;
        margin-top: -6.25rem;
	    width: fit-content;
    }
    @media (min-width: 57.25rem) {
        .image-vedette {
            margin-top: -13.125rem;
            max-width: 600px;
        }
    }
    @media (min-width: 87.5rem) {
        .image-vedette {
            max-width: none;
        }
    }
    .image-vedette img {
        border-radius: var(--radius);
    }
    @media (max-width: 57.1875rem) {
        .image-vedette img {
            width: 100%;
        }   
    }
    @media (min-width: 87.5rem) {
        .image-vedette img {
            height: 27.125rem;
        } 
    }
    .image-vedette figcaption {
        color: #595959;
    	font-size: .85em;
    	position: absolute;
    	left: calc(100% + 1em);
    	bottom: 0;
    	transform: rotate(-90deg);
    	transform-origin: center 1em;
    	white-space: nowrap;
    	line-height: 1;
    	right: 0;
    }
    @media (min-width: 31.25rem) {
        .image-vedette figcaption {
        	line-height: 1.2;
        }
    }

    main.page-activite h1,
    main.page-lieu h1{
        font-size: clamp(2.11rem, 1.932vw + 1.591rem, 3.281rem);
        position: relative;
    }
    @media (min-width: 90rem) {
        main.page-activite h1:before,
        main.page-lieu h1: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: var(--11px);
        }
    }
    .activite-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: .95rem;

    }
    
    .grille {
        margin: 1em 0 1em 3.65625rem;
    }
    @media (min-width: 57.25rem) {
        .grille {
            margin-left: 3.84375rem;
        }   
    }
    .grille > * {
        border-bottom: 1px solid var(--gris);
        padding: 1.25rem 0;
        position: relative;
    }
    .grille > *::before {
        content: "";
        background-size: 3.125rem;
    	width: 3.125rem;
    	height: 3.125rem;
    	position: absolute;
    	display: block;
    	top: clamp(0.375rem, 0.413vw + 0.264rem, 0.625rem);
    	left: -2.46875rem;
    	transform: translateX(-50%);
    }
    .grille-date {
        font-size: clamp(1.313rem, 0.696vw + 1.125rem, 1.734rem);
        font-weight: bold;
        line-height: 1;
    }
    .grille-date::before {
        background-image: url(/media/fogneifd/picto_date.svg);
        top: clamp(0.313rem, 0.412vw + 0.202rem, 0.563rem);
    }
    .grille-date-principal {
        color: var(--bleu);
    }
    .grille-date-supplement {
    	color: var(--noir);
    	font-size: clamp(1rem, 0.309vw + 0.917rem, 1.188rem);
    	font-weight: normal;
    	margin-top: 0.25em;
    }
    .grille-heure::before {
        background-image: url(/media/3sce4z4g/picto_heure.svg);
    }
    .grille-tarif p {
        margin-bottom: 0;
    }
    .grille-tarif::before {
        background-image: url(/media/gnvn5c5b/picto_cout.svg);
    }
    .grille-telephone::before {
        background-image: url(/media/o02lbygn/picto_telephone.svg);
    }
    .sites-web-externes {
       	list-style: none;
       	margin-bottom: 0;
	    padding-left: 0;
    }
    .sites-web-externes-wrapper::before {
       background-image: url(/media/5xehyxdr/picto_siteweb.svg);
    }
    .sites-web-externes li {
        line-height: 1.25em;
    }
    .sites-web-externes li:not(:first-child) {
        margin-top: 0.625rem;
    }
  
   
/*  Liste des catégories
    ========================================================================== */  
   
    .liste-categories {
        line-height: 2;
    	list-style: none;
    	padding-left: 0;
    }
    .liste-categories .categorie {
        display: inline; /* Afficher les catégories sur une seule ligne */
        margin-right: .5rem;
    }
  
   
/*  Liste des représentations pour une activité de type 2
    ========================================================================== */
    
    .section-representations .grille-date {
        margin-left: 3.75rem;
        padding: 0 0 1.25rem;
	    position: relative;
	    
    }
    @media (min-width: 48rem) {
        .section-representations .grille-date {
            padding: 1.25rem 0;
        }   
    }
    @media (min-width: 57.25rem) {
        .section-representations .grille-date {
            margin-left: 3.5625rem;
    	    
        }
    }
    .section-representations .grille-date-principal {
        color: var(--noir);
    }
    .section-representations .grille-date::before {
        background-image: url(/media/fogneifd/picto_date.svg);
    	content: "";
    	background-size: 3.125rem;
    	width: 3.125rem;
    	height: 3.125rem;
    	position: absolute;
    	left: -2.53125rem;
    	transform: translateX(-50%);
    	top: -0.9375rem;
    }
    @media (min-width: 48rem) {
        .section-representations .grille-date::before {
          	top: clamp(0.375rem, 0.475vw + 0.147rem, 0.563rem);
        }
    }
    @media (min-width: 57.25rem) {
        .section-representations .grille-date::before {
          	left: -2.34375rem;
        }
    }
    .liste-representations {
        padding-left: 0;
    }
    .liste-representations li {
        display: grid;
        gap: 0;
        grid-template-columns: min-content auto 1fr;
        grid-template-areas:  
            "rep-date rep-heure rep-btn"
            "rep-lieu rep-lieu rep-btn";
        border-bottom: 1px solid #707070;
        padding: 1rem 0;
    	text-wrap: balance;
    }
    .liste-representations li .col-date {
        white-space: nowrap;
    }
    @media (max-width: 26.875rem) {
        .liste-representations li .col-date::after {
            content: ", ";
            margin-right: var(--5px);
            margin-left: -0.1875rem;
            
        }
    }
    @media (min-width: 26.9375rem) {
        .liste-representations li {
            gap: 0 16px;
            grid-template-columns: .75fr 1fr 1fr;
        }
    }
    @media (min-width: 45rem) {
         .liste-representations li {
            grid-template-columns: .75fr 1fr 1fr 1fr;
            grid-template-areas:  
                "rep-date rep-heure rep-lieu rep-btn";
        }   
    }
    .col-date { grid-area: rep-date }
    .col-heure { grid-area: rep-heure }
    .col-lieu { grid-area: rep-lieu }
    .col-btn { grid-area: rep-btn }
    .liste-representations li > * {
        align-self: center;
    }
    .col-btn {
	    justify-self: end;
    }
    
   
/*  Lieu
    ========================================================================== */  
    
    .section-lieu {
        background-color: var(--beige);
        border-radius: var(--radius);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "carte"
            "info";
    }
    @media (min-width: 57.25rem) {
        .section-lieu {
            gap: 1rem 80px;
            grid-template-columns: 3.5fr 6.5fr;
            grid-template-areas: 
                "info carte";
        }
    }
    .section-lieu-info {
       grid-area: info;
       padding: 3.125rem 1.25rem 1.5625rem 5rem;
       line-height: 1.59375rem;
    }
    @media (min-width: 25rem) {
        .section-lieu-info {
           padding-left: 6.25rem;
           padding-right: 1.5rem;
        }   
    }
    .section-lieu-carte {
       grid-area: carte;
    }
    .lieu-nom {
        color: var(--noir);
        font-size: var(--23px);
        font-weight: bold;
        line-height: 1.1;
        margin-bottom: var(--3px);
        position: relative;
        text-wrap: balance;
        hyphens: none;
    }
    .lieu-nom::before {
        background-image: url(/media/nmwpesk5/picto_coordonnees.svg);
    	content: "";
    	background-size: 3.125rem;
    	width: 3.125rem;
    	height: 3.125rem;
    	position: absolute;
    	display: block;
    	left: -2.46875rem;
    	transform: translateX(-50%);
    	top: -0.3125rem;
    }
    .lieu-adresse {
        margin-bottom: var(--5px);
    }
    .section-lieu-info-liens { 
        margin-top: 3rem;
    }
    .lieu-itineraire,
    .lieu-fiche,
    .lieu-accessibilite { 
        margin-top: 1.5em;
        position: relative;
    }
    .lieu-itineraire::before,
    .lieu-fiche::before,
    .lieu-accessibilite::before {
        background-image: url(/media/5btpv5sz/picto_itineraire.svg);
    	content: "";
    	background-size: 3.125rem;
    	width: 3.125rem;
    	height: 3.125rem;
    	position: absolute;
    	display: block;
    	left: -2.46875rem;
    	transform: translateX(-50%);
    	top: -0.6875rem;
    }
    .lieu-fiche::before {
        background-image: url(/media/qoxbel1x/picto-information.svg);
    }
    .lieu-accessibilite::before {
        background-image: url(/media/ccxdpaum/picto-accessibilite.svg);
    }
    .lieu-arrondissement {
        font-weight: 400;
	    line-height: 1.2em;
	    font-size: .9em;
    }
    #map {
        width: 100%;
        height: 25rem;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        overflow: hidden;
    }
    .esri-attribution {
        display: none !important;
    }
    
    .message-placeholder {
    	position: relative;
    	display: none;
    	font-size: 1rem;
    }
    .message-placeholder.active {
        display: inline-block;
    }
    @media (min-width: 48rem) {
        .message-placeholder {
        	display: inline-block;
        	left: 2rem;
        	opacity: 0;
        	transition: opacity .2s;
        }
        .message-placeholder.active {
            opacity: 1;
        }
    }
   
    .message-placeholder p {
    	line-height: var(--26px);
	    margin-bottom: 0;
    }



/*  Vous aimerez aussi
    ========================================================================== */  
    
    .section-separateur {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--gris);
    }
    @media (min-width: 27rem) {
        .section-separateur {
            margin-top: 4rem;
            padding-top: 4rem;
        }
    }
   
   
   
/*  ==========================================================================
    Page Lieu
    ========================================================================== */   
   
   
/*  Grille
    ========================================================================== */  
    
    .section-activites {
        grid-area: activites;
    }
    .section-accessibilite {
        grid-area: accessibilite;
    }

    main.page-lieu {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "image"
            "intro"
            "contenu"
            "activites"
            "lieu"
            "accessibilite"
    }
    @media (min-width: 57.25rem) {
        main.page-lieu {
            gap: 1rem 80px;
            grid-template-columns: 7fr 4fr;
            grid-template-areas: 
                "image ."
                "intro contenu"
                "activites activites"
                "lieu lieu"
                "accessibilite accessibilite"
        }
    }
    .page-lieu.header-banner:not(.no-image) {
        height: 14rem;
    }
    @media (min-width: 48rem) and (max-width: 57.1875rem) {
        .page-lieu.header-banner.no-image .container  {
        	padding-bottom: 0;
        }
    }
    @media (max-width: 57.1875rem) {
        main.page-lieu .grille > div:first-child {
            border-top: 1px solid var(--gris);
        }
    }
    

/*  Accessibilité
    ========================================================================== */  

    .a11y-grille {
        display: grid;
        grid-template-columns: 1fr;
    }
   
    @media (min-width: 85rem) {
        .a11y-intro,
        .a11y-grille {
            max-width: 98%;
        }   
    }
    .a11y-groupe {
        display: grid;
        grid-template-columns: 1fr;
        border-bottom: 1px solid var(--gris-clair);
    }
    @media (min-width: 48rem) {
        .a11y-groupe {
            grid-template-columns: repeat(2, 1fr);
        }   
    }
    .a11y-titre {
        padding: 1.5rem 1.5rem .5rem 0;
    }
    @media (min-width: 48rem) {
        .a11y-titre {
            padding-bottom: 1.5rem;
        } 
    }
    .a11y-titre h3 {
        font-size: 1.1em;
	    font-weight: 700;
	    margin-bottom: 0.25rem;
    }
    .a11y-titre p {
        margin-bottom: 0;
    }
    .a11y-reponse {
        align-self: end;
        align-self: center;
        padding: .5rem 1.5rem 1.5rem 0;
    }
    @media (min-width: 48rem) {
        .a11y-reponse {
            padding-top: 1.5rem;
        } 
    }
    .a11y-reponse-oui p,
    .a11y-reponse-non p {
        padding-left: 2em;
        position: relative;
    }
    .a11y-reponse-oui p::before,
    .a11y-reponse-non p::before {
        background-size: 1.579em 1.579em;
        content: "";
        display: block;
        left: 0;
        width: 1.579em;
        height: 1.579em;
        position: absolute;
	    top: clamp(-0.23rem, 0.086vw + -0.253rem, -0.178rem);;
    }
    .a11y-reponse-oui p::before { 
        background-image: url(/media/ghhfusif/picto-accepter.svg);
    }
    .a11y-reponse-non p::before { 
        background-image: url(/media/uzyjclbq/picto-refuser.svg);
    }
    .a11y-attention + .a11y-reponse-oui p::before { 
        background-image: url(/media/jtqh2tr5/picto-attention.svg);
    }
    .a11y-groupe > .a11y-reponse > p,
    .a11y-groupe > .a11y-reponse > ul {
        margin-bottom: 0;
    }


/*  ==========================================================================
    Filtres
    ========================================================================== */
    
    .filtres {
        background-color: #c1d0d7;
    }
        
    .filtres-form {
        gap: 0.75em 0;
        padding: 1.25em 0;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        grid-template-areas: 
            "filtreTitreDate"
            "filtre-dates"
            "btns-container"
            "filtreTitreLieu"
            "filtre-localisation"
            "filtreTitreArr"
            "filtre-arrondissement"
            "filtreTitreCategorie"
            "filtre-categorie"
            "filtreTitrePrix"
            "filtre-prix"
            "btnReset";
    }
    @media (min-width: 59.375rem) {
        .filtres-form {
            gap: 1em 10px;
            grid-template-columns: auto auto auto;
            grid-template-areas: 
                "filtreTitreArr filtreTitreLieu filtreTitrePrix"
                "filtre-arrondissement filtre-localisation filtre-prix"
                "filtreTitreDate filtreTitreCategorie ."
                "filtre-dates filtre-categorie ."
                "btns-container . btnReset";
            justify-content: space-between;
        }
    }
    @media (min-width: 69rem) {
        .filtres-form {
            gap: .75rem 10px;
            grid-template-columns: auto auto min-content min-content min-content;
            grid-template-areas: 
                "filtreTitreDate filtreTitreArr filtreTitreLieu filtreTitreCategorie filtreTitrePrix"
                "filtre-dates filtre-arrondissement filtre-localisation filtre-categorie filtre-prix"
                "btns-container btns-container . btnReset btnReset";
            justify-content: space-between;
        }
    }
    
    
    .filtre-dates { grid-area: filtre-dates; }
    .filtre-localisation { grid-area: filtre-localisation; }
    .filtre-arrondissement { grid-area: filtre-arrondissement; }
    .filtre-categorie { grid-area: filtre-categorie; }
    .filtre-prix { grid-area: filtre-prix; }
    
    #filtreTitreDate { grid-area: filtreTitreDate }
    #filtreTitreLieu { grid-area: filtreTitreLieu }
    #filtreTitreArr { grid-area: filtreTitreArr }
    #filtreTitreCategorie { grid-area: filtreTitreCategorie }
    #filtreTitrePrix { grid-area: filtreTitrePrix }
    .btns-container { grid-area: btns-container }
    #btnCeWeekend { grid-area: btnCeWeekend; }
    #btnSemaineProchaine { grid-area: btnSemaineProchaine; justify-self: start; }
    
    #btnReset { grid-area: btnReset; justify-self: start; }
    
    @media (max-width: 48rem) {
        #btnCeWeekend, 
        #btnSemaineProchaine,
        #btnReset { white-space: nowrap; font-size: 1em; justify-self: start }
    }
    @media (min-width: 69rem) {
        #btnReset { justify-self: end }
    }
    
    select {
        cursor: pointer;
    }
    
    .filtres::before {
        background-position: center;
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    
    .filtre-date-debut,
    .filtre-date-fin,
    .filtre-lieu,
    .filtre-arrondissement {
        display: inline-block;
    }
    .filtre-lieu select {
        max-width: 12.5rem;
    }
    .filtre-arrondissement select {
        max-width: 14.69rem;
    }
    @media (min-width: 69rem) and (max-width: 82.5rem) {
        .filtre-lieu select,
        .filtre-arrondissement select {
        	max-width: 8.85rem;
        }
    }
    
    .btn-filtre,
    .btn-reset {
        background-color: transparent;
        color: var(--noir);
        font-weight: normal; 
        padding: 0;
        text-decoration: underline;
    }
    .btn-reset {
        display: inline-flex;
        align-items: center;
    }
    .btn-reset::before {
        content: "";
        display: inline-block;
        background-image: url(/media/bwgjidpx/picto-recommencer.svg);
        background-size: 1.25rem 1.25rem;
        background-repeat: no-repeat;
        width: 1.25rem;
        height: 1.25rem;
        margin-right: .35rem;
    }
    
    .btn-filtre:hover,
    .btn-filtre:focus,
    .btn-filtre:active,
    .btn-reset:hover,
    .btn-reset:focus,
    .btn-reset:active {
        color: var(--bleu);
        background-color: transparent;
        text-decoration: none;
    }
    #btnCeWeekend::after { 
        content: "|";
        text-decoration: none;
        margin: 0 .5rem;
        
        display: inline-block;
        
    }
    .fade-out {
        opacity: 0;
        transition: opacity 0.25s ease-out;
    }

    .fade-in {
        opacity: 1;
        transition: opacity 0.25s ease-in;
    }
    
    /* Conteneur pour l'icône de suppression */
    .input-container {
        position: relative;
        display: inline-block;
    }
 
    .date-input {
        padding-right: 1.875rem; /* Espace pour l'icône */
        width: 9.6875rem;
    }   
    @media (min-width: 26.9375rem) {
        .date-input {
            max-width: 12.5rem;
            width: auto;
        }   
    }
    @media (min-width: 69rem) and (max-width: 82.5rem) {
        .date-input {
		    max-width: 10.68rem;
        }
    }
  
    #filtreTitreDate,
    #filtreTitreLieu,
    #filtreTitreArr,
    #filtreTitreCategorie,
    #filtreTitrePrix {
        color: var(--noir);
        font-size: 0.9375rem;
        font-weight: bold;
        margin-bottom: -0.625rem;
    }
    
    /* Style de l'icône 'X' */
    .clear-icon {
        background-image: url(/media/pjfmxvnm/picto-fermer.svg);
        position: absolute;
        right: 0.625rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        display: none; /* Caché par défaut */
        width: 1.25rem;
    	height: 1.25rem;
    }
    
    .clear-icon:hover {
        color: #333; /* Changer de couleur au survol */
    }
    
    /* Montrer l'icône seulement si le champ a une valeur */
    .date-input:not(:placeholder-shown) + .clear-icon {
        display: inline;
    }
    /* Montrer l'icône seulement si le champ a une valeur */
    .date-input:not(:placeholder-shown) + .clear-icon {
        display: inline;
    }

    /* Cacher le sélecteur d'année */
    .flatpickr-current-month .numInputWrapper {
        display: none;
    }
    
    /* Facultatif : Ajuster la largeur du sélecteur de mois pour qu'il occupe tout l'espace */
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        width: 100%;
        text-align: center;
    }
    .message-aucun-resultat {
        display: none;
        margin-top: 1rem;
        margin-bottom: 6rem;
    }


/*  ==========================================================================
    Affichage de la liste des activités (grille / liste)
    ========================================================================== */
 
    .affichage-toggle {
        padding: 1.5em 0;
        text-align: end;
        
    }
    
    
    
/*  ==========================================================================
    Grille d'items
    ========================================================================== */

    .items {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 1.875rem 1.25rem;
    }
    @media (min-width: 26.9375rem) {
        .items {
        	gap: 4.375rem 1.75rem;
        }   
    }
    @media (min-width: 93.75rem) {
        .items {
        	gap: 4.375rem 1.6875rem;
        }   
    }
    .item {
        text-decoration: none;
        color: black;
    	position: relative;
        flex-basis: calc(50% - 0.625rem);
        max-width: 20rem;
    }
    /* Dans la page Mes activités, sur mobile, les activités sont affichées sur une colonne parce qu'il y en a moins */
    @media (max-width: 26.875rem) {
        .page-mes-activites .item {
            flex-basis: 100%;
            max-width: none;
        }
    }
    @media (min-width: 26.9375rem) {
        .item {
            flex-basis: calc(50% - 0.9375rem);
        }   
    }
    @media (min-width: 48rem) {
        .item {
        	flex-basis: calc(33.333333% - 1.168rem);
        }   
    }
    @media (min-width: 68.4375rem) {
        .item {
        	flex-basis: calc(25% - 1.3125rem);
        }   
    }
    a.annule .item {
        color: var(--gris);
    }
    .item-img {
    	border-radius: var(--radius);
    	overflow: hidden;
    	position: relative;
    	margin-bottom: 0.5rem;
    }
    @media (min-width: 93.75rem) {
        .item-img {
        	width: 20rem;
        	height: 11.25rem;
        }
    }
    .item-img img {
    	transition: transform .3s ease 0.15s;
    	height: auto;
    	width: 100%;
    }
    .item:hover .item-img img,
    .item:focus .item-img img {
        transition: transform .2s ease 0.1s;
    	transform: scale(1.05);
    }
    
    .item-titre {
        margin-bottom: 3rem;
    }
    .item-titre h3 {
        color: var(--turquoise);
        font-family: 'proxima nova condensed', sans-serif;
       	font-size: clamp(1.25rem, 1.031vw + 0.973rem, 1.875rem);
       	font-weight: 400;
       	margin-bottom: 0.5rem;
       	text-wrap-style: unset;
    }
    @media (min-width: 26.9375rem) { /* 431px */
        .item-titre h3 {
            text-wrap-style: balance;
        }   
    }
    a.annule .item-titre h3 {
        color: var(--gris);
    }
    
    .item-soustitre {
        font-size: clamp(0.938rem, 0.103vw + 0.91rem, 1rem);
        margin-top: clamp(-0.187rem, -0.309vw + 0.083rem, 0rem);
    	line-height: 1.1;
    	text-wrap: balance;
    }
   
    a.annule .item-soustitre {
        color: var(--gris);
    }
    
    .item-lieu {
        color: var(--noir);
    	font-size: clamp(var(--14px), 2vw, var(--16px));
    	font-weight: 700;
    	line-height: 1.1;
    	margin-bottom: 0.3125rem;
    	text-wrap: balance;
    }
    a.annule .item-lieu {
        color: var(--gris);
    }
    .item-info {
	    font-size: clamp(0.875rem, 0.103vw + 0.847rem, 0.938rem);
        line-height: 1.2em;
        overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 1;
    	-webkit-box-orient: vertical;
    }
    .items:not(.affichage-liste) .item-info {
        border-top: 1px solid var(--gris);
        padding-top: 0.7rem;
        position: absolute;
    	bottom: 0;
    	width: 100%;
    	margin-bottom: 0;
    }
    @media (max-width: 34.3125rem) {
        .item-info-heuredebut,
        .item-info-heurefin {
            display: none;
        }
    }
    .item .item-date {
    	font-weight: 600;
    }
   
   
   
/*  ==========================================================================
    Liste d'items
    ========================================================================== */

    .items.affichage-liste {
    	display: block;
    }
   
    .items.affichage-liste .item {
        display: grid;
    	gap: 0 10px;
        grid-template-areas: "liste-bouton liste-titre liste-lieu"
    	                     "liste-bouton liste-titre liste-info";
        grid-template-columns: min-content 1.2fr 0.8fr;
        align-items: center;
   
        border-bottom: 1px solid var(--gris);
        max-width: none;
        padding: .75em 0;
        transition: background-color .5s;
    }
    .items.affichage-liste .item:hover,
    .items.affichage-liste .item:focus{
        background-color: rgba(252,234,226,.3);
    }
    @media (min-width: 26.9375rem) { /* 431px */
        .items.affichage-liste .item {
            grid-template-areas: "liste-bouton liste-img liste-titre liste-lieu"
                                 "liste-bouton liste-img liste-titre liste-info";
            grid-template-columns: min-content min-content 1.2fr 1fr;
            gap: 0 15px;
        }
    }
    @media (min-width: 64rem) { /* 1024px */
        .items.affichage-liste .item {
            grid-template-areas: "liste-bouton liste-img liste-titre liste-lieu liste-info";
            grid-template-columns: min-content min-content 1.2fr 1fr 1fr;
            gap: 0 15px;
        }
    }
    
    .items.affichage-liste .item-img {
        display: none;
        margin-bottom: 0;
        width: 2.8125rem;
        height: 2.8125rem;
        grid-area: liste-img;
    }
    .items.affichage-liste .item-img img {
    	height: 100%;
    	object-fit: cover;
    }
    @media (min-width: 26.9375rem) { /* 431px */
        .items.affichage-liste .item-img {
            display: block;
        }
    }
    @media (min-width: 48rem) {
        .items.affichage-liste .item-img {
            width: 6.5rem;
            height: 3.625rem;
        }
        .items.affichage-liste .item-img img {
        	object-fit: inherit;
        }
        .items.affichage-liste .item:hover .item-img img, 
        .items.affichage-liste .item:focus .item-img img {
            transform: scale(1.25);
        }
    }
    .items.affichage-liste .my-activities-shortcut {
        
        padding: 0.4rem 0;
        grid-area: liste-bouton;
        position: relative;
    }
    @media (min-width: 48rem) {
        .items.affichage-liste .my-activities-shortcut {
            padding: 0.6rem 0.4rem 0.6rem 0.8rem;    
            
        }
    }
    .items.affichage-liste .my-activities-shortcut-button {
        background-color: var(--gris-tres-clair);
    }
    .items.affichage-liste .item-titre {
        grid-area: liste-titre;
        margin-bottom: 0;
    }
    .items.affichage-liste .item-titre h3 {
        font-size: clamp(1.063rem, 0.99vw + 0.797rem, 1.663rem);
        margin-bottom: 0;
    }
    .items.affichage-liste .item-titre .item-soustitre {
        font-size: clamp(0.875rem, 0.206vw + 0.82rem, 1rem);
        margin-top: 0.06rem;
        margin-bottom: 0;
    }
    .items.affichage-liste .item-lieu {
        grid-area: liste-lieu;
        margin-bottom: 0;
	    font-weight: 500;
	    color: black;
    }
    @media (max-width: 26.875rem) {
        .items.affichage-liste .item-lieu {
            overflow: hidden;
        	text-overflow: ellipsis;
        	display: -webkit-box;
        	-webkit-line-clamp: 3;
        	-webkit-box-orient: vertical;
        	place-self: end  end;
        	text-align: right;
        	min-width: 65px;
        }
    }
    .items.affichage-liste .item-info {
        grid-area: liste-info;
        border-top: none;
        color: black;
        position: relative;
        margin-bottom: 0;
  
    }
    @media (max-width: 26.875rem) {
        .items.affichage-liste .item-info {
            place-self: flex-start end;
            text-align: right;
            -webkit-line-clamp: 2;
            min-width: 65px;

        }
    }
    .items .items-entete {
    	display: none;
    	color: var(--noir);
    	font-weight: 700;
    	font-size: clamp(1rem, 2vw, 1.125rem);
	    padding-bottom: 0.75em;
    }
    .items.affichage-liste .items-entete {
    	border-bottom: 1px solid var(--gris);
    	animation: opacityInEntete 1s;
    	
    }
    
    @keyframes opacityInEntete {
      0% { opacity: 0 }
      65% { opacity: 0 }
      100% { opacity: 1 }
    }

    @media (min-width: 64rem) {
        .items.affichage-liste .items-entete {
            display: grid;
        	gap: 0 15px;
        	grid-template-areas: "entete-bouton entete-img entete-activite entete-lieu entete-date";
            grid-template-columns: 49.19px 104px 1.2fr 1fr 1fr;
        }
    }
    .items .items-entete .items-entete-bouton {
    	grid-area: entete-bouton;
    }
    .items .items-entete .items-entete-img {
    	grid-area: entete-img;
    }
    .items .items-entete .items-entete-activite {
    	grid-area: entete-activite;
    }
    .items .items-entete .items-entete-lieu {
    	grid-area: entete-lieu;
    }
    .items .items-entete .items-entete-date {
    	grid-area: entete-date;
    }

/*  ==========================================================================
    Activité annulée
    ========================================================================== */


    /* Annulation dans une liste de dates multiples */
    .is-annule {
        text-decoration: line-through;
    }
    .is-annule > * {
        opacity: .5;
        filter: saturate(0);
    }
    .is-annule .btn-ajout-favoris {
        visibility: hidden;
    }
    .is-annule .col-btn {
        filter: saturate(1);
        opacity: 1;
    }
    .is-annule .col-btn::after {
         content: "*** Annulé ***";
        border-radius: 1.875rem;
        background-color: var(--orange);
        color: white;
        position: absolute;
        font-size: 1.34375rem;
    	font-weight: 800;
    	top: 50%;
    	left: 0;
    	padding: 0.06rem 1.25rem 0;
    	transform: translateY(-50%);
    	z-index: 50;
    	white-space: nowrap;
    }
    @media (max-width: 1199px) {
        .liste-representations .is-annule .col-btn::after {
            content: "Annulé";
            left: auto;
            right: 0;
            font-size: 1rem;
        }
    }
    
    .label-annule {
        border-radius: 1.875rem;
        background-color: var(--orange);
        color: white;
        position: absolute;
        font-size: 1.78125rem;
    	font-weight: 800;
    	top: 50%;
    	left: 5%;
    	padding: var(--3px) 1.25rem var(--5px);
    	transform: translateY(-50%) rotate(-15deg);
    	z-index: 11;
    	white-space: nowrap;
    }
    .label-annule::before { content:"*** "; }
    .label-annule::after { content:" ***"; }
    a.annule img {
        filter: saturate(0);
    }
    .item-annule {
        border-radius: 1.875rem;
        background-color: var(--orange);
        color: white;
        position: absolute;
        font-size: 1.5em;
    	font-weight: 800;
    	top: 50%;
    	left: 50%;
    	padding: var(--3px) 1.25rem var(--5px);
    	transform: translate(-50%, -50%) rotate(-15deg);
    	z-index: 11;
    	white-space: nowrap;
    }
    .item-annule::before { content:"*** "; }
    .item-annule::after { content:" ***"; }
    
    .flex-cell.annule .item-annule {
        font-size: 1.15em;
    }
    .items.affichage-liste .item-annule {
        font-size: .9em;
    }
    .items.affichage-liste .item.annule {
        text-decoration: line-through;
    }
    .carousel-cell.annule::after,
    .item.annule::after{
        position: absolute;
    	content: "";
    	width: 100%;
    	height: 100%;
    	top: 0; left: 0; right: 0; bottom: 0;
    	background-color: rgba(255,255,255,.5);
    	z-index: 10;
    }
    #slider-a-venir .carousel-cell.annule::after {
        background-color: rgb(249 250 251 / 50%);
    }
    .flex-cell.annule .flex-titre {
        opacity: .5;
        filter: saturate(0);
    }
    
    /* Page d'activité annulée */
    .page-activite-annule .image-vedette img {
        opacity: .75;
        filter: saturate(0);
    }
    
    .page-activite-annule .entete-intro h1 {
        opacity: .5;
    }


/*  ==========================================================================
    Slider - Flickity
    ========================================================================== */   

    .carousel {
        margin: 0 -1rem 0.9375rem 0;
        visibility: hidden;
        line-height: 1.2;
    }
    .carousel.wrap-around {
        margin: 0 -1rem 3.125rem -1rem;
    }
    @media (min-width: 26.9375rem) {
        .carousel {
            margin: 0 -1rem 3.125rem 0;
            visibility: hidden;
        }
        .carousel.wrap-around {
            margin: 0 -1em 3.125rem -1em;
        }
    }
    @media (min-width: 31.25rem) {
        .carousel {
            margin: 0 -2em 3.125rem 0;
        }
        .carousel.wrap-around {
            margin: 0 -2em 3.125rem -2em;
        }
    }
    @media (min-width: 48rem) {
        .carousel {
            margin: 0 -2em 2.1875rem 0;
        }
        .carousel.wrap-around {
            margin: 0 -2em 2.1875rem -2em;
        }
    }
    @media (min-width: 64rem) {
        .carousel,
        .carousel.wrap-around {
            margin: 0 0 2.1875rem 0;
        }
    }
    .carousel-cell {
    	text-decoration: none; 
    	color: black;
    	margin-right: 1.70rem;
    	min-height: 100%;
        max-width: 75vw;
        width: 20rem;
    }
    
   
    
    
    
    @media (max-width: 26.875rem) {
        .carousel-cell .carousel-titre {
        	opacity: 0;
        	transition: opacity 0.75s;
        }
        .carousel-cell.is-selected .carousel-titre {
        	opacity: 1;
        }
        .flickity-page-dots {
            display: none;
        }
    }
    
    
    @media (min-width: 31.25rem) {
        .carousel-cell {
            max-width: 20rem;
        }   
    }
    
    
    
    .carousel-img {
    	overflow: hidden;
    	position: relative;
    	border-radius: var(--radius);
    	margin-bottom: 0.9375rem;
    }
    .carousel-img img {
    	transition: transform .3s ease;
    	width: 100%;
    	height: auto;
    	max-height: 11.25rem;
    	object-fit: cover;
    }
    .carousel-cell:hover .carousel-img img {
    	transform: scale(1.05);
    }

    .carousel-titre {
        margin-bottom: 3rem;
    }

    .carousel-titre h3,
    .flex-titre h3 {
        color: var(--turquoise);
        font-family: 'proxima nova condensed', sans-serif;
        font-size: clamp(1.563rem, 0.515vw + 1.424rem, 1.875rem);
        font-weight: 400;
    }
    
    a.annule .carousel-titre h3 {
        color: var(--gris);
    }
    
    .carousel-soustitre {
        font-size: clamp(1rem, 0.206vw + 0.945rem, 1.125rem);
    	margin-top: -0.5rem;
    	margin-bottom: 0;
    }
    .carousel-lieu,
    .flex-lieu {
        color: var(--noir);
    	font-size: clamp(1rem, 0.206vw + 0.945rem, 1.125rem);
    	font-weight: 700;
    	margin-bottom: 0.06rem;
    }
    .carousel-info {
        font-size: clamp(0.875rem, 0.103vw + 0.847rem, 0.938rem);
        border-top: 1px solid var(--gris);
        padding-top: 0.7rem;
        position: absolute;
    	bottom: 0;
    	width: 100%;
    }
    
    
 
/*  ==========================================================================
    Affichage des exposition en accueil
    ========================================================================== */ 
    @media (min-width: 68.75rem) {
        #slider-expositions {
            display: none;   
        }    
    }
    #flex-expositions {
        display: none;
    }
    @media (min-width: 68.75rem) {
        #flex-expositions {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1em;
            margin-left: -.5em;
            gap: 1em 2em;
        }
    }
    .flex-cell {
        text-decoration: none; 
    	color: black;
        flex-basis: calc(50% - 1em);
        position: relative;
        display: grid;
        grid-template-areas:"flex-img flex-lieu"
                            "flex-img flex-titre"
                            "flex-img flex-info";
        grid-template-columns: 11.5rem auto;
        gap: 0 1rem;
        padding: .5em;
        transition: background-color .3s;
        border-radius: var(--radius);
    }
    .flex-cell:hover {
        background-color: #FFFFFFCC;
    }
    .flex-img {
        grid-area: flex-img;
    	overflow: hidden;
    	position: relative;
    	border-radius: var(--radius);
    	width: 11.5rem;
    	height: 6.5rem;
    }
    .flex-img img {
    	transition: transform .3s ease;
    	width: 11.5rem;
    	height: 6.5rem;
    	object-fit: cover;
    }
    .flex-cell:hover .flex-img img {
    	transform: scale(1.05);
    }
    .flex-titre {
        grid-area: flex-titre;
        line-height: 1.5rem;
    }
    .flex-titre h3 {
        font-size: clamp(1.5rem, 0.309vw + 1.417rem, 1.688rem);
    }
    .flex-soustitre {
        font-size: clamp(1rem, 0.206vw + 0.945rem, 1.125rem);
    	margin-top: -0.5rem;
    	margin-bottom: 0.25rem;
    }
    
    .flex-info {
        font-size: clamp(0.875rem, 0.103vw + 0.847rem, 0.938rem);
    }
    
    
 
/*  =========================================================================
    Étiquettes
    ========================================================================= */
    
    .etiquette {
        border: 1px solid var(--noir);
        border-radius: 1.25rem;
        color: var(--noir);
        font-size: clamp(1rem, 0.284vw + 0.924rem, 1.172rem);
        font-weight: 500;
        padding: 0.25rem 0.9375rem;
    }
    
    
    
/*  =========================================================================
    Encadrés
    ========================================================================= */
    
    .encadre {
        border-radius: var(--radius);
    	background-color: var(--cyan-clair);
    	color: var(--noir);
    	padding: 0.9375rem 1.5625rem 0.06rem 1.5625rem;
    	margin-bottom: 1rem;
    }
    .encadre-meteo {
        padding: 0.9375rem 0.9375rem 0.9375rem var(--75px);
        position: relative;
    }
    @media (min-width: 48rem) {
        .encadre-meteo {
            padding: 1.5625rem 3.25rem 1.5625rem 6.25rem;
        }
    }
    .encadre-meteo::before {
        content: "";
        background-image: url(/media/4zumcgew/picto_parapluie.svg);
        background-size: 3.125rem;
        width: 3.125rem;
        height: 3.125rem;
        position: absolute;
        left: 0.9375rem;
        top: 50%;
        transform: translateY(-50%);
    }
    @media (max-width: 27rem) {
        .encadre-meteo::before {
            top: 0.9375rem;
            transform: none;
        }
    }
    @media (min-width: 48rem) {
         .encadre-meteo::before {
            left: 2.1875rem;
        }
    }
    .encadre-meteo p {
        font-size: 1rem;
        position: relative;
        margin-bottom: 0;
    }
    @media (min-width: 27rem) {
        .encadre-meteo p {
            font-size: 1.2rem;
        }
    }

    .encadre-message-annulation {
        padding: 0.9375rem 0.9375rem 0.9375rem var(--75px);
        position: relative;
    }
    @media (min-width: 48rem) {
        .encadre-message-annulation {
            padding: 1.5625rem 3.25rem 1.5625rem 6.25rem;
        }
    }
    .encadre-message-annulation::before {
        content: "";
        background-image: url(/media/qoxbel1x/picto-information.svg);
        background-size: 3.125rem;
        width: 3.125rem;
        height: 3.125rem;
        position: absolute;
        left: 0.9375rem;
        top: 50%;
        transform: translateY(-50%);
    }
    @media (min-width: 48rem) {
         .encadre-message-annulation::before {
            left: 2.1875rem;
        }
    }
    .encadre-message-annulation p {
        position: relative;
        margin-bottom: 0;
    }


    
/*  =========================================================================
    Section Accessibilité dans une page d'activité
    ========================================================================= */

    .activite-titre-accessibilite {
        font-size: clamp(1.25rem, 0.412vw + 1.139rem, 1.5rem);
    	font-weight: 500;
    	margin-top: 1em;
    	margin-bottom: 0.75rem;
    }

    
/*  =========================================================================
    Bouton Suggérer une activité
    ========================================================================= */

    .suggestion-activites {
        margin: 2em auto 0;
        padding: 1em var(--16px);
    	max-width: 87.5rem;
        background-color: var(--bleu);
        position: relative;
    }
    .page-accueil + .suggestion-activites {
        margin: 0 auto;
    }
    @media (min-width: 31.25rem) {
        .suggestion-activites {
        	padding: 1em 2rem;
        } 
    }
    @media (min-width: 87.5rem) {
        .suggestion-activites {
        	padding: 1em clamp(1.188rem, -19.008vw + 19.008rem, 2.376rem);
        } 
    }

    .suggestion-activites::before {
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    .suggestion-activites .btn {
        margin-left: -5px;
        position: relative;
	    padding-left: 2.5rem;
    }
    .suggestion-activites .btn::before {
        content: "";
        background-image: url(/media/u35nz1sq/picto-suggestion.svg);
    	position: absolute;
    	width: 1.0625rem;
    	height: 1.0625rem;
    	background-size: 1.0625rem 1.125rem;
    	top: 50%;
    	transform: translateY(-50%);
    	left: 1rem;
    }



/*  =========================================================================
    Bouton Ajouter à mes activités
    ========================================================================= */
    
    .btn-ajout-favoris {
        background-color: var(--turquoise);
        border: 1px solid var(--turquoise);
        border-radius: 1.25rem;
        color: white;
        cursor: pointer;
        font-size: clamp(1rem, 0.206vw + 0.945rem, 1.125rem);
        font-weight: bold;
	    line-height: 2rem;
	    min-width: 15.5rem;
        position: relative;
        padding: 0 0.9375rem 0 2.9375rem;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .btn-ajout-favoris:focus,
    .btn-ajout-favoris:hover {
        background-color: #1B3D59;
        border-color: #1B3D59;
    }
    .btn-ajout-favoris::before {
        content: "";
        background-image: url(/media/lxajllon/picto_plus.svg);
        background-size: 3.125rem;
        width: 3.125rem;
        height: 3.125rem;
        position: absolute;
        left: -0.3125rem;
        top: 50%;
        transform: translateY(-50%);
    }
    @media (max-width: 74.9375rem) {
        .btn-ajout-favoris {
            min-width: 7.5rem;
        }
        .section-representations .btn-ajout-favoris span {
            display: none;
        }
    }
    .page-activite-annule #addToMyActivities {
        display: none;
    }
    .btn-ajout-favoris.is-ajoute {
        background-color: var(--beige);
        border: 1px solid var(--beige);;
    	color: #606060;
    	font-weight: 500;
	    letter-spacing: .2px;
    }
    .btn-ajout-favoris.is-ajoute::before {
        background-image: url(/media/ghhfusif/picto-accepter.svg);
        left: -0.375rem;
    }
    
    .entete-intro .btn-ajout-favoris {
        margin-top: 1rem;
    }
    @media (min-width: 57.25rem) {
        .entete-intro .btn-ajout-favoris {
            margin-top: 2rem;
        }   
    }
  
  
  
/*  =========================================================================
    Mes activités
    ========================================================================= */
  
    .page-mes-activites .boutons {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .page-mes-activites .boutons .btn {
        border: 1px solid #388069;
        border-radius: 2rem;
        padding: .5rem 2rem;
        position: relative;
	    z-index: 1;
	    margin-bottom: 1rem;
    }
    
    .page-mes-activites .boutons-groupe {
        display: inline-block;
        position: relative;
        white-space: nowrap;
    }
    
    .page-mes-activites #btn-share-my-activities {
        margin-right: .5rem;
    }
    @media (max-width: 424px) {
        .page-mes-activites #btn-download-ics > span {
            display: none;
        }
    }
    .page-mes-activites #btn-help {
        background: white;
    	border: 1px solid var(--gris);
    	color: var(--gris);
    	padding-right: 1.25rem;
    	padding-left: 3.25rem;
        margin-left: -3rem;
    	position: relative;
    	z-index: 0;
    	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, margin-left .15s ease-in-out;
    }
    @media (min-width: 768px) {
        .page-mes-activites #btn-help:hover {
            background: var(--gris-tres-clair);
        	margin-left: -2.5rem;
        }
    }

    @media (min-width: 768px) {
        .page-mes-activites .boutons {
            text-align: right;
        }
    }
  
    .page-mes-activites .item {
        margin-bottom: 2rem;
    }

    .remove-from-my-activities {
        width: auto;
        height: auto;
	    position: absolute;
	    top: 0;
	    right: 0;
	    background-color: transparent;
	    border: none;
	    padding: 1rem;
	    z-index: 15;
    }
    .remove-from-my-activities-label {
    	display: inline-flex;
        background-color: rgb(220 59 0 / 100%);
        color: white;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1;
        padding: 0.75rem 0.75rem 0.75rem 1.75rem;
        position: relative;
        white-space: nowrap;
        max-width: 2rem;
        overflow: hidden;
        transition: opacity 0.5s ease, max-width 0.5s ease, background-color 0.5s ease;
        background-image: url(/media/4qznvyua/picto-fermer-blanc.svg);
        background-repeat: no-repeat;
        background-size: 2rem 2rem;
        background-position: 0.25rem center;
    	opacity: 1;
    }
    .remove-from-my-activities-label > span {
        opacity: 0;
        margin-left: 0.5rem;
        transition: opacity 0.5s ease;
    }
    @media (hover: hover) {
        .remove-from-my-activities-label {
        	opacity: 0;
        }
        .page-mes-activites .items .item:hover .remove-from-my-activities-label, 
        .page-mes-activites .items .item:focus .remove-from-my-activities-label {
            opacity: 1;
        }
        .remove-from-my-activities:hover .remove-from-my-activities-label,
        .remove-from-my-activities:focus .remove-from-my-activities-label {
            background-color: rgb(220 59 0 / 85%);
            max-width: 18rem;
            opacity: 1;
        }
        .remove-from-my-activities:hover .remove-from-my-activities-label > span,
        .remove-from-my-activities:focus .remove-from-my-activities-label > span {
            opacity: 1;
        }
        .remove-from-my-activities:focus-visible {
            outline: 2px solid #000;
            outline-offset: 4px;
        }
    }
    
    #help-tooltip-container {
    	position: absolute;
    	max-width: 260px;
    	background: #fff;
    	border: 1px solid #ccc;
    	border-radius: 6px;
    	padding: 0.75rem 1rem;
    	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    	font-size: 0.9rem;
    	line-height: 1.4;
    	margin-top: 0.5rem;
    	z-index: 50;
    	top: 2.5rem;
    	right: 0;
    	text-align: left;
    	white-space: normal;
    }
    [hidden] {
    	display: none !important;
    }
            
    
    #toast-container {
    	position: fixed;
    	bottom: 1.5rem;
    	right: 1.5rem;
    	margin-left: 1.5rem;
    	z-index: 9999;
    	display: flex;
    	flex-direction: column;
    	gap: 0.75rem;
    }
   
    
    .toast {
    	background: #2f2f2f;
    	color: #fff;
    	padding: 1rem 1.25rem;
    	border-radius: 6px;
    	font-size: 1rem;
    	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    	opacity: 0;
    	transform: translateY(10px);
    	transition: opacity 0.25s ease, transform 0.25s ease;
    }
    
    .toast.show {
    	opacity: 1;
    	transform: translateY(0);
    }


/*  ==========================================================================
    Page de carte des lieux
    ========================================================================== */   

    /* Mise en page */
    .page-carte-lieux {
        margin-top: 0;
        margin-bottom: 0;
        min-height: auto;
    }
    .page-carte-lieux .filtres-form {
        display: block;
    }

    /* Contenu */
    .page-carte-lieux .filtre-titre,
    .page-carte-lieux .filtre-arrondissement {
        display: inline-block;
    }
    .page-carte-lieux .filtre-arrondissement select {
        max-width: none;
    }
    .page-carte-lieux + .map-container + #map {
        height: calc(100vh - 10rem);
        min-height: clamp(25rem, 36.496vw + 15.192rem, 56.25rem);
        border-radius: 0;
    }
    
    .page-carte-lieux + .map-container + #map .gm-style-iw-chr button {
        position: absolute !important;
    	right: 0px;
    	top: 5px;
    	z-index: 5;
    }
    .page-carte-lieux + .map-container + #map .lieu-nom {
        padding-right: 2rem;
    }
    .page-carte-lieux + .map-container + #map .lieu-arrondissement {
        font-size: 1rem;
    }
    
    
    
/*  ==========================================================================
    Page de liste des lieux
    ========================================================================== */   

    .page-liste-lieux .filtres {
        display: block;
        margin-bottom: 3rem;
    }
   
    .page-liste-lieux .filtre-titre,
    .page-liste-lieux .filtre-arrondissement {
        display: inline-block;
    }
    
    .page-liste-lieux .filtre-arrondissement select {
        max-width: none;
    }
    .page-liste-lieux .items ul {
        list-style: none;
        padding-left: 0;
        width: 100%;
    }
    
    /* Entête */
    .page-liste-lieux .items-entete {
        border-bottom: 1px solid var(--gris);
        display: none;
    }
    @media (min-width: 32rem) {
        .page-liste-lieux .items-entete {
            display: block;
        }   
    }
    
    .page-liste-lieux .items-entete .items-entete-nom {
        display: inline-block;
        width: 55%;
    }
    .page-liste-lieux .items-entete .items-entete-arr {
        display: inline-block;
        width: 45%;
    }
    @media (min-width: 64rem) {
        .page-liste-lieux .items-entete .items-entete-nom {
            width: 75%;
        }
        .page-liste-lieux .items-entete .items-entete-arr {
            width: 25%;
        }
    }
    
    /* Navigation par alphabet */
    .nav-alphabet {
    	line-height: 1;
    	text-align: center;
    }
    @media (min-width: 48rem) {
        .nav-alphabet {
        	font-size: 1.15em;
        }
    }
    
    .nav-alphabet ul {
    	list-style: none;
    	padding: 0;
    }
    .nav-alphabet li {
    	display: inline-block;
    }
    .nav-alphabet .lien-alpha {
    	display: inline-block;
    	padding: var(--8px) var(--12px);
    	margin-bottom: 0;
    }
    @media (min-width: 48rem) {
        .nav-alphabet .lien-alpha {
        	padding: var(--8px);
        }
    }
    .nav-alphabet .lettre-actuelle {
    	font-weight: 800;
    	color: black;
    	text-decoration: none;
    }
    .nav-alphabet li:not(:last-child)::after {
    	content: "|";
    	padding-left: var(--5px);
    	color: var(--gris);
    }

    
    /* Items */
    .page-liste-lieux .item {
        border-bottom: 1px solid var(--gris);
        display: block;
        max-width: none;
        padding: 0.891rem var(--2px);
        transition: 0.5s background-color;
    }
    
    .page-liste-lieux .item:hover,
    .page-liste-lieux .item:focus{
        background-color: rgba(252,234,226,.3);
    }
    
    
    
    .page-liste-lieux .item-col {
        display: block;
    }
    .page-liste-lieux .item-nom {
        color: var(--noir);
        font-size: clamp(1rem, 0.67vw + 0.82rem, 1.406rem);
        font-weight: 700;
		width: 100%;
    }
    .page-liste-lieux .item-arr {
        font-size: clamp(0.875rem, 0.515vw + 0.736rem, 1.188rem);
        width: 100%;
    }
    @media (min-width: 32rem) {
        .page-liste-lieux .item-col {
            display: inline-block;
        }
        .page-liste-lieux .item-nom {
        	width: 55%;
    	    padding-right: .5rem;
        }
        .page-liste-lieux .item-arr {
            width: 45%;
        }   
    }
    
    @media (min-width: 64rem) {
        .page-liste-lieux .item-nom {
            width: 75%;
        }
        .page-liste-lieux .item-arr {
            width: 25%;
        }   
    }
    
    .page-liste-lieux .items.arr-hidden .item-col.item-arr,
    .page-liste-lieux .items.arr-hidden .items-entete-arr {
        visibility: hidden;
    }
    
    

/*  ==========================================================================
    Page de liste des activités
    ========================================================================== */   
    
    .page-liste-activites {
        margin-top: 0;
    }
    .page-liste-activites#contenu {
        margin-bottom: 5rem;
    }
   
    
/*  ==========================================================================
    Page landing
    ========================================================================== */   
    
    main.page-landing {
        margin-top: 2em;
    }
    
    div.page-landing.header-banner.is-image {
        height: 14rem;
    }
    @media (min-width: 86rem) {
    	div.page-landing.header-banner {
    		height: 14rem;
    	}
    }
    @media (min-width: 768px) {
        main.page-landing .entete-intro {
            padding-top: 1rem;
        }
    }
    main.page-landing h1 {
    	font-size: clamp(2.11rem, 1.932vw + 1.591rem, 3.281rem);
    	position: relative;
    }
    @media (min-width: 90rem) {
    	main.page-landing h1: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: var(--11px);
    	}
    }
    
/*  ==========================================================================
    Page des résultats de recherche
    ========================================================================== */  
    
    .page-recherche #resultats {
        margin: 2rem 0;
        font-size: clamp(0.875rem, 0.206vw + 0.82rem, 1rem);
    }
    .page-recherche .items.affichage-liste .item {
        grid-template-areas:
		"liste-img liste-titre liste-lieu"
		"liste-img liste-titre liste-info";
		grid-template-columns: min-content auto auto;
    }
    @media (min-width: 26.9375rem) {
    	.page-recherche .items.affichage-liste .item {
    		grid-template-areas:
    		"liste-img liste-titre liste-lieu"
		    "liste-img liste-titre liste-info";
    		grid-template-columns: min-content 1.2fr 1fr;
    		
    	}
    }
    @media (min-width: 64rem) {
    	.page-recherche .items.affichage-liste .item {
            grid-template-areas: "liste-img liste-titre liste-lieu liste-info";
		    grid-template-columns: min-content 1.2fr 1fr 1fr;
    	}
    	.page-recherche .items.affichage-liste .items-entete {
		     grid-template-areas: "entete-img entete-activite entete-lieu entete-date";
		    grid-template-columns: 104px 1.2fr 1fr 1fr;
    	}
    }
    /* Entête */
    .page-recherche .items.affichage-liste .items-entete {
        animation: none;
    }
    .page-recherche .section-lieux .items-entete {
        border-bottom: 1px solid var(--gris);
        display: block;
    }
 
   
    
    /* Items */
    .page-recherche .section-lieux  .item {
        border-bottom: 1px solid var(--gris);
        display: block;
        max-width: none;
        padding: 0.75em var(--2px);
        transition: 0.5s background-color;
    }
    
    .page-recherche .section-lieux  .item:hover,
    .page-recherche .section-lieux  .item:focus{
        background-color: rgba(252,234,226,.3);
    }
    .page-recherche .section-lieux  .item-col {
        display: inline-block;
    }
 
    .page-recherche .section-lieux .items-entete .items-entete-nom {
        display: inline-block;
        width: 58%;
    }
    .page-recherche .section-lieux .items-entete  .items-entete-arr {
        display: inline-block;
        width: 42%;
    }
    
  
    @media (min-width: 48rem) {
        .page-recherche .section-lieux .items-entete .items-entete-nom {
            width: 72%;
        }
        .page-recherche .section-lieux .items-entete .items-entete-arr {
            width: 28%;
        }
    }
    
    
    
    .page-recherche .section-lieux  .item-nom {
        color: var(--noir);
        font-size: clamp(1rem, 0.67vw + 0.82rem, 1.406rem);
        font-weight: 700;
		width: 58%;
		padding-right: .5rem;
    }
    .page-recherche .section-lieux  .item-arr {
        font-size: clamp(0.875rem, 0.515vw + 0.736rem, 1.188rem);
        width: 42%;
    }
    
     @media (min-width: 48rem) {
        .page-recherche .section-lieux .item-nom {
            width: 72%;
        }
        .page-recherche .section-lieux .item-arr {
            width: 28%;
        }   
    }
    
    
    .page-recherche .section-lieux  .items.arr-hidden .item-col.item-arr,
    .page-recherche .section-lieux  .items.arr-hidden .items-entete-arr {
        visibility: hidden;
    }
    
    
    
    
/*  ==========================================================================
    Infobox - Carte
    ========================================================================== */  
    .map-container {
	    position: relative;
	    max-width: 73.653em;
	    margin: 0 auto;
	    padding: 0 1em;
    }
    @media (min-width: 31.25rem) {
        .map-container {
    	    padding: 0 2em;
        }
        	
    }
    .custom-infobox {
        background-color: white;
    	border-radius: var(--radius);
    	padding: 0;
    	width: calc(100% - 1.25rem);
    	max-width: 26rem;
    	position: absolute;
    	display: none;
    	top: 3.9375rem;
    	left: 0.625rem;
    	z-index: 1;
    }
    @media (min-width: 27.25rem) {
        .custom-infobox {
            width: 26rem;
        }   
    }
    @media (min-width: 87.5rem) {
        .custom-infobox {
            left: 1em;
        }
    }
    @media (min-width: 112.5rem) {
        .custom-infobox {
        	top: 0.625rem;
        }
    }
    .custom-infobox .btn-fermer {
        background-color: transparent;
    	position: absolute;
    	right: 0;
    	top: 0;
    	padding: 1em;
    	width: 60px;
    }
    .custom-infobox .contenu {
    	padding: 1.5rem 3rem 1.5rem 5.25rem;
    }
    
    
        
/*  ==========================================================================
    Tiroir des filtres (mobile)
    ========================================================================== */  
    
    /* Conteneur global */
    .filtres {
        position: relative;
     
    }
    
    /* Bouton du tiroir */
    .tiroir-toggle {
        background-color: var(--turquoise);
        color: white;
        border: none;
        cursor: pointer;
    	margin: 0;
    	text-align: left;
        transition: filter 0.3s ease;
        width: 100%;
        position: relative;
    }
    
    .tiroir-toggle::before {
    	top: 0;
    	width: 100vw;
    	transform: translateX(-50%);
    	left: 50%;
    	content: '';
    	height: 100%;
    	background-color: inherit;
    	position: absolute;
    	z-index: -1;
    }
    .tiroir-toggle span {
        position: relative;
        display: block;
        padding: 1.5rem 0 1.5rem 3rem;
    }
    .tiroir-toggle span::before {
        content: "";
        display: inline-block;
        background-color: var(--noir);
        background-image: url(/media/vydjrosv/picto-recherche.svg);
        background-size: 2.5rem 2.5rem;
        border-radius: 2rem;
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        top: 50%;
        left: -2px;
        transform: translateY(-50%);
    }
    .tiroir-toggle span::after {
        background-image: url(/media/xkufaeqb/picto-fleche-tiroir.svg);
        background-size: 1.25rem 1.25rem;
        content: "";
        display: inline-block;
        position: absolute;
        width: 1.25rem;
        height: 1.25rem;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transform-origin: top center;
	    transition: transform 0.3s;
    }
    .tiroir-toggle[aria-expanded="false"] span::after {
        transform: rotate(-90deg) translateY(-50%);
	    
    }
    
    .tiroir-toggle:hover {
        filter: brightness(1.1);
    }
    
    /* Tiroir */
    .tiroir {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        padding: 0;
    }
    
    .tiroir.open {
        max-height: 1000px; /* Ajustez selon le contenu */
    }


@media (min-width: 768px) {
    .tiroir-toggle {
        display: none; /* Cache le bouton */
    }

    .tiroir {
        max-height: none; /* Supprime la limite */
    }
}



/*  ==========================================================================
    Tiroir des filtres (mobile)
    ========================================================================== */ 
    
    .my-activities-shortcut {
        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent;
        border: none;
        padding: 0.7rem 0.6rem 0.9rem 0.9rem;
    }
    .item.annule .my-activities-shortcut {
        visibility: hidden;
    }
    .my-activities-shortcut-button {
        background-color: white;
        background-image: url(/media/oujc5cmm/picto-plus-transparent.svg);
        border-radius: 1rem;
        display: block;
        width: 1.875rem;
        height: 1.875rem;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }
    .my-activities-shortcut.is-ajoute .my-activities-shortcut-button {
        background-color: rgb(56 127 105 / 100%);
        background-image: url(/media/skbnxaty/picto-accepter-transparent.svg);
        color: white;
        transform: scale(1.15);
    }
    .my-activities-shortcut:focus .my-activities-shortcut-button,
    .my-activities-shortcut:hover .my-activities-shortcut-button {
        transform: scale(1.5);
    }
    .my-activities-shortcut.is-ajoute:focus .my-activities-shortcut-button,
    .my-activities-shortcut.is-ajoute:hover .my-activities-shortcut-button {
        background-color: rgb(56 127 105 / 95%);
        color: white;
    }
    .items.affichage-liste .my-activities-shortcut.is-ajoute .my-activities-shortcut-button {
        transform: scale(1);
    }
    
    
    .page-mes-activites .items:not(.affichage-liste) .item,
    .page-liste-activites .items:not(.affichage-liste) .item {
        transition: outline 0.2s ease 0.15s, background-color 0.3s ease 0.15s;
        outline: 0 solid rgba(242, 234, 226, 0);
        border-top-left-radius: 5px;
    	border-top-right-radius: 5px;
    	border-bottom-left-radius: 1px;
    	border-bottom-right-radius: 1px;
    	outline-offset: 0;
    }
    .page-mes-activites .items:not(.affichage-liste) .item:not(.annule):hover,
    .page-mes-activites .items:not(.affichage-liste) .item:not(.annule):focus,
    .page-liste-activites .items:not(.affichage-liste) .item:not(.annule):hover,
    .page-liste-activites .items:not(.affichage-liste) .item:not(.annule):focus {
        transition: outline 0.1s ease 0.1s, background-color 0.3s ease;
    	background-color: rgba(242, 234, 226, .4);
    	outline: .75rem solid rgba(242, 234, 226, .4);
    }