/*  ==========================================================================
    Imports
    ========================================================================== */
   
    /* Proxima Nova */
    @import url(https://use.typekit.net/kmv0zmb.css);
    
    /* Roboto */
    @import url(https://use.typekit.net/wwl1kdn.css);

    /* fadeInAnimation, .sr-only, .fond */
    @import url(helpers.css);
    
    /* override de styles par défaut de bootstrap  */
    @import url(bootstrap-config.css);


/*  ==========================================================================
    Variables
    ========================================================================== */
   
    :root { 
        /* Couleurs */
        --couleur-rouge: #D93A17;
        --couleur-bleu-clair: #87B2B9;
        --couleur-ocean: #10586E;
        --couleur-bleu-sombre: #00285E;
        --couleur-noir: #072145;
        --couleur-gris-bleu: #EDF4F5;
        --couleur-gris: #f0f0f0;
        --couleur-bleu-lien : #10586E;
        --couleur-bleu-lien-hover : #00285E;
        
        --width: 1024px;
        --main-bottom-margin: 8rem;
        --menu-breakpoint: 1100px;
        
        /* Bootstrap */
        --bs-body-font-size: 1.15rem;
        --bs-body-font-weight: 400;
        --bs-breadcrumb-margin-bottom: 2rem;
        --bs-font-sans-serif: 'proxima nova', system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        --bs-link-color: var(--couleur-bleu-lien);
        --bs-link-hover-color: var(--couleur-bleu-lien-hover);
        --bs-primary-rgb: 217, 58, 23;
        --bs-breadcrumb-divider: '>';
    }
    @media (min-width: 768px) {
        :root {
            --bs-body-font-size: 1.25rem;
        }
    } 


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

    body {
        overflow-x: hidden;
       	text-wrap: pretty;
     	animation: fadeInAnimation .75s;
    }
    
    main {
        margin-bottom: var(--main-bottom-margin);
        word-break: break-word;
    }
    
    /* largeur maximale du site */
    .container {
        /*max-width: 1080px;*/
        max-width: 54em;
    }
    .container.container-large {
        max-width: 1100px;
    }


/*  Titres
    ========================================================================== */
   
    h1 {
    	color: var(--couleur-rouge);
    	font-family: "roboto-condensed", sans-serif;
    	font-size: 3rem;
    	font-weight: 400;
    	letter-spacing: -1px;
    	margin: 0.2em 0 12px;
    	text-transform: uppercase;
    	text-wrap: balance;
    }
    @media (min-width: 768px) {
        h1 {
        	font-size: 4rem;
        	margin-left: -3px;
        }
    }
    
    h2 {
        color: var(--couleur-bleu-sombre);
        font-family: "roboto-condensed", sans-serif;
        font-size: 2.25rem;
        line-height: 2.35rem;
        font-weight: 400;
        margin: 1em 0 25px;
        text-wrap: balance;
    }
    @media (min-width: 768px) {
        h2 {
        	font-size: 2.75rem;
        	margin-top: 1.5em;
        	margin-left: -2px;
        	line-height: 3.3rem;
        }
    }
  
    h3 {
        color: var(--couleur-ocean);
        font-family: "roboto-condensed", sans-serif;
        font-size: 1.8rem;
        font-weight: bold;
    	margin: 1.25em 0 25px 0;
    	text-wrap: balance;
    }
    @media (min-width: 768px) {
        h3 {
            
        	font-size: 2rem;
        	margin-top: 1.75em;
        }
    }
    
    h4 {
        color: var(--couleur-ocean);
        font-size: 1.6rem;
        font-weight: 600;
    	margin: 1em 0 15px 0;
    	text-wrap: balance;
    }
    @media (min-width: 1024px) {
        h4 {
        	margin: 1.65em 0 15px 0;
        }
    }
    h5 {
        font-weight: bold;
        font-size: 1.3rem;
        margin: 1.5em 0 15px 0;
        text-wrap: balance;
    }
    
    /* Ajustement des marges pour deux titres qui se suivent */
    h2 + h3 {
    	margin-top: 0.75em;
    }
    h3 + h4 {
    	margin-top: 1em;
    }
    h4 + h5 {
    	margin-top: 0;
    }


/*  Titres oranges
    ========================================================================== */

    h1.orange,
    h2.orange,
    h3.orange,
    h4.orange,
    h5.orange {
        color: var(--couleur-rouge);
    }


/*  Titres avec accolades
    ========================================================================== */
    
    .accolades {
        position: relative;
        margin-left: 20.5px;
    }
    @media (min-width: 768px) {
        .accolades {
            margin-left: 32px;
        }   
    }
    .accolades::before {
        content: "{";
        color: var(--couleur-rouge);
        font-size: 1.3em;
        font-weight: 500;
        font-family: 'proxima-nova';
        padding-right: 8px;
        margin-left: -20.5px
    }
    @media (min-width: 768px) {
        .accolades::before {
            margin-left: -32px
        }
    }
    .accolades::after {
        content: "}";
        color: var(--couleur-rouge);
        font-size: 1.3em;
        font-weight: 500;
        font-family: 'proxima-nova';
        padding-left: 8px;
    }
  
   


/*  Surtitre
    ========================================================================== */
    
    .surtitre {
        color: var(--couleur-rouge);
        font-family: "roboto-condensed", sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        margin-bottom: 0;
    }
    .surtitre + h1,
    .surtitre + h2,
    .surtitre + h3,
    .surtitre + h4,
    .surtitre + h5,
    .rte-image + h1,
    .rte-image + h2,
    .rte-image + h3,
    .rte-image + h4,
    .rte-image + h5 {
        margin-top: 0;
    }
    
    [data-content-element-type-alias="surtitre"] + [data-content-element-type-alias="titre"] h1,
    [data-content-element-type-alias="surtitre"] + [data-content-element-type-alias="titre"] h2,
    [data-content-element-type-alias="surtitre"] + [data-content-element-type-alias="titre"] h3,
    [data-content-element-type-alias="surtitre"] + [data-content-element-type-alias="titre"] h4,
    [data-content-element-type-alias="surtitre"] + [data-content-element-type-alias="titre"] h5 {
        margin-top: -15px;
    }


/*  Introduction d'un article
    ========================================================================== */
    
    .rte-lead {
        font-size: 1.05em;
    	font-weight: 600;
		line-height: 1.425em;
    }


/*  Couleur standard des hyperliens + effet hover
    ========================================================================== */
       
    a {
    	transition: color 0.3s;
    }
    a:focus,
    a:hover {
    	text-decoration: none;
    }


/*  Liste
    ========================================================================== */

    ul {
    	list-style: none !important; /* Le important sert à overrider le style="list-style-type: circle;" qui est ajouté sur le <ul> par le Rich Text Editor. */
    	padding-left: 0;
    }
    ol {
        padding-left: 1.7rem;
    }
    
    ul[style*="list-style-type: circle"] li::before {
    	content: '';
    	position: absolute;
    	left: 8px;
    	top: 9px;
    	width: 0.55em;
	    height: 0.55em;
    	background-repeat: no-repeat;
    	background-image: url(/media/oiyiz20i/puce-fleche.svg);
    	background-size: 0.55em;
    }
    
    ol li,
    ul li {
    	margin-bottom: 0.5em;
    }
    ul li {
    	padding-left: 1.5em;
    	position: relative;
    }
    ol li {
            padding-left: 1px;
    }
    ul li::before {
    	content: '';
    	position: absolute;
    	top: 0.55em;
        left: .364em;
    	width: .45em;
    	height: .45em;
    	background-repeat: no-repeat;
    	background-image: url(/media/slofof4j/puce-defaut.svg);
    }
    ol li::marker {
        color: var(--couleur-rouge);
        font-size: .9em;
        font-weight: 900;
    }
   
/*  Liste de liens (avec flèche)
    ========================================================================== */
    
    ul.liste-liens {
        text-wrap: balance;
    }
    ul.liste-liens li {
        font-size: 1.15em;
        line-height: 1.25em;
        margin-bottom: 1.25em;
    }
    ul.liste-liens li:before {
    	background-image: url(/media/oiyiz20i/puce-fleche.svg);
    	width: .55em;
    	height: .55em;
    	background-size: 0.55em;
        top: 8px;
    }
    
    
   
   
/*  Formulaires
    ========================================================================== */
    
    label {
        font-size: 0.95rem;
        font-weight: 600;
    }


/*  Badge
    ========================================================================== */

    .badge {
        font-weight: 600;
    }
   

/*  Image
    ========================================================================== */
   
    .figure-caption {
        font-size: .8em;
        line-height: 1.2em;
        text-wrap: balance;
    }
    .figure-caption span {
        font-size: 14px;
        /* padding-top: 5px;*/
        display: inline-block;
    }
    
    /* affichage en tant que bloc */
    @media (max-width: 1023px) {
        .rte-image.float-end {
            float: none!important;
            
        }
    }
    @media (min-width: 1024px) {
        .rte-image.float-end {
            margin-left: 2em;
            max-width: 45%;
            text-align: end;
        }
     }
    .img-fluid {
        max-height: 500px;
    }
     
    @media (min-width: 1024px) {
        .img-fluid {
            width: 100%;
        }
    }
    
    
     @media (max-width: 1023px) {
        .figure:not(#image-principale):not(.is-image-decorative) {
            display: block;
            
        }
     }


/*  Image circulaire
    ========================================================================== */
    
    .img-cercle {
        border-radius: 300px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        max-width: 530px;
    }
    @media (min-width: 1024px) {
        .img-cercle {
            margin-top: -5px;
        }
        figure:not(.rte-image) .img-cercle {
            max-width: 76%;
        }
    }
    
    @media (max-width: 1023px) {
        .figure.is-image-circulaire {
            margin: 0 auto 1.5rem !important;
            max-width: 411px;
        }
    }
    @media (max-width: 499px) {
        .figure.is-image-circulaire {
            max-width: 90%;
        }
    }
    .img-cercle + .figure-caption {
        margin-left: 5%;
    }
    @media (min-width: 1024px) {
        .img-cercle + .figure-caption {
            margin-left: 18%;
        }
    }


/*  Image décorative
    ========================================================================== */
    
    @media (max-width: 1023px) {
        .figure.is-image-decorative {
            display: none;
        }
        .umb-block-grid__area.is-container-image-decorative {
            display: none;
        }
        .is-layout-image-decorative {
            display: none;
        }
    }


/*  Vidéo
    ========================================================================== */

    .video-wrapper,
    .mceNonEditable.embeditem {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 0; 
        height: 0;
    }
    @media (min-width: 1024px) {
        .video-wrapper,
        .mceNonEditable.embeditem {
            margin-bottom: 1.5em;
        }   
    }
    .video-wrapper iframe,
    .mceNonEditable.embeditem iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    


/*  Amorce
    ========================================================================== */
   
    .lead {
        line-height: 1.9rem;
        font-size: 1.3rem;
        font-weight: 500;
        margin-bottom: 1.3rem;
    }



/*  Fil d'Ariane (breadcrumb)
    ========================================================================== */

    nav[aria-label="breadcrumb"] {
        margin-bottom: 50px;
    }
    @media (min-width: 768px) {
        nav[aria-label="breadcrumb"] {
            margin-bottom: 75px;
        }   
    }
    ol.breadcrumb,
    ol.breadcrumb li {
        margin-bottom: 0;
    }
    
    
    
/*  Picto pour les liens externes (dans texte normal)
    ========================================================================== */
    
    [data-content-element-type-alias="blocDeTexte"] a[href^="http://"], 
    [data-content-element-type-alias="blocDeTexte"] a[href^="https://"] {
        background-image: url('/media/f55bw4kb/picto-site-externe.svg');
        background-position: right 2px;
        background-repeat: no-repeat;
        padding-right: 22px; 
    }
    [data-content-element-type-alias="blocDeTexte"] small a[href^="http://"], 
    [data-content-element-type-alias="blocDeTexte"] small a[href^="https://"] {
        padding-right: 18px;
    }
    [data-content-element-type-alias="blocDeTexte"] li a[href^="http://"], 
    [data-content-element-type-alias="blocDeTexte"] li a[href^="https://"] {
        padding-right: 25px;
    }
    

/*  ==========================================================================
    Header
    ========================================================================== */
    
    header {
        max-width: 980px;
        margin: 0 auto 0.5rem;
        
       
    }
    
    
    @media (min-width: 1100px) {
        header {
            display: grid;
            grid-template-columns: 300px 1fr;
            /*grid-template-rows: 55px 1fr;*/
            grid-template-rows: .85fr 1.15fr;
            grid-template-areas: "logo sec-nav"
                                 "logo main-nav";
        }
    }
    .header-logo {
        grid-area: logo;
        margin-bottom: 8px;
        padding-top: 25px;
        min-height: 110px
    }
    
    #mobile-menu-btn {
        background: transparent;
        border: none;
        position: absolute;
        right: .25em;
        top: 2em;
        color: black;
    }
    .mobile-menu-btn-texte {
        display: inline-block;
        font-size: 18px;
        line-height: 24px;
    }
    #mobile-menu-btn svg {
        margin-left: 5px;
    }
    #menu-mobile {
        --header-height: 118px;
        visibility: hidden;
        background: white;
        position: absolute;
        width: 100%;
        top: var(--header-height);
        left: 0;
        z-index: 999;
        
        /* animation */
        transition: all .3s ease;
        height: 5vh;
        opacity: 0;
        overflow: hidden;
    }
    #menu-mobile.visible {
        visibility: visible;
        opacity: 1;
        height: 100dvh;
    }
    @media (min-width: 1100px) {
        .header-mobile-menu,
        #mobile-menu-btn {    
            display: none;
        }
    }
    #menu-mobile .menu-mobile-principal li,
    #menu-mobile .menu-mobile-recherche li {
        display: block;
        background-color: var(--couleur-gris-bleu);
        margin-bottom: 3px;
        padding-left: 1rem;
        font-weight: 500;
        font-size: 1.1rem;
    }
    #menu-mobile .menu-mobile-recherche li {
        padding-right: 1rem;
    }
    
    @media (min-height: 725px) {
        #menu-mobile .menu-mobile-principal li,
        #menu-mobile .menu-mobile-recherche li {
            font-size: 1.25rem;
        }
    }
    
    #menu-mobile .menu-mobile-principal > li > a,
    #menu-mobile .menu-mobile-secondaire > li > a,
    #menu-mobile .menu-mobile-recherche > li > a {
        line-height: calc(13.8dvh - 61px);
    }
    
    #menu-mobile .menu-mobile-recherche li {
        padding-bottom: 10px;
    }
    
    .menu-mobile-secondaire {
        background-color: black;
        /*margin-right: 3px;*/
        padding-left: 1rem;
        font-weight: 500;
        font-size: 1rem;
    }
    .menu-mobile-secondaire a {
        color: white;
    }
    header nav ul.menu-mobile-secondaire li a {
        padding-right: 0;
    }
    
    #menu-mobile .sous-menu {
        columns: 2;
        margin-left: 12px;
        padding-bottom: 5px;
        width: fit-content;
    }

    #menu-mobile .sous-menu li {
        font-size: 1rem;    
        padding-bottom: 0;
        margin: 0;
        font-weight: 400;
    }
    #menu-mobile .sous-menu li a {
        color: black;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    @media (min-height: 725px) {
         #menu-mobile .sous-menu li a {
            color: black;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }
    #menu-mobile .sous-menu li a::before {
        content: "";
        position: absolute;
    	left: 12px;
        top: 16px;
        width: 0.25em;
        height: 0.25em;
    	background-repeat: no-repeat;
    	background-image: url(/media/slofof4j/puce-defaut.svg);
    }
    #menu-mobile .menu-mobile-bottom-spacer {
        background-color: var(--couleur-gris-bleu);
        height: 100%;
    }
    #ligne-1, #ligne-2, #ligne-3 {
        transition: transform .3s, opacity .3s;
    }
    #ligne-1 {
        transform-origin: 2px 2px;
        transform: rotate(0deg) translate(4px, 4px)
    }
    #ligne-1.active {
        transform: rotate(45deg) translate(2px, 2px);
    }
    
    #ligne-2.active {
        opacity: 0;
    }
    #ligne-3 {
        transform-origin: 2px 22px;
        transform: rotate(0deg) translate(4px, 20px);

    }
    #ligne-3.active {
        transform: rotate(-45deg) translate(4px, 20px);
    }
    
    .no-scroll {
        overflow: hidden;
    }
    
    .header-main-nav {
        display: none;
    }
    @media (min-width: 1100px) {
        .header-main-nav {
            display: block;
            grid-area: main-nav;
            align-self: end;
            justify-self: end;
            font-weight: 500;
        }
    }
    .header-main-nav li:last-child a {
        padding-right: 10px;
    }
    .header-sec-nav {
        display: none;
    }
    @media (min-width: 1100px) {
        .header-sec-nav {
            display: block;
            grid-area: sec-nav;
            justify-self: end;
            background: var(--couleur-gris-bleu);
            padding: 8px 10px 0 19px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
        }
    }
    #logoPO {
        max-width: 180px;
    }
    @media (min-width: 400px) {
        #logoPO {
            max-width: 200px;
        }
    }
    @media (min-width: 1100px) {
        #logoPO {
            max-width: 235px;
        }
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    header nav ul li {
        display: inline-block;
        padding-left: 0;
        margin-bottom: 0;
    }
    nav ul li:before {
        content: none;
    }
    header nav ul li a {
        color: var(--couleur-ocean);
        display: block;
        padding: .25em .35em .25em .35em;
        text-decoration: none;
    }
    header nav ul li a::before {
        color: var(--couleur-rouge);
        content: "+";
        margin-right: 5px;
    }
    header nav ul li a:hover {
        color: black;
    }
    .header-sec-nav form {
        margin-left: 1rem;
    }
    .menu-mobile-recherche .btn,
    .header-sec-nav .btn {
        margin-left: -4px;
        padding: 3px 8px;
    }
    .menu-mobile-recherche .picto-rechercher,
    .header-sec-nav .picto-rechercher {
        filter: invert(1) saturate(0) brightness(4);
        width: 28px;
        height: 28px;
    }


/*  ==========================================================================
    Footer
    ========================================================================== */
    
    footer {
        color: white;
    }
    footer p {
        margin-bottom: 0;
    }
    footer a {
        color: white;
        text-decoration: none;
        display: block;
        padding: 3px;
    }
    footer a:hover {
        color: #B5D7DD;
        text-decoration: underline;
    }
    footer a:hover:before {
        text-decoration: none;
    }
    .footer-promo {
        background-color: black;
        padding: 1em 0 1em 1rem;
    }
    @media (min-width: 1100px) {
        .footer-promo {
            padding-left: 0;
        }   
    }
    .footer-promo .container > * {
        display: inline-block;  
        vertical-align: middle;
    }
    .footer-promo p {
        margin-right: 0.5em;
    }
    .footer-promo-picto {
        width: 35px;
        height: 35px;
        padding: 5px;
        margin-left: 5px;
        transition: opacity 0.3s;
    }
    @media (min-width: 1100px) {
        .footer-promo-picto {
            width: 38px;
            height: 38px;
            margin-left: 8px;
        }
    }
    .footer-promo-picto:hover {
        opacity: .6;
    }
    .footer-promo-picto img {
        display: block;
    }
    .footer-nav {
        padding: 1.5em 0 .5em;
        background-color: var(--couleur-noir);
    }
    .footer-nav > div {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "nav-principal"
                             "nav-secondaire"
                             "logo-entente"
    }
    @media (min-width: 1100px) {
        .footer-nav > div {
            grid-template-columns: 400px 1.2fr .8fr;
            grid-template-areas: "logo-entente nav-disciplines nav-principal"
                                 "logo-entente nav-secondaire nav-secondaire"; 
        }   
    }
    #logo-entente {
        width: 300px;
    }
    .footer-nav .footer-logo-entente {
        padding-top: 25px;
        grid-area: logo-entente;
        margin-left: 1rem;
    }
    @media (min-width: 1100px) {
        .footer-nav .footer-logo-entente {
            padding-top: 10px;
            margin-left: 0;
        }
    }
    .footer-nav .footer-nav-disciplines {
        grid-area: nav-disciplines;
        display: none;
    }
    @media (min-width: 1100px) {
        .footer-nav .footer-nav-disciplines {
            display: block;
        }
    }
    .footer-nav .footer-nav-principal {
        grid-area: nav-principal;
        margin-left: 2rem;
    }
    @media (min-width: 1100px) {
        .footer-nav .footer-nav-principal {
            margin-left: 0;
        }
        .footer-nav .footer-nav-principal .item-1125 {
            display: none;
        }
    }
    .footer-nav-secondaire {
        grid-area: nav-secondaire;
        font-size: 14px;
        margin-left: 2rem;
    }
    @media (min-width: 1100px) {
        .footer-nav-secondaire {
            margin-left: 0;
            font-size: 16px;
        }
    }
    @media (min-width: 1100px) {
        .footer-nav-secondaire {
            text-align: right;
            bottom: -42px;
            position: relative;
            right: 4em;
        }
    }
    .footer-nav-disciplines > ul > li > a::before,
    .footer-nav-principal  > ul > li > a::before,
    .footer-nav-secondaire  > ul > li > a::before{
        color: var(--couleur-rouge);
        content: "+";
        position: absolute;
        left: -13px;
    }
    .footer-nav-secondaire ul li {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 0;
      
    }
    .footer-nav-secondaire > ul > li > a {
        padding: 0;
    }
    @media (min-width: 1100px) {
        .footer-nav-secondaire > ul > li > a {
            padding: 0 10px 0 0;
        }
    }
    footer ul li {
        padding-left: 0;
    }
    .footer-nav ul ul {
        column-count: 2;
        font-size: 15px;
        width: 85%;
    }
    .footer-nav ul ul li {
        margin-bottom: 0;
    }
       
    
    .footer-copyright {
        padding: .5em 0 1em;
        padding-left: 1rem;
        background-color: var(--couleur-noir);
    }
    @media (min-width: 1100px) {
        .footer-copyright {
            padding-left: 0;
        }
    }
 
    
    .footer-copyright .copyright {
        font-size: .935rem;
    }
    
    

    
/*  ==========================================================================
    Grille
    ========================================================================== 
   
   .umb-block-grid
   .umb-block-grid__layout-container
   .umb-block-grid__layout-item
   
    // 2-3 colonnes :
   .umb-block-grid__area-container
   .umb-block-grid__area [data-area-alias=""]
   .umb-block-grid__layout-container
   .umb-block-grid__layout-item
   
   
    */
   
    .umb-block-grid {
        margin: 0 -1rem;       
    }

    .umb-block-grid__layout-container {
        grid-auto-rows: minmax(0, min-content);
    }


    .umb-block-grid__layout-item {
        margin: 0 1rem;
    }
    @media (min-width: 1024px) {
        .umb-block-grid__layout-item:not([data-content-element-type-alias="titre"]) {
            margin: 1rem;
        }   
    }
    .umb-block-grid__area-container .umb-block-grid__layout-item {
        margin: 0;
    }
    
        
  
    /* Retire la marge 'top' de tous les premiers éléments de block (sauf les blocs 'titres') */
    @media (min-width: 1024px) {
        .umb-block-grid__layout-item:not([data-content-element-type-alias="titre"]) > *:first-child,
        .umb-block-grid__layout-item:first-child > figure:first-child + * {
            margin-top: 0;
        }
 
        .umb-block-grid__layout-item[data-content-element-type-alias="titre"] > *:first-child {
            margin-top: 0;
        }
    }

    /* Retire la marge 'top' des titres dans un contexte de 3 colonnes */
    [data-area-alias="col-1"] [data-content-element-type-alias="titre"] h3,
    [data-area-alias="col-1"] [data-content-element-type-alias="titre"] h4, 
    [data-area-alias="col-1"] [data-content-element-type-alias="titre"] h5,
    [data-area-alias="col-2"] [data-content-element-type-alias="titre"] h3,
    [data-area-alias="col-2"] [data-content-element-type-alias="titre"] h4, 
    [data-area-alias="col-2"] [data-content-element-type-alias="titre"] h5,
    [data-area-alias="col-3"] [data-content-element-type-alias="titre"] h3,
    [data-area-alias="col-3"] [data-content-element-type-alias="titre"] h4, 
    [data-area-alias="col-3"] [data-content-element-type-alias="titre"] h5 {
        margin-top: 0;
    }
    [data-content-element-type-alias="encadre"] h2:first-child,
    [data-content-element-type-alias="encadre"] h3:first-child,
    [data-content-element-type-alias="encadre"] h4:first-child,
    [data-content-element-type-alias="encadre"] h5:first-child {
        margin-top: 0;
    }
    
    .umb-block-grid__layout-item[data-content-element-type-alias=blocDeTexte] + .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes], 
    .umb-block-grid__layout-item[data-content-element-type-alias=blocDeTexte] + .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes] {
        margin-top: 2rem;
    }
    
     .umb-block-grid__layout-item[data-content-element-type-alias=titre] + .umb-block-grid__layout-item[data-content-element-type-alias=carrouselNouvelles] {
         margin-top: 0;
     }
    
    
    
    
    @media (min-width: 1024px) {
        .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes],
        .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes] {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes] + .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes],
        .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes] + .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes] {
            margin-top: 0;
        }
        
        .umb-block-grid__layout-item[data-content-element-type-alias=encadre] .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes],
        .umb-block-grid__layout-item[data-content-element-type-alias=encadre] .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes] {
            margin-top: 0;
            margin-bottom: 0;
        }
        .umb-block-grid__layout-item[data-content-element-type-alias=titre] + .umb-block-grid__layout-item[data-content-element-type-alias=deuxColonnes],
        .umb-block-grid__layout-item[data-content-element-type-alias=titre] + .umb-block-grid__layout-item[data-content-element-type-alias=troisColonnes],
        .umb-block-grid__layout-item[data-content-element-type-alias=titre] + .umb-block-grid__layout-item[data-content-element-type-alias=blocDeTexte],
        .umb-block-grid__layout-item[data-content-element-type-alias=titre] + .umb-block-grid__layout-item[data-content-element-type-alias=choixProgramme] {
            margin-top: 0;
        }
    }
  
    
    /* Retire la marge 'top' du premier élément de la page (premier élément sous le fil d'Ariane) si c'est un bloc 'titre' */
    [aria-label="breadcrumb"] + .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-content-element-type-alias="titre"]:first-child > *:first-child
    {
        margin-top: 0 !important;
    }

    
    /* Retire la marge 'bottom' d'un paragraphe lorsqu'il est à la fin d'un bloc */
    .umb-block-grid__layout-item p:not(.lead):last-child {
        margin-bottom: 0;
    }
    
    
    /*
    .umb-block-grid__layout-item[data-content-element-type-alias="titre"] {
        margin-bottom: 0;
    }
    */
    /*
    .umb-block-grid__layout-item[data-content-element-type-alias="titre"] + .umb-block-grid__layout-item {
        margin-top: 0;
        margin-top: 1rem;
    }
    */
    
    [data-area-alias="gauche"] {
        margin-bottom: 1rem;
    }
    [data-area-alias="droite"] {
        margin-bottom: 1rem;
    }
    
    @media (min-width: 1024px) {
        [data-area-alias="gauche"] {
            margin-right: 1rem;
            /*margin-bottom: 2rem;*/
        }
        [data-area-alias="droite"] {
            margin-left: 1rem;
            /*margin-bottom: 2rem;*/
        }
    }
    
     [data-content-element-type-alias="separateur"] +  div > h2,
     [data-content-element-type-alias="separateur"] +  div > h3 {
        margin-top: .25rem;
    }


/*  ==========================================================================
    Colonnes
    ========================================================================== */
    
    [data-content-element-type-alias="troisColonnes"] .umb-block-grid__area-container {
        gap: 1.5rem;
    }


/*  ==========================================================================
    Styles d'éléments
    ========================================================================== */
   
/*  Hero (en-tête de page)
    ========================================================================== */
    .hero {
        background-color: var(--couleur-ocean);
        margin-bottom: 35px;
        background-position: center;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
    }
   
    .hero .container,
    .hero .container h1,
    .hero .container a,
    .hero .container span,
    .hero .container .breadcrumb-item+.breadcrumb-item::before{
        color: white;
    }
    .hero h1 {
        padding: 185px 0 25px;
        text-shadow: 1px 1px 50px rgba(30,30,30,.2), 0px 10px 25px rgba(30,30,30,.1), 0px 2px 5px rgba(30,30,30,.2);
    }
    .hero::after { /* crédit photo */
        position: absolute;
        color: rgba(255, 255, 255, 0.8);
        font-size: 15px;
        width: 250px;
        bottom: 10px;
        right: -108px;
        line-height: 250px;
        transform: rotate(-90deg);
    }
   
/*  Hero des Disciplines (en-tête de page)
    ========================================================================== */
   
   .hero-lead {
        background-color: rgba(0,0,0,0.55);
        font-weight: 500;
        line-height: 1.8rem;
        padding: 1.25em 0;
        background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 92%);
        margin-bottom: 0;
    }
    .hero-lead .container p {
        font-size: 1.4rem;
    }
    @media (min-width: 768px) {
        .hero-lead {
            line-height: 2.1rem;
        }   
    }
   .hero-lead p {
       margin-bottom: 0;
       padding-right: 1.5em;
   }
   @media (min-width: 1080px) {
       .hero-lead .container {
            padding-right: 150px;
        }
   }
    .hero-haut h1 {
       font-size: 3rem;
       padding: 40vw 0 0;
    }
    @media (min-width: 768px) {
        .hero-haut h1 {
           font-size: 4.2rem;
           padding: 30vw 0 25px;
        }
    }



/*  Boutons
    ========================================================================== */

    .btn {
        box-shadow: rgba(0,0,0,0.35) 1px 1px 2px 0px;
        font-weight: 600;
    }
    .btn.btn-lg {
        box-shadow: rgba(0,0,0,0.35) 1px 2px 3px 0px;
        --bs-btn-padding-y: .9rem;
        --bs-btn-padding-x: 1.25rem;
        --bs-btn-font-size: 1.2rem;
    }
    @media (min-width: 425px) {
        .btn.btn-lg {
            box-shadow: rgba(0,0,0,0.35) 1px 2px 3px 0px;
            --bs-btn-padding-x: 2rem;
        }   
    }
    .btn.picto-next::after {
        content: "";
        position: relative;
        background-image: url(/media/oiyiz20i/puce-fleche.svg);
        background-repeat: no-repeat;
        display: inline-block;
        width: 11px;
        height: 11px;
        top: 6px;
        right: -4px;
        filter: invert() brightness(16);
        transform: translateY(-50%);
    }
    .btn.btn-lg.picto-next::after {
        width: 17px;
        height: 17px;
        top: 12px;
        right: -10px;
    }

/*  Espacement
    ========================================================================== */
    /*
    .umb-block-grid__layout-item[data-content-element-type-alias="espacement"] {
        margin-bottom: 0;
        margin-top: 0;
    }
    */


/*  Encadrés
    ========================================================================== */
   
   
    .encadre {
        background-color: var(--couleur-gris-bleu);
        border-radius: 5px;
        padding: 1.5em;
        clear: both;
    }
   
    /* Encadré inséré à partir d'un blockgrid. */
    .umb-block-grid__layout-item[data-content-element-type-alias=encadre] {
        margin-top: 1em;
        margin-bottom: 2rem;
        position: relative;
        z-index: 0;
    } 
    @media (max-width: 1023px) {
        [data-content-element-type-alias="encadre"] [data-content-element-type-alias="troisColonnes"] .umb-block-grid__area:first-child [data-content-element-type-alias="blocDeTexte"] > *:first-child {
            margin-top: 0;
        }
    }
    @media (min-width: 1024px) {
        [data-content-element-type-alias="encadre"] [data-content-element-type-alias="troisColonnes"] [data-content-element-type-alias="blocDeTexte"] > *:first-child {
            margin-top: 0;
        }
    }
    .encadre-blockgrid {
        
    }
    
    /* Encadré inséré comme block dans un Rich Text Editor */
    .encadre-block {
        margin-bottom: 1em;
    }
    
    /* Styles généraux du contenu des encadrés */
    .encadre > :first-child {
    	margin-top: 0;
    }
    .encadre > :last-child,
    .encadre .umb-block-grid__layout-item > :last-child,
    .encadre .umb-block-grid__layout-item > ul:last-child > li:last-child {
        margin-bottom: 0;
    }
    
    
    .encadre-bleu-sombre {
        background-color: var(--couleur-noir);
        color: white !important;
    }
    .encadre-bleu-sombre * {
        color: white !important;
    }
    .encadre-bleu-sombre h2, .encadre-bleu-sombre h3 {
        color: var(--couleur-bleu-clair) !important;
    }
    .encadre-large {
        position: relative;
    }
    .encadre-large::before {
        background-position: center;
        top: 0;
        width: 100vw;
        transform: translateX(-50%);
        left: 50%;
        content: '';
        height: 100%;
        background-color: inherit;
        position: absolute;
        z-index: -1;
    }
    .encadre-filet {
        background-color: transparent;
        border: 1px solid #707070;
    }
        
        
        
/*  Bandeau daté
    ========================================================================== */
    
    .bandeau {

        padding-top: 3rem;
        padding-bottom: 3rem;
        min-height: 220px;
        background-color: var(--couleur-ocean);
        position: relative;
    }
    .bandeau::before {
        background-position: center;
        top: 0;
        width: 100vw;
        transform: translateX(-50%);
        left: 50%;
        content: '';
        height: 100%;
        background-color: inherit;
        position: absolute;
        z-index: -1;
    }
    .bandeau {
        background-color: var(--couleur-noir);
        color: white !important;
    }
    .bandeau * {
        color: white !important;
    }
    .bandeau h2, .bandeau h3 {
        color: var(--couleur-bleu-clair) !important;
    }
    
   
    .bandeau h2 { 
        margin-top: 0;
    }
    
    
/*  Bandeau daté
    ========================================================================== */
    #bandeau-accueil {
        align-items: stretch;
    }
    #bandeau-accueil .bandeau-image  {
        display: none;
    }
    
    @media (min-width: 768px) {
        #bandeau-accueil .bandeau-image  {
            display: block;
        }
        #bandeau-accueil .bandeau-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #bandeau-accueil h2 {
            font-size: 2rem;
        }
    }
    @media (min-width: 1110px) {
        #bandeau-accueil h2 {
            font-size: 2.75rem;
        }
    }
    #bandeau-accueil .bandeau-contenu p:last-child {
        margin-bottom: 0;
    }
    
    
    
/*  Onglets
    ========================================================================== */

    .nav-tabs {
        --bs-nav-tabs-border-width: 1px;
        --bs-nav-tabs-border-color: #bdbdbe;
        --bs-nav-tabs-border-radius: 11px;
        --bs-nav-tabs-link-active-bg: var(--couleur-rouge);
        --bs-nav-tabs-link-active-color: white;
        align-items: stretch;
        margin: 2.5em 0 1.5em;
    }
    ul.nav-tabs li {
        margin-bottom: 0;
        padding-left: 0;
        width: 25%;
        padding-right: .35em;
        border-bottom: 1.5px solid #707070;
    }
    ul.nav-tabs li:before {
        content: none;
    }
    ul.nav-tabs li:last-child {
        padding-right: 0;
    }
    .nav-tabs .nav-link {
        border: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
        border-bottom: none;
        background-color: #e9f1f2;
        color: #444444;
        font-size: 1.41rem;
        font-family: "roboto-condensed", sans-serif;
        line-height: 1.4rem;
        height: 100%;
        padding: 0.6em 2em 0.5em 0.75em;
        text-wrap: balance;
    }
    .nav-tabs .nav-link:not(.active):hover {
        background-color: var(--couleur-bleu-sombre);
        color: white;
    }
    .nav-tabs .nav-link span {
        position: relative;
        top: 100%;
        transform: translateY(-100%);
        display: block;
    }
    .nav-tabs .nav-link span::after {
        content: "";
        background-image: url("/media/oiyiz20i/puce-fleche.svg");
        width: 14px; height: 14px;
        background-size: 14px;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
    }
    .nav-tabs .nav-link.active span::after {
        filter: saturate(0) brightness(5);
        transform: rotate(90deg);
    }
    .nav-tabs .nav-link.active {
        font-weight: bold;
        border: var(--bs-nav-tabs-border-width) solid var(--couleur-rouge);
        cursor: default;
    }
    
    /* Tabs Mobile Hack */
    @media (max-width: 1099px) { /* 1100px */
        .nav-tabs {
            border: none;
            display: block;
            margin: 1em 0 2em;
        }
        ul.nav-tabs li {
            width: 100%;
        }
        ul.nav-tabs li {
            border: none;
        }
        .nav-tabs .nav-link {
            border: none !important;
            background: transparent!important;
            font-size: 1.5rem;
            padding-left: 0;
        }
        .nav-tabs .nav-link:not(.active) {
            color: var(--couleur-ocean);
            text-decoration: underline;
        }
        .nav-tabs .nav-link span {
            top: 0;
            transform: none;
        }
        .nav-tabs .nav-link span::after {
            content: none;
        }
        .nav-tabs .nav-link span::before {
        content: "";
            background-image: url("/media/oiyiz20i/puce-fleche.svg");
            width: 14px; height: 14px;
            background-size: 14px;
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: inherit;
        }
        .nav-tabs .nav-link.active span::after {
            filter: none;
            transform: none;
        }
    
    }

/*  Formulaires
    ========================================================================== */
   
    .recherche-mini {
        overflow: hidden;
    }
    .recherche-mini label {
        display: block;
    }
    .recherche-mini .rm-col {
        float: left;
        padding-bottom: 5px;
    }
    .recherche-mini .rm-input {
        width: calc(100% - 45px);
        margin-right: 5px;
    }
    .recherche-mini .rm-button {
        width: 40px;
    }
    
    
    #btnRechercher {
        padding: 2px;
    }
    #btnRechercher img {
        width: 31px;
        filter: brightness(25) contrast(2) saturate(0);
    }

    
/*  Nombre en vedette
    ========================================================================== */

    .nombre-vedette {
        margin: 0.5em 0;
        padding: 0.25em 0 0.25em 1em;
    }
    @media (min-width: 1024px) {
        .nombre-vedette {
            border-left: 3px dotted var(--couleur-ocean);
        }
        [data-content-element-type-alias="troisColonnes"] .umb-block-grid__area:first-child .nombre-vedette {
            border-left: none;
        }
    }
    .nv-nombre {
        color: var(--couleur-rouge);
        font-family: "roboto-slab", serif;
        font-weight: 700;
        font-style: normal;
        font-size: 3rem;
        line-height: 3rem;
        display: inline-block;
    }
    .nv-groupe {
        white-space: nowrap;
    }
    .nv-unite {
        color: var(--couleur-rouge);
        font-family: "roboto-slab", serif;
        font-weight: 700;
        font-style: normal;
        font-size: 3rem;
        line-height: 3rem;
        display: inline-block;
    }
    .nv-label {
        color: var(--couleur-ocean);
        font-family: "roboto-condensed", sans-serif;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.7rem;
    }
    
    
    [data-content-element-type-alias="nombreVedette"] + [data-content-element-type-alias="nombreVedette"] {
        margin-top: 1em;
    } 
    @media (min-width: 1024px) {
        [data-content-element-type-alias="nombreVedette"] {
            margin-top: 1em;
        } 
    }
    


/*  Carrousel
    ========================================================================== */
    
    .slider-items {
        margin-bottom: 2.5em;
    }
    .slider-items .slider-item {
        background: var(--couleur-gris-bleu);
        color: var(--couleur-bleu-sombre);
        display: block;
        margin-bottom: .5em;
        min-height: 370px;
        margin-right: 10px;
        text-decoration: none;
        transition: filter .3s;
        width: 100%;
    }
    @media (min-width: 768px) {
        .slider-items .slider-item {
          width: calc(33% - 3.4px);
        }   
    }
    .slider-items .slider-item:hover,
    .slider-items .slider-item:focus {
        background: var(--couleur-gris-bleu);
        filter: brightness(86%);
    }
    .slider-items .item-content {
        padding: 1em;
    }
    .slider-items .item-image {
        width: 100%;
        max-height: 141px;
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .slider-items .item-image {
            max-height: none;
        }
    }
    .slider-items .item-date {
        color: var(--couleur-ocean);
        font-size: 0.95rem;
        margin-bottom: 0;
    }
    .slider-items .item-discipline {
        margin-bottom: 3px;
    }
    .slider-items .item-titre {
        font-size: 1.3rem;
        line-height: 1.5rem;
        font-family: "proxima nova", sans-serif;
        font-weight: 700;
        margin: 0 0 .25em;
        text-wrap: balance;
        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .slider-items .item-image + .item-content .item-titre {
        -webkit-line-clamp: 1;
    }
    /* Avec image, sans discipline */
    .slider-items.is-images:not(.is-disciplines) .item-image + .item-content .item-titre {
        -webkit-line-clamp: 2;
    }
    
    .slider-items .item-description {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        
        color: black;
        font-size: 1.1rem;
        line-height: 1.45rem;
        margin-bottom: 2rem;
    }
    
    /* Sans image, avec discipline */
    .slider-items .item-description {
         -webkit-line-clamp: 4;
    }
    /* Avec image, avec discipline */
    .slider-items .item-image + .item-content .item-description {
        -webkit-line-clamp: 3;
    }
    /* Avec image, sans discipline */
    .slider-items.is-images:not(.is-disciplines) .item-image + .item-content .item-description {
        -webkit-line-clamp: 3;
    }
    /* Sans image, sans discipline */
    .slider-items:not(.is-images):not(.is-disciplines) .item-content .item-description {
        -webkit-line-clamp: 7;
    }
    .slider-items .slider-item .item-lire-la-suite {
        position: absolute;
        left: 0;
        bottom: 0;
        
        pointer-events: none;
        width: 100%;
        
        background-color: #d7e6e8;
        color: var(--couleur-ocean);
        font-size: 1.1rem;
        padding: .25rem 70px .25rem 1em;
        text-align: end;
        transition: padding .3s;
    }
    .slider-items .slider-item:hover .item-lire-la-suite {
        padding-right: 60px;
    }
    .slider-items .slider-item .item-lire-la-suite img {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-20px,-50%);
        width: 44px;
        height: 44px;
        transition: transform .3s;
    }
    .slider-items .slider-item:hover .item-lire-la-suite img {
        transform: translate(-10px,-50%);
    }
    
    /* Quand on affiche seulement 3 nouvelles, on cache la pagination de flickity */
    .slider-items.is-one-page .flickity-button,
    .slider-items.is-one-page .flickity-page-dots{
        display: none;
        
    }
   
    .flickity-button {
        transition: background-color 0.3s;      
    }
    @media (max-width: 767px) {
        .flickity-button {
            display: none;
        }
    }
    .flickity-button:hover {
        background: var(--couleur-gris-bleu);
    }
    
    .flickity-prev-next-button {
        border: 1px solid var(--couleur-bleu-sombre);
        width: 50px;
        height: 50px;
    }
    
    .flickity-prev-next-button .flickity-button-icon {
        width: 60%;
        height: 90%;
        color: var(--couleur-ocean);
    }
 
    .flickity-prev-next-button.previous .flickity-button-icon {
        top: -10%;
        
    }
    
    .flickity-prev-next-button.next .flickity-button-icon {
       
    }
    .flickity-button:disabled {
        opacity: 0;
    }
    
    /* position outside */
    .flickity-prev-next-button.previous {
        left: -75px;
    }
    .flickity-prev-next-button.next {
        right: -75px;
    }
    
    @media (max-width: 767px) {
        .centrer-mobile {
            text-align: center;
        }
    }
    


    
/*  Choix de programme
    ========================================================================== */
    #disciplines.choix-programme {
        margin-top: 1em;
    }
    .choix-programme {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "label"
                             "select"; 
    }
    @media (min-width: 750px) {
        .choix-programme {
            grid-template-columns: 1fr 1fr;
            grid-template-areas: "label select"; 
            
        }   
    }
   
    .choix-programme .col:first-child {
        grid-area: label;
        
    }
    .choix-programme .col:first-child label {
        vertical-align: bottom;
    }
    .choix-programme .col:last-child {
        grid-area: select;
    }
    .choix-programme label {
        font-size: 1em;
    }
    @media (min-width: 768px) {
        .choix-programme label {
            font-size: 1.1em;
        }   
    }
    #programmeDropdown {
        margin-bottom: -20px;
    }
    #programmeDropdown li {
        margin-top: 0;
        font-size: inherit;
    }
    #programmeDropdown li:before {
        top: 7px;
    }
   
    
/*  Grille de nouvelles, appels de projets, boursiers
    ========================================================================== */
    .container-filtres,
    .container-recherche {
        background-color: var(--couleur-gris);
        padding: 1em;
        margin-bottom: 1em;
    }
    .container-filtres h2,
    .container-recherche h2 {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--couleur-ocean);
        margin-top: 0;
        line-height: 2.25rem;
    }
    #filtres-toggle {
        display: block;
        margin-bottom: 1em;
    }
    #filtres-panneau {
        display: none;
    }
    @media (min-width: 768px) {
        #filtres-toggle {
            display: none;    
        }
        #filtres-panneau {
            display: block;
        }   
    }
    
    
    .affichage-qte-de-a {
        position: relative;
        border-bottom: 1px solid var(--couleur-gris);
        margin-bottom: 1rem;
    }
    .affichage-qte {
        color: var(--couleur-ocean);
        font-size: 1.1rem;
        margin-bottom: 0;
    }
    .affichage-de-a {
        color: var(--couleur-ocean);
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    @media (min-width: 768px) {
         .affichage-qte {
            margin-bottom: 5px;
        }
        .affichage-de-a {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    .grille-items {
        display: flex;
        flex-wrap: wrap;
    }
    .grille-items .grille-item {
        flex-basis: 100%;
        padding-left: 0;
    }
    @media (min-width: 768px) {
        .grille-items .grille-item {
            flex-basis: calc(50% - 0.25em);
        }   
    }
    .grille-items.grille-items-3 .grille-item {
        flex-basis: calc(100% - 0.5em);
    }
    @media (min-width: 768px) {
        .grille-items.grille-items-3 .grille-item {
            flex-basis: calc(33.3333% - 0.5em);
        }
        .grille-items .grille-item:nth-child(odd) {
            margin-right: 0.5em;
        }
    }
    .vous-aimerez-aussi .grille-items .grille-item {
        margin-right: 0.5em;
    }
    .grille-items .grille-item::before {
        content: none;
        
    }
    .grille-items .grille-item a {
        background: var(--couleur-gris-bleu);
        color: var(--couleur-bleu-sombre);
        display: block;
    	height: 100%;
        min-height: 330px;
        text-decoration: none;
        transition: filter .3s;
    }
    .grille-items .grille-item a:hover,
    .grille-items .grille-item a:focus {
        background: var(--couleur-gris-bleu);
        filter: brightness(86%);
    }
    .grille-items .item-content {
        padding: 1em;
    }
   
    .grille-items .item-image {
        width: 100%;
        max-height: 141px;
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .grille-items .item-image {
            
            max-height: none;
        }
    }
    .grille-items .item-date {
        color: var(--couleur-ocean);
        font-size: 0.95rem;
        margin-bottom: 0;
        
    }
    .grille-items .item-discipline {
        margin-bottom: 3px;
    }
    .grille-items .item-titre {
        font-size: 1.3rem;
            line-height: 1.5rem;
        font-family: "proxima nova", sans-serif;
        font-weight: 700;
        margin: 0 0 .25em;
        text-wrap: balance;
        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .grille-items .item-image + .item-content .item-titre {
        -webkit-line-clamp: 3;
    }
    .vous-aimerez-aussi .grille-items .item-image + .item-content .item-titre {
        -webkit-line-clamp: 2;
    }
    .grille-items .item-description {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        
        color: black;
        font-size: 1.1rem;
        line-height: 1.45rem;
        margin-bottom: 2rem;
    }
    .grille-items .item-image + .item-content .item-description {
        -webkit-line-clamp: 3;
    }
    .grille-items .grille-item .item-lire-la-suite {
        position: absolute;
        left: 0;
        bottom: 0;
        
        pointer-events: none;
        width: 100%;
        
        background-color: #d7e6e8;
        color: var(--couleur-ocean);
        font-size: 1.1rem;
        padding: .25rem 70px .25rem 1em;
        text-align: end;
        transition: padding .3s;
    }
    .grille-items .grille-item:hover .item-lire-la-suite {
        padding-right: 60px;
    }
    .grille-items .grille-item .item-lire-la-suite img {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-20px,-50%);
        width: 40px;
        height: 40px;
        transition: transform .3s;
    }
    .grille-items .grille-item:hover .item-lire-la-suite img {
        transform: translate(-10px,-50%);
    }
    
    
/*  Fiche de nouvelle, appel de projets, etc.
    ========================================================================== */
    
    .fiche-discipline {
        color: var(--couleur-ocean);
        font-family: "roboto-condensed", sans-serif;
        font-size: 1.75rem;
        margin-bottom: 0;
    }
    .fiche-date {
        /*font-weight: 600;*/
    }
    
    @media (min-width: 1024px) {
        #image-principale {
            margin-top: 5px;
        }
    }
    
    @media (max-width: 640px) {
        #image-principale {
            margin-left: 0;
            max-width: none;
            float: none !important;
        }   
        #image-principale figcaption {
            text-align: left !important;
        } 
    }
    
    
    
    
/*  Pagination
    ========================================================================== */
   
    .pagination {
       margin-top: 2em;
    }
    .pagination .page-item {
       padding-left: 0;
    }
    .pagination .page-item .page-link {
       padding-left: 1em;
       padding-right: 1em;
    }
    .pagination .page-item .page-link-last img {
        transform: rotate(180deg);
        padding-top: 3px;
    
        width: 15px;
        height: 18px;
    }
    .pagination .page-item .page-link-next img {
        width: 15px;
        height: 15px;
    }
    .pagination .fleche-suivante {
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-left: 5px;
    }
    .pagination .fleche-precedente {
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-right: 5px;
        padding-top: 1px;
        transform: rotate(180deg);
    }
    
/*  Boutons Partage
    ========================================================================== */

    .boutons-partage {
        z-index: 100;
    }
    .boutons-partage ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .boutons-partage ul li {
        display: inline-block;
        padding-left: 0;
    }
    .boutons-partage ul li:before {
        content: none;
    }
    .boutons-partage .ssk {
        background-color: black;
        background-size: 22px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        color: white;
        display: block;
        width: 35px;
        height: 35px;
        transition: background-color 0.3s;
    }
    .boutons-partage .ssk-facebook {
        background-image: url(/media/na2fcndd/picto-facebook.svg);
    }
    .boutons-partage .ssk-facebook:hover {
        background-color: #1877f2;
    }
    .boutons-partage .ssk-twitter {
        background-image: url(/media/iyijtul3/picto-x.svg);
    }
    .boutons-partage .ssk-twitter:hover {
        background-color: #444444;
    }
    .boutons-partage .ssk-linkedin {
        background-image: url(/media/to0fx23b/picto-linkedin.svg);
    }
    .boutons-partage .ssk-linkedin:hover {
        background-color: #0a66c2;
    }
    
    .boutons-partage .ssk-email {
        background-image: url(/media/x0ol0ird/picto-courriel.svg);
    }
    .boutons-partage .ssk-email:hover {
        background-color: #074b98;
    }
    .boutons-partage .ssk-lien {
        background-image: url(/media/kqwjjr0e/picto-lien.svg);
    }
    .boutons-partage .ssk-lien:hover {
        background-color: #074b98;
    }
    .boutons-partage .ssk-lien.copied {
        background-color: #23854a;
    }

    
/*  Affiche d'une ligne de Logos
    ========================================================================== */
    
    .logos {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2em 1em;
        margin-bottom: 2.5em;
    }
    @media (min-width: 768px) {
        .logos {
            gap: 2em;
        }   
    }
    .logo {
        align-self: center;
    }
    .logo img {
        max-width: 155px;
        max-height: 125px;
    }
    
    @media (min-width: 768px) {
        .logo img {
            max-width: 14.5em;
            max-height: 6.25em;
        }
        .logos.logos-quatre .logo img {
            max-width: 11.5em;
        }
        .logos.logos-cinq .logo img {
            max-width: 9em;
            
        }  
    }
    
    
/*  Carrousel des rapports annuels
    ========================================================================== */
    
    .rapports {
        text-align: center;

    }
    .rapports .flickity-viewport {
        margin-bottom: 50px;
    }
    .rapport {
        margin-right: 1.5em;
    }
    .rapport a {
        text-decoration: none;
        color: black;
    }
    .rapport img {
        max-width: 227px;
        border: 1px solid #707070;
        
    }
    .rapport figcaption {
        font-size: 24px;
        max-width: 225px;
        line-height: 27px;
        margin-top: 10px;
        margin-bottom: 1em;
    }


    
/*  ==========================================================================
    Styles de pages
    ========================================================================== */
    
/*  Page d'accueil
    ========================================================================== */
    
    .sections {
        margin-bottom: -8rem;
    }
    @media (min-width: 768px) {
        .sections {
            overflow: hidden;
        }   
    }
    .section {
        padding: 6rem 0;
        position: relative;
    }
    .section h2 {
        text-transform: uppercase;
        font-size: 2.65rem;
        letter-spacing: -1px;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    @media (min-width: 768px) {
        .section h2 {
            font-size:  3rem;
        }
    }
    @media (min-width: 1110px) {
        .section h2 {
            font-size: 4.5rem;
        }
    }
    .section p {
        max-width: 650px;
        /*line-height: 1.5rem;*/
        margin-left: 7px;
    }
    @media (min-width: 768px) {
        .section p {
            margin-left: 35px;
        }
    }
    .section ul {
        margin-left: 0;
        font-size: 1.1em;
    }
    @media (min-width: 768px) {
        .section ul {
            margin-left: 28px;
        }
    }
    .section.entete {
        padding-top: 8rem;
        background-color: var(--couleur-ocean);
        padding-bottom: 3rem;
        background-position: center;
        background-size: cover;
        position: relative;
        overflow-x: hidden;
    }
    .section.entete h1 {
        color: white;
        font-weight: bold;
        font-size: 2.25rem;
        max-width: 400px;
        line-height: 2.75rem;
        
    }
    @media (min-width: 768px) {
        .section.entete h1 {
            font-size: 3.5rem;
            line-height: 4.25rem;
            max-width: 600px;
        }
    }
    .section.entete p {
        color: white;
        margin-left: 0;
    }
    .section figure {
        margin-bottom: 0;
    }
    .section .liste-liens li {
        font-size: 1em;
        margin-bottom: 1em;
    }
    .section.entete a {
        color: #eee;
    }
    
    
    /* Section 1 */
    .section-1 {
        padding-top: 400px;
        padding-bottom: 140px;
    }
    @media (min-width: 768px) {
        .section-1 {
            padding-top: 100px;
            padding-bottom: 110px;
        }
    }
    .section-1 .bg {
        transform: scaleX(-1);
        position: absolute;
        max-width: 368px;
        max-height: 403px;
        width: 35%;
        right: 45vw;
        min-height: 425px;
        min-width: 460px;
        top: 0;
    }
    @media (min-width: 768px) {
        .section-1 .bg {
            left: 0;
            top: calc(-25vw + 357px);
            max-width: 928px;
            max-height: 978px;
        }
    }
    .section-1 figure {
        position: absolute;
        top: -40px;
        right: 15px;
        z-index: 1;
    }
    @media (min-width: 768px) {
        .section-1 figure {
            top: 5px;
            right: unset;
        }
    }
    @media (min-width: 1300px) {
        .section-1 figure {
            margin-left: -50px;
        }
    }
    .section-1 figure img {
        max-height: 420px;
    }
    @media (min-width: 768px) {
        .section-1 figure img {
            max-height: 659px;
        }
    }
    .section-1 .contenu {
        left: 0;
        position: relative;
    }
    @media (min-width: 768px) {
        .section-1 .contenu {
            left: 300px;
            width: calc(100% - 300px);
        }
    }
    .section-1 .contenu h2 {
        margin-top: 0;
    }
    @media (min-width: 768px) {
        .section-1 .contenu h2 {
            margin-top: 2rem;
        }
    }
    
    /* Section 2 */
    .section-2 {
        padding-top: 130px;
        padding-bottom: 45px;
        border-top: 1px solid #707070;
    }
    @media (min-width: 768px) {
        .section-2 {
            padding-bottom: 110px;
        }
    }
    .section-2 .bg {
        position: absolute;
        width: 90%;
        top: -125px;
        right: 0px;
    }
    @media (min-width: 768px) {
        .section-2 .bg {
            top: unset;
            width: 60%;
            bottom: -16vw;
            right: 0;
            max-height: 800px;
            max-width: 990px;
            min-width: 667px;
            min-height: 538px;
        }
    }
    .section-2 .container {
        position: relative;
    }
    .section-2 figure {
        position: absolute;
    	right: -0.5rem;
    	top: -200px;
    	overflow: hidden;
    	width: 40vw;
    }
    @media (min-width: 768px) {
        .section-2 figure {
            bottom: -127px;
            top: unset;
        }
    }
    @media (min-width: 1110px) {
        .section-2 figure {
            right: 25px;
            bottom: auto;
            top: unset;
            width: auto;
        }
    }
    .section-2 figure img {
        /*max-height: 350px;*/
        max-height: 260px;
    }
    @media (min-width: 768px) {
        .section-2 figure img {
            max-height: 523px;
        }
    }
    @media (min-width: 768px) {
        .section-2 .contenu  {
            width: calc(100% - 350px);
        }
    }
    
    .section-2 .contenu h2 {
        /*max-width: calc(100% - 135px);*/
        max-width: calc(100% - 40vw);
    }
    @media (min-width: 768px) {
            .section-2 .contenu h2 {
            max-width: 100%;
        }
    }
    .section-2 .contenu p {
        max-width: 525px;
    }
 
 
    /* Section 3 */
    .section-3 {
        border-top: 1px solid #707070;
        padding-top: 0;
        padding-bottom: 0;
    }
    @media (min-width: 768px) {
        .section-3 {
            border-top: none;
        }
    }
    .section-3 .container {
        position: relative;
        padding-bottom: 175px;
    }
    
    .section-3 figure {
        position: absolute;
        left: -12px;
        bottom: 0;
    }
    @media (min-width: 1110px) {
        .section-3 figure {
            left: -310px;
        }
    }
    .section-3 figure img {
        width: 100%;
        max-height: 225px;
    }
    @media (min-width: 1110px) {
        .section-3 figure img {
            max-height: 449px;
        }   
    }
    .section-3 .contenu {
        padding: 15px 15px 25px 0;
    }
    @media (min-width: 768px) {
        .section-3 .contenu {
            background-color: white;
            border: 1px solid #707070;
            border-radius: 15px;
            padding: 15px 15px 25px 238px;
            margin-right: 0;
        }   
    }
    @media (min-width: 1110px) {
        .section-3 .contenu {
            padding: 15px 15px 25px 470px;
        }   
    }

    @media (min-width: 1110px) {
        .section-3 .contenu {
            margin-right: 100px;
        }   
    }
    .section-3 .contenu h2 {
        margin-bottom: 3rem;
    }

   .section-3 ul{
        columns: 2;
        margin-left: 0;
    }
    @media (min-width: 768px) {
        .section-3 ul{
            margin-left: 30px;
        }
    }
    .section .liste-liens li {
        margin-bottom: .75em;
    }
    
    
    /* Section 4 */
    .section-4 {
        padding-top: 0;
        background-color: var(--couleur-ocean);
        padding-bottom: 0;
    }
    
    .section-4 .bg-container {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .section-4 .bg {
        position: absolute;
        width: 622px;
        height: 680px;
        top: 50px;
        right: 0;
    }
    .section-4 .container {
        padding-top: 58px;
        position: relative;
        padding-bottom: 240px;
    }
    @media (min-width: 768px) {
        .section-4 .container {
            padding-bottom: 34px;
        }
    }
    .section-4 figure {
        position: absolute;
        right: 5vw;
        bottom: 0;
    }
    .section-4 figure img {
        max-height: 250px;
    }
    @media (min-width: 768px) {
        .section-4 figure img {
            max-height: 373px;
        }
    }
    .section-4 h2 {
        margin-top: 0;
    }
    @media (min-width: 768px) {
        .section-4 h2 {
            margin-top: 2rem;
            max-width: 380px;
        }
    }
    @media (min-width: 940px) {
        .section-4 h2 {
            max-width: 535px;
        }
    }
    @media (min-width: 1110px) {
        .section-4 h2 {
            max-width: 675px;
            line-height: 1em;
        }
    }
    .section-4 h2,
    .section-4 p {
        color: white;
    }
    .section-4 p {
        max-width: 475px;;
    }   
    .section-4 p {
        max-width: 275px;
    }   
    @media (min-width: 412px) {
        .section-4 p {
              max-width: 75%;
        }   
    }
    @media (min-width: 768px) {
        .section-4 p,
        .section-4 ul {
               max-width: 45vw;
        }   
    }
    @media (min-width: 1100px) {
        .section-4 p {
            max-width: 475px;;
        }   
    }
    .section-4 .liste-liens a {
        color: white;
    }

    
    
/*  Recherche
    ========================================================================== */
    
    .page-recherche form .btn-primary {
        width: 100%;
    }
    .page-recherche form input {
        font-size: inherit;
    }
    .page-recherche .encadre h2 {
        color: var(--couleur-ocean);
        font-size: 1em;
        font-weight: 600;
        padding-left: 4px;
    }
    .page-recherche .resultats h3 {
        font-weight: 600;
        margin-top: 1em;
    }
    
      
      
/*  Disciplines
    ========================================================================== */
    
    .liste {
        display: flex;
        gap: 1rem;
        margin: 3em 0;
        flex-wrap: wrap;
    }
    @media (min-width: 768px) {
        .liste {
            gap: 2rem;
        }
    }
    .liste .item {
        flex-basis: calc(50% - .5rem);
        padding-left: 0;
    }
    @media (min-width: 768px) {
        .liste .item {
            flex-basis: calc(33.3333% - 2rem);
        }
    }
    .liste .item::before {
        content: none;
    }

    .liste .item a {
        position: relative;
        display: block;
        
        width: 100%;
        padding-bottom: 100%;
        /*
        background-image: url(/media/5yokgi4g/liste-disciplines-cercle.png);
        background-size: 93%;
        background-position: center center;
        background-repeat: no-repeat;*/
        transition: filter .3s;
    }
    .liste .item a .item-image {
        position: absolute;
        top: -26px;
        left: 0;
        border-radius: 700px;
        width: 100%;
    }
    
    .liste .item a .item-image {
        transition: filter .3s;  
    }
    .liste .item a:hover .item-image {
        filter: brightness(75%);   
    }
    .liste .item a .item-name {
        position: absolute;
        bottom: 1em;
        border-radius: 5px;
        color: white;
        font-family: "roboto-condensed", sans-serif;
        font-size: 24px;
        padding: 0 7px 1px 7px;
        background-color: var(--couleur-rouge);
        transition: background-color .3s;
        line-height: 1.1em;
    }
    @media (min-width: 768px) {
        .liste .item a .item-name {
            font-size: 26.25px;
            line-height: inherit;
            padding: 0 10px 1px 10px;
            bottom: 2.5em;
        }
    }
    
    .liste .item a:hover .item-name {
        background-color: black;
    }
    
        
         
/*  Page Discipline
    ========================================================================== */
    
    /* Encadré Appel de projet en cours */
    
    .encadre-appel-de-projets-en-cours {
        padding: 1em .5em;
        margin-bottom: 2rem;
        margin-left: 0;
        margin-right: 0;
        max-width: 1000px;
    }
    @media (min-width: 375px) {
        .encadre-appel-de-projets-en-cours {
            padding: 1em;
        }   
    }
    @media (min-width: 1100px) {
        .encadre-appel-de-projets-en-cours {
            padding: 1em 2em;
        }   
    }
    .encadre-appel-de-projets-en-cours h2 {
        color: var(--couleur-ocean);
        font-family: "roboto-condensed", sans-serif;
        font-size: 37.5px;
        font-weight: bold;
        line-height: 43px;
    	margin: 0 0 5px 0;
    	text-wrap: balance;
    }
    .encadre-appel-de-projets-en-cours .item-date {
        margin-bottom: 25px;
    }
    @media (max-width: 809px) {
        .encadre-appel-de-projets-en-cours .col.text-end {
            display: none;
        }
    }
    
    
    /* Carrousel des boursiers en vedette */
    
    .carrousel-boursiers {
        background-color: black;
        margin-top: 2rem;
    }
    
    .carrousel-boursiers .carousel-cell {
        width: 100%;
        height: 500px;
    }
    .carrousel-boursiers .flickity-prev-next-button.previous {
        left: 10px;
    }
    @media (min-width: 1350px) {
        .carrousel-boursiers .flickity-prev-next-button.previous {
            left: 75px;
        }   
    }
    .carrousel-boursiers .flickity-prev-next-button.next {
        right: 10px;
    }
    @media (min-width: 1350px) {
        .carrousel-boursiers .flickity-prev-next-button.next {
            right: 75px;
        }
    }

    .carrousel-boursiers .boursier .boursier-bg-image {
        display: none;
        transition: opacity .3s;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier .boursier-bg-image {
            display: block;
            background-size: cover;
            background-position: center center;
            position: absolute;
            filter: blur(0) grayscale(100%);
            width: 100%;
            height: 100%;
            opacity: .75;
        }
    }
    @media (min-width: 1280px) {
        .carrousel-boursiers .boursier .boursier-bg-image {
            filter: blur(8px) grayscale(100%);
            opacity: 1;
        }
    }
    .carrousel-boursiers .boursier .boursier-image {
        display: block;
        position: absolute;
        max-width: 1300px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        opacity: .2;
        transition: opacity .3s;
    }
    
    @media (max-width: 767px) {
        .carrousel-boursiers .boursier .boursier-image {
            /*background-image: none !important;*/
            background-position: 25% center;
        }
    }
    
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier .boursier-image {
            width: 50vw;
            opacity: 0;
            /* Masque qui ajoute un dégradé du côté droit de l'image */
            -webkit-mask-image: linear-gradient(to right, black 30%, transparent);
            mask-image: linear-gradient(to right, black 30%, transparent);
            
        }
    }
    @media (min-width: 1280px) {
        .carrousel-boursiers .boursier .boursier-image {
            left: 50%;
            width: 100%;
            opacity: 1;
            transform: translateX(-50%);   
            /* Masque qui ajoute un dégradé de chaque côté de l'image */
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }
    }
    .carrousel-boursiers .boursier .contenu {
        position: relative;
        top: 15%;
        left: 5%;
        max-width: 90%;
        z-index: 1;
        
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier .contenu {
            position: relative;
            left: 60%;
            top: 45%;
            width: 33%;
            transform: translateY(-50%);
        }
        .carrousel-boursiers .boursier .contenu.position-gauche {
            left: 10%;
        } 
    }
    @media (min-width: 1350px) {
        .carrousel-boursiers .boursier .contenu {
            left: 65%;
        }
        .carrousel-boursiers .boursier .contenu.position-gauche {
            left: 15%;
        } 
    }
    .carrousel-boursiers .boursier-nom {
        color: #00285E;
        font-family: "roboto-condensed", sans-serif;
        text-transform: uppercase;
        font-size: 40px;
        letter-spacing: -1px;
        line-height: 1em;
        margin-bottom: .5em;
        margin-right: 28px;
        font-weight: 600;
        margin-left: 28px;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier-nom {
            margin-left: 0;
        
        }
    }
    @media (min-width: 1350px) {
        .carrousel-boursiers .boursier-nom {
            margin-left: -55px;
            font-size: 45px;
        }
    }
    .carrousel-boursiers .boursier-nom::before {
        content: "{ ";
        color: var(--couleur-rouge);
        font-size: 1.4em;
        font-weight: 500;
        font-family: 'proxima-nova';
        text-wrap: nowrap;
        margin-left: -28px;
    }
    @media (min-width: 1350px) {
        .carrousel-boursiers .boursier-nom::before {
            margin-left: -32px;
        }
    }
    .carrousel-boursiers .boursier-nom::after {
        content: " }";
        color: var(--couleur-rouge);
        font-size: 1.4em;
        font-weight: 500;
        font-family: 'proxima-nova';
        text-wrap: nowrap;
    }
    
    .carrousel-boursiers .boursier-sous-titre {
        font-weight: bold;
        font-size: 27px;
        line-height: 31px;
        margin-left: 28px;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier-sous-titre {
            margin-left: 0;
        }
    }
    .carrousel-boursiers .boursier-credit-photo {
        font-size: .85em;
        white-space: nowrap;
    }
    
    .carrousel-boursiers .boursier-texte {
        font-size: 1.1em;
        line-height: 26px;
        font-weight: 500;
        max-width: 350px;
        margin-left: 28px;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier-texte {
            margin-left: 0;
        }
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier::before {
            content: "";
            width: 100%; height: 100%;
            position: absolute;
    	    z-index: 1;
        }
    }
    .carrousel-boursiers .boursier-theme-sombre {
        background-color: #333;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier-theme-sombre::before {
            background-color: rgba(128,128,128,1);;
            mix-blend-mode: multiply;
        }
    }
    .carrousel-boursiers .boursier-theme-sombre .boursier-nom {
        color: #91c0c7;;
    }
    .carrousel-boursiers .boursier-theme-sombre .boursier-sous-titre,
    .carrousel-boursiers .boursier-theme-sombre .boursier-texte {
        color: white;;
    }
    .carrousel-boursiers .boursier-theme-clair {
        background-color: #eee;
    }
    @media (min-width: 768px) {
        .carrousel-boursiers .boursier-theme-clair::before {
            background-color: rgba(128,128,128,1);
            mix-blend-mode: screen;
        }
    }
    .carrousel-boursiers .flickity-prev-next-button {
        border: 1px solid var(--couleur-rouge);
        background: #00000020;
    }
    .carrousel-boursiers .flickity-prev-next-button .flickity-button-icon {
        color: #ffffffE0;
        top: 21%;
    }
    .carrousel-boursiers .flickity-prev-next-button.previous .flickity-button-icon {
        top: -11%;
    }
    .carrousel-boursiers .flickity-page-dots {
        bottom: 25px;
        background-color: #707070;
        border: 1px solid #808080;
        width: auto;
        margin: 0 auto;
        margin-left: 50%;
        transform: translateX(-50%);
        border-radius: 15px;
        padding: 3px;
    }
    .carrousel-boursiers .flickity-page-dots .dot {
        background-color: white;
        border: 1px solid #BABABA;
        width: 14px;
        height: 14px;
        opacity: 1;
        transition: background-color 0.3s;
    }
    .carrousel-boursiers .flickity-page-dots .dot.is-selected {
        background-color: var(--couleur-rouge);
    }
    
    
    /* Liens vers les pages ressources */
    .section-ressources {
        background-color: var(--couleur-ocean);
        padding: 3rem 0 2rem;
        margin-bottom: -8rem;
        
    }
    .section-ressources .container {
        display: grid;
        grid-template-columns: 1fr;
    }
    @media (min-width: 768px) {
        .section-ressources .container {
            grid-template-columns: 270px 1fr;
            padding-right: 170px;
        }
    }
    .section-ressources h2 {
        margin-top: 0;
        margin-bottom: 2rem;
        color: white;
        font-size: 48.75px;
    }
    
    @media (min-width: 768px) {
        .section-ressources ul {
            columns: 2;
        }
    }
    .section-ressources ul.liste-liens li {
        padding-left: 0;
        margin-bottom: 0.55em;
    }
    @media (min-width: 768px) {
        .section-ressources ul.liste-liens li {
            margin-bottom: 0.35em;
        }   
    }
    .section-ressources ul.liste-liens li:before {
        left: 15px;
        top: 18px;
    }
    .section-ressources a {
        color: white;
        display: block;
        background-color: #072144;
        font-size: 22px;
        line-height: 25.5px;
        padding: 11px 0 11px 35px;
        border-radius: 6px;
        text-decoration: none;
        transition: background-color 0.3s;
        width: 100%;
        
    }
    @media (min-width: 768px) {
        .section-ressources a {
            color: white;
            width: 98%;
        }
    }
    .section-ressources a:hover {
        background-color: var(--couleur-bleu-sombre);
    }
    
    
/*  Page Aide financière
    ========================================================================== */    
    
    #programmes label {
        margin-bottom: 15px;
    }

        
/*  ==========================================================================
    Décorations
    ========================================================================== */
    
    main {
      position: relative;
    }
    main::before {
        position: absolute;
        content: "";
        z-index: -1;
    }
    .texture-01::before {
        background-image: url(/media/qxdhh4ze/fond-01.svg);
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        max-width: 496px;
        height: 400px;
    }
    @media (min-width: 768px) {
        .texture-01::before {
            max-width: 620px;
            height: 500px;
        }
    }
    .texture-02::before {
        background-image: url(/media/emqlvwq3/fond-02.svg);
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        max-width: 443px;
        height: 485px;
    }
    @media (min-width: 768px) {
        .texture-02::before {
            max-width: 520px;
        height: 569px;
        }
    }
    .texture-droite::before {
        right: 0;
    }
    .texture-gauche::before {
        left: 0;
        transform: scaleX(-1);
    }
    .texture-petite::before {
        bottom: calc(-1 * var(--main-bottom-margin) - 350px);
    }
    .texture-moyenne::before {
        bottom: calc(-1 * var(--main-bottom-margin) - 250px);
    }
    .texture-grande::before {
        bottom: calc(-1 * var(--main-bottom-margin) - 250px);
    }
    @media (min-width: 768px) {
        .texture-petite::before {
            bottom: calc(-1 * var(--main-bottom-margin) - 300px);
        }
        .texture-moyenne::before {
            bottom: calc(-1 * var(--main-bottom-margin) - 200px);
        }
        .texture-grande::before {
            bottom: calc(-1 * var(--main-bottom-margin) - 100px);
        }
    }