@charset "UTF-8";
@import url("https://use.typekit.net/gly7mby.css");
@import url("reset.css");
:root {
    --clr-bleu: #2C2F74;
    --clr-turquoise: #7DD9DF;
    --clr-bleu-ciel: #D8F4F5;
    --clr-ocean: #046EB2;
    --clr-orange: #e24b11;
    --clr-link-hover: #0053a0;
    --clr-deep: #1f1f66;
    --rose-67: #f5bec3ac;
}

main.page-page,
main.page-projets,
main.page-actualite,
main.page-actualites,
main.page-organismes,
main.page-organisme {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

h1 {
    font-size: clamp(2.125rem, 0.931vw + 1.884rem, 3.188rem); /* 414 à 2240 de largeur, 34 à 51 px size */
    font-weight: 200;
    color: black;
    line-height: 1.2;
    margin: 0 0 14px;
    padding: 50px 0;
    position: relative;
    text-align: center;
}
@media (min-width: 768px) {
    h1 {
        text-align: left;
    }
}



h2, .h2 {
    color: var(--clr-bleu);
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 0.986vw + 1.245rem, 2.625rem); /* 414 à 2240 de largeur, 24 à 42 px size */
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 2.875rem;
    text-align: center;
}


section>div>h2:first-child {
    margin-top: 0;
}

h3, .h3 {
    color: var(--clr-bleu);
    font-size: 1.25rem;
    font-size: clamp(1.25rem, 0.438vw + 1.137rem, 1.75rem); /* 414 à 2240 de largeur, 20 à 26 px size */
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 2.19rem;
    text-align: center;
}

h4, .h4 {
    color: var(--clr-bleu);
    font-size: clamp(1.25rem, 0.11vw + 1.222rem, 1.375rem);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 1.375rem;
}

@media (min-width: 768px) {
    h1,
    h2, .h2,
    h3, .h3 {
        text-align: left;
    }
}



.inner > h2:first-child, .inner > h2:first-child,
.inner > h3:first-child, .inner > h3:first-child,
.inner > h4:first-child, .inner > h4:first-child {
    margin-top: 1.125rem;
}

p, ul {
    margin-top: 0;
    font-weight: 100;
    font-size: 1.125rem;
    color: var(--clr-bleu);
}


a {
    color: var(--clr-ocean);
    transition: color 0.3s;
    font-weight: 600;
}

a:hover, a:focus {
    color: var(--clr-link-hover);
}

.grand-texte p, 
.grand-texte ul,
p.grand-texte, 
span.grand-texte,
label.grand-texte {
    font-size: clamp(1.125rem, 0.329vw + 1.04rem, 1.5rem);  /* clamp 414 à 2240, 18 à 24 */
}

p.centre {
    text-align: center;
}
@media (max-width: 767px) {
    p.mobile-centre {
        text-align: center;
    }
}


section {
    padding: 1px 1rem;
}
section > div {
    margin: 0 auto;
    max-width: 900px;
}
.grandeur-large section > div {
    max-width: 1364px;
}

section.pleine-largeur {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    section {
        padding: 1rem 2rem 3rem;
    }
}
@media (min-width: 1200px) {
    section {
        padding: 1rem 3rem 1rem;
    }
}
section.pleine-largeur {
    padding-left: 0;
    padding-right: 0;
}
section.pleine-largeur > div {
    max-width: none;
}


/* Galerie d'images */

section.galerie-images {
    padding-left: 0;
    padding-right: 0;
}
section>div.pleine-largeur {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
@media (min-width: 767px) {
	section>div.pleine-largeur {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
}
@media (min-width: 1200px) {
	section>div.pleine-largeur {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
}


header > div {
    margin: 0 auto;
    padding: 1px 1rem;
    max-width: 1461px;
}
footer > div {
    margin: 0 auto;
    padding: 1rem 2rem 3rem;
    max-width: 1461px;
}


header  {
    background-color: var(--clr-bleu);
}



@media (min-width: 768px) {
    header > div {
        padding: 0 2rem;
    }
    footer > div {
        padding: 1rem 2rem 3rem;
    }
}

@media (min-width: 1200px) {
    header>div {
        padding: 0 3rem;
    }
    footer > div {
        padding: 3rem;
    }
}

/*
.btn-vedette {
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.btn-vedette::before {
    border-top: 0.41em solid white;
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition: right 0.4s cubic-bezier(0, 0.5, 0, 1), border-color 0.4s ease-out;
}

.btn-vedette:hover::before {
    border-color: white;
    right: 0;
}

.btn-vedette.is-active::before {
    border-color: white;
    right: 0;
}
*/

@media (min-width: 768px) {
    a.souligne {
        position: relative;
        text-decoration: none;
        z-index: 1;
    }
    
    a.souligne::before {
        border-top: 0.3rem solid white;
        content: "";
        position: absolute;
        right: 100%;
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: right 0.4s cubic-bezier(0, 0.5, 0, 1), border-color 0.4s ease-out;
    }
    
    a.souligne:hover::before {
        border-color: white;
        right: 0;
    }
    
    a.souligne.is-active::before {
        border-color: white;
        right: 0;
    }
}



.ms-slide .ms-slide-loading {
    background: url(/media/zkyjbhmh/loading-2.gif) no-repeat center white;
}

.ms-grab-cursor {
    cursor: url(/media/nj2ionoj/grab.png), move;
}

.ms-grabbing-cursor {
    cursor: url(/media/qmwpg5z0/grabbing.png), move;
}

.ms-slide-vcbtn-mobile .ms-vcbtn-txt {
    background: url(/media/g0hhaqp1/video-close-btn.png) no-repeat 0px 3px;
}

.ms-skin-default .ms-slide .ms-slide-vpbtn,
.ms-skin-default .ms-video-btn {
    background: url(/media/ytij24nv/light-skin-1.png) no-repeat -14px -150px;
}

.ms-skin-default .ms-slide .ms-slide-vcbtn {
    background: url(/media/ytij24nv/light-skin-1.png) no-repeat -24px -28px;
}

.ms-skin-default .ms-nav-next,
.ms-skin-default .ms-nav-prev {
    background: url(/media/ytij24nv/light-skin-1.png);
}

.ms-skin-default .ms-bullet {
    background: url(/media/ytij24nv/light-skin-1.png) no-repeat;
}

/* retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

    .ms-skin-default .ms-slide .ms-slide-vpbtn,
    .ms-skin-default .ms-video-btn,
    .ms-skin-default .ms-slide .ms-slide-vcbtn,
    .ms-skin-default .ms-nav-next,
    .ms-skin-default .ms-nav-prev,
    .ms-skin-default .ms-bullet {
        background-image: url(/media/d5givnzm/light-skin-1-retina.png);
    }
}

.ms-skin-default .ms-nav-next,
.ms-skin-default .ms-nav-prev {
    width: 50px;
    background-position: -80px -9px;
    height: 76px;
    left: 30px;
    margin-top: -38px;
}

@media (min-width: 1030px) {

    .ms-skin-default .ms-nav-next,
    .ms-skin-default .ms-nav-prev {
        left: -50px;
    }
}

.ms-skin-default .ms-nav-next {
    background-position: -80px -86px;
    left: auto;
    right: 30px;
}

@media (min-width: 1030px) {
    .ms-skin-default .ms-nav-next {
        right: -50px;
    }
}

.ms-slide-info {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    max-width: 900px;
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 400;
    line-height: 21px;
    min-height: auto !important;
    width: calc(100% - 60px) !important;
}

.ms-slide-info h2,
.ms-slide-info h3 {
    color: white;
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 600;
}

.ms-slide-info .ms-info p {
    color: white;
    padding: 0 30px 0;
}

.ms-slide-info .ms-info p:first-child {
    padding-top: 15px;
}


.transition {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    transform: scaleY(0) skewX(0);
    transform-origin: top left;
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
}

.transition-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}

.menu, .submenu {
    list-style: none;
    padding-left: 0;
}

.menu > li > a {
    color: white;
    font-size: 1.125rem;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
}
.submenu > li > a {
    color: white;
    font-size: 1rem;
    display: inline-block;
    padding: 5px;
    margin: 0 5px;
    text-decoration: none;
}
    
/* — Mobile & tablette — */
@media (max-width: 767px){
    .picto-menu{ 
        color: white;
        display: inline-block; 
        width: 56px; 
        padding: 5px; 
        background: transparent; 
        border: 0;
        position: absolute;
		right: 0;
		top: 0;
    }
    .burger {
        display: block;
        width: 46px;
        height: 46px;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: butt;
        fill: none;
    }
    
    .burger line {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      transition: transform .25s ease, opacity .2s ease, stroke-dashoffset .25s ease;
    }
    
    #entete-nav.active .burger-l1 { 
      transform: translateY(7px) rotate(45deg);
    }
    #entete-nav.active .burger-l3 { 
      transform: translateY(-7px) rotate(-45deg);
    }
    #entete-nav.active .burger-l2 { 
      opacity: 0;                     /* simple et efficace */
    }
    #entete nav{ 
        position: relative; 
        right: 0; 
        top: .5rem; 
    }
    .menu {
        display: block; 
        overflow: hidden; 
        height: 0; 
        opacity: 0;
        margin: 0;
		padding: 1rem;
        text-align: end;
        transition: opacity .25s ease, height .25s ease;
        pointer-events: none;
    }
    .menu > li > a {
        font-size: 1.25rem;
    }
    #entete-nav.active .menu {
        height: auto; 
        opacity: 1;
        top: 3rem;
		position: absolute;
		background-color: var(--clr-bleu);
		z-index: 2;
		width: 100%;
		min-width: 300px;
		right: -1rem;
		pointer-events: inherit;
    }

    .submenu{
        position: static; 
        display: none; 
        padding: .25rem 0 .5rem 1rem; 
        background: transparent; 
        box-shadow: none;
    }
    #entete-nav.active .submenu { 
        display:block;
        margin-top: -.5rem;
        margin-bottom: .5rem;
    }
}


/* — Desktop — */
@media (min-width: 768px){
    .picto-menu {
        display: none;
    }
    .menu { 
        display: flex; 
        align-items: center; 
        justify-content: flex-end;
        white-space: nowrap; 
     }
    .menu > li { 
        display: inline-block;
        position: relative;
    }
    .menu > li::before{
        content:""; 
        display: inline-block;
        width: 2px;
        height: 1rem; 
        background: #fff;
        margin: 0 clamp(0.25rem, 3.448vw + -1.405rem, 0.75rem); 
        vertical-align: middle;
    }
    .menu > li > a {
        padding: 10px;
    }

    .submenu {
        position: absolute;
        left: 4px;
        top: 100%;
        display: none; 
        padding: .5rem 1rem 0.75rem 1.6rem;
        min-width: 260px; 
        z-index: 50;
    }
    .submenu::before { 
        content:"";
        position:absolute; 
        top: -20px; 
        bottom:0; 
        left: 8px; 
        width: 2px; 
        background:#fff;
    }
    .submenu > li > a:hover {
        text-decoration: underline;
    }
    .has-sub:hover>.submenu,
    .has-sub:focus-within>.submenu{ 
        display:block; 
    }
}

/* Focus visibles */
#entete nav a:focus-visible,
#entete nav button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

#entete {
    margin-bottom: -1px;
}

#entete > div {
    display: grid;
    grid-template-columns: 70% 30%;
	min-height: 100px;
}
/*
@media (min-width: 600px) {
    #entete > div {
        min-height: 170px;
    }   
}
*/
@media (min-width: 768px) {
    #entete > div {
        min-height: 170px;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }   
}



#entete-logo {
    margin-top: 1rem;
}
#entete-logo img {
    max-width: 16rem;
}
@media (min-width: 768px) {
    #entete-logo img {
        max-width: 24rem;
        width: 92%;
    }
}

#logo-qvdl {
    max-width: 400px;
	width: 75%;
    display: inline-block;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    #logo-qvdl {
        margin-top: 0;
        margin-bottom: 3rem;
    }
}


#logo-developpement-culturel {
    max-width: 250px;
    width: 50%;
    	display: inline-block;
}

#logo-litterature-footer {
    width: 70%;
    left: -10px;
    position: relative;
}

@media (min-width: 768px) {
    #logo-litterature-footer {
        margin-left: 17%;
        width: 90%;
        left: 0%;
    }
}

#titre.titre-accueil {
    opacity: 0;
    background-image: url(/media/uivbdhdr/illustration-entete-accueil-mobile.svg);
    background-repeat: no-repeat;
    background-position: center bottom 10%;
    aspect-ratio: 1 / 1;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 600px) {
    #titre.titre-accueil {
        background-image: url(/media/53kfy2vq/illustration-entete-accueil.svg);
        background-position: center top;
        aspect-ratio: 2300 / 940;
    }   
}

@media (min-width: 2000px) {
    #titre.titre-accueil {
        background-image: url(/media/lokk3goq/illustration-entete-accueil-large.svg);
        aspect-ratio: 1020 / 320;
        margin-top: -1.5rem;
    }   
}

#titre.titre-accueil .texte-descriptif p {
    color: #fff;
    display: block;
    line-height: 1.25;
    font-size: clamp(1rem, 6.128vw + 0.081rem, 2.375rem);
    position: absolute;
    top: 10%;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    width: 100%;
}
@media (min-width: 600px) {
    #titre.titre-accueil .texte-descriptif p {
        font-size: clamp(1.125rem, 2.144vw + 0.57rem, 3.25rem);
        top: 14%;
        left: 50%;
        text-align: left;
        transform: none;
        width: fit-content;
    }  
}
@media (min-width: 1600px) {
    #titre.titre-accueil .texte-descriptif p {
        top: 21%;
    }  
}
@media (min-width: 2000px) {
    #titre.titre-accueil .texte-descriptif p {
        top: 18%;
    }  
}

#titre h1 {
    color: white;
}

#titre.entete-seul h1 {
  margin-right: auto;
  padding: 30px 0 20px;
}

.entete.entete-seul > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.entete.entete-seul + section > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 1250px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding: 4em 8em 3em;
  overflow: hidden;

  -webkit-clip-path: polygon(
    0 0,
    calc(100% - 90px) 0,
    100% 120px,
    100% 100%,
    0 100%
  ) !important;
  clip-path: polygon(
    0 0,
    calc(100% - 90px) 0,
    100% 120px,
    100% 100%,
    0 100%
  ) !important;
}



.entete[class*='image-'] h1 {
    max-width: 100%;
    padding: 50px 0 15px;
	position: relative;
}
@media (min-width: 768px) {
    .entete[class*='image-'] h1 {
        aspect-ratio: 124 / 28;
        min-height: 14rem;
        padding: 50px 55% 50px 0;
    }
}

.entete.image-chateau h1::after {
    background-image: url(/media/fezjtf54/illustration_entete_chateau_mobile.svg);
}
@media (min-width: 768px) {
    .entete.image-chateau h1::after {
        background-image: url(/media/qa5bmuae/illustration_entete_chateau.svg);
        
    }   
}
.entete.image-porte h1::after {
    background-image: url(/media/04ei112f/illustration_entete_porte_mobile.svg);
}
@media (min-width: 768px) {
    .entete.image-porte h1::after {
        background-image: url(/media/rjlkzqwt/illustration_entete_porte.svg);
        
    }   
}
.entete.image-livre h1::after {
    background-image: url(/media/bmuatv4p/illustration_entete_livre_mobile.svg);
}
@media (min-width: 768px) {
    .entete.image-livre h1::after {
        background-image: url(/media/dzxb423g/illustration_entete_livre.svg);
        
    }   
}
.entete.image-crayon h1::after {
    background-image: url(/media/w3jalsu4/illustration_entete_crayon_mobile.svg);
}
@media (min-width: 768px) {
    .entete.image-crayon h1::after {
        background-image: url(/media/2mkgik45/illustration_entete_crayon.svg);
        
    }   
}
.entete.image-porte-voix h1::after {
    background-image: url(/media/dt2bnq0b/illustration_entete_porte-voix_mobile.svg);
}
@media (min-width: 768px) {
    .entete.image-porte-voix h1::after {
        background-image: url(/media/3pnn4rur/illustration_entete_porte-voix.svg);
        
    }   
}



.entete[class*='image-'] h1::after {
    content: "";
    display: block;
	position: relative;
	background-size: cover;
	aspect-ratio: 2 / 1;
	width: 100%;
	margin-top: 25px;
}
@media (min-width: 768px) {
    .entete[class*='image-'] h1::after {
        position: absolute;
    	background-size: cover;
    	aspect-ratio: 124 / 28;
    	bottom: 0;
    	left: 0;
    	width: 90%;
    	margin-top: 0;
    }
}
@media (min-width: 1470px) {
    .entete[class*='image-'] h1::before {
        content: "";
    	border-bottom: 3px solid white;
    	left: -50%;
    	position: absolute;
    	bottom: 46px;
    	width: 50%;
    }
}

@media (min-width: 768px) {
    .entete.chevauchement {
        min-height: 585px;
    }
    .entete.chevauchement + main {
        margin-top: -30rem;
        position: relative;
    }
    .entete.chevauchement + main > section:first-child {
        background-color: white;
    	max-width: 1364px;
    	margin: 0 auto;
    	padding-top: 8rem;
    }
    .entete.chevauchement + main.grandeur-large > section:first-child {
    	max-width: 1880px;;
    }
}
@media (min-width: 1280px) {
     .entete.chevauchement + main > section:first-child {
    	clip-path: polygon(0 0, calc(100% - 125px) 0, 100% 250px, 100% 100%, 0 100%);
    }
}

.entete .image {
    position: relative;
    width: 100%;
}
.entete .image {
    opacity: 0;
    transform: translateY(15px);
}



.entete .image > img {
    display: block;
    object-fit: cover;
    width: calc(100% - clamp(0.625rem, 1.429vw + 0.268rem, 1.25rem));
    aspect-ratio: 21 / 9;

    /* notch dimensions */
    --notch-x: 13.75%;   /* largeur du biseau */
    --notch-y: 60%;    /* hauteur du biseau */

    margin-right: calc(-1 * var(--notch-x));

    clip-path: polygon(
        0 0,                             /* coin haut-gauche */
        calc(100% - var(--notch-x)) 0,   /* début de la diagonale vers la droite */
        100% var(--notch-y),             /* fin de la diagonale vers le bas */
        100% 100%,                       /* bas droit */
        0 100%                           /* bas gauche */
    );
}

.entete .image-decoration {
    content: "";
    background-image: url(/media/aqrf0ijm/entete-coin-image.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 14%;
	height: 78%;
    top: 0;
    right: 0;
}









.layout-special {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.colonne-gauche {
    flex: 1;
    min-width: 300px;
}

.colonne-gauche img {
    width: 100%;
    height: auto;
}

.colonne-droite {
    flex: 1.2;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}


.grid-row {
    flex: 1;
    display: flex;
}

.grid-col {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
}

.bottom-row .grid-col {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: visible;
}

.bottom-row {
    margin-top: -55px;
    position: relative;
    z-index: 2;
}

.bottom-row .grid-col img {
    width: 110%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative;
    transform: translateY(-41px);
}

@media (max-width: 768px) {
    .layout-special {
        flex-direction: column;
        width: 100%;
        background: var(--clr-bleu);
    }

    .colonne-gauche,
    .colonne-droite {
        width: 100%;
    }

    .colonne-gauche img {
        height: auto;
    }
}
#pieddepage {
    background-color: var(--clr-bleu);
    color: white;
    font-size: 1rem;
}
#pieddepage h2 {
    color: white;
    font-size: 1.75rem;
    margin-bottom: 1.4525rem;
}
#pieddepage p {
    color: white;
}
#pieddepage p:first-child {
    margin-top: 1rem;
}

#pieddepage a:not(.btn) {
    color: white;
    text-decoration: none;
    position: relative;
    line-height: 34px;
    display: inline-block;
}

#pieddepage a:not(.btn)::after {
    border-top: 3px solid white;
    content: "";
    position: absolute;
    right: 100%;
    bottom: 0.1rem;
    left: 0.5px;
    transition: right 0.4s cubic-bezier(0, 0.5, 0, 1), border-color 0.4s ease-out;
}

#pieddepage a:not(.btn):hover::after {
    border-color: white;
    right: 0;
}

#pieddepage li {
    font-weight: 800;
}

#pieddepage nav ul li:not(:first-child):before {
    color: rgba(255, 255, 255, 0.7);
    padding: 0 8px;
	content: " | ";
}

#pieddepage .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

@media (min-width: 768px) {
    #pieddepage .flex {
        flex-wrap: nowrap;
    }
}


#pieddepage .flex>div {
    flex-basis: 100%;
}

@media (min-width: 768px) {
    #pieddepage .flex>div:first-child {
        flex-basis: 60%;
    }

    #pieddepage .flex>div:last-child {
        flex-basis: 40%;
    }
}
#pieddepage .flex>div:nth-child(2) {
        text-align: center;
    }
@media (min-width: 768px) {
    #pieddepage .flex>div:nth-child(2) {
        text-align: right;
    }
}


#pieddepage nav ul {
	padding: 0;
}
@media (max-width: 767px) {
    #pieddepage nav ul {
    	text-align: center;
    }
}
@media (min-width: 1100px) {
	#pieddepage nav ul {
		white-space: nowrap;
	}
}

	#pieddepage nav ul li {
		display: inline-block;
	}



.pictos-fb-ig {
    display: flex;
    margin-top: 4rem;
    
}
@media (max-width: 767px) {
    .pictos-fb-ig {
        justify-content: center;
    }
}
.pictos-fb-ig a {
    line-height: 34px;
    padding: 5px;
}

.pictos-fb-ig img {
    display: block;
    width: 46px;
}

.texte-vedette {
    font-size: 34px;
    font-weight: 200;
    color: white;
    line-height: 1;
    margin: 0 auto 14px;
    padding: 50px 0;
    position: relative;
    text-transform: uppercase;
    width: fit-content;
}

@media (min-width: 768px) {
    .texte-vedette {
        font-size: 40px;
    }
}

@media (min-width: 1000px) {
    .texte-vedette {
        font-size: 54px;
    }
}

.texte-vedette::before,
.texte-vedette::after {
    content: "";
    background-repeat: no-repeat;
    width: 75px;
    height: 80px;
    position: absolute;
}

.texte-vedette::before {
    top: 21px;
    left: -52px;
}

.texte-vedette::after {
    right: -52px;
    bottom: 12px;
}


section>div>h3:first-child {
    margin-top: 0;
}

.btn {
    background-color: transparent;
    color: var(--clr-bleu);
    border: 2px solid var(--clr-bleu);
    border-radius: 100vmax;
    display: inline-block;
    font-weight: 600;
    line-height: 1.25;
    padding: .65rem 1.5rem;
    position: relative;
    text-decoration: none;
    transition: background-color 0.25s ease-in, color  0.25s ease-in, border-color 0.25s ease-in;
}
@media (min-width: 430px) {
   .btn {
        padding-left: 3rem;
        padding-right: 3rem;
    } 
}

.btn:hover {
    background-color: var(--clr-bleu);
    color: white;
    border-color: white;
}

/* Boutons dans le contenu RichText */
span.btn > a {
    color: var(--clr-bleu);
    text-decoration: none;
    transition: 0.25s color ease-in-out;
}
span.btn:hover > a {
    color: white;
}

.btn-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: middle;
}

.btn.picto-fleche {
    padding-left: 2rem;
    padding-right: 4rem;
}

.btn.picto-fleche:after {
    content: "";
	background-image: url(/media/x2sbahqe/fleche.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.875rem 1.5625rem;
	width: 1.875rem;
	height: 1.5625rem;
	padding-left: 3.25rem;
	position: absolute;
    top: 50%;
	transform: translateY(-50%);
	transition: filter 0.25s ease-in;
}
.btn.picto-fleche:hover:after {
  filter: brightness(0) invert(1);
}


.clr-orange .btn,
footer .btn {
    color: white;
    border-color: white;
}
.clr-orange .btn:hover {
    color: var(--clr-orange);
    background-color: white;
}

footer .btn:hover {
    color: var(--clr-bleu);
    background-color: white;
}




.photo>div {
    margin-top: 1em;
    margin-bottom: 1em;
}

.photo.large>div {
    padding-left: 0;
    padding-right: 0;
}

.photo figure {
    margin: 0;
}

.photo figure img {
    width: 100%;
}

.photo figure figcaption {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video h2:first-child,
.video h3:first-child {
    margin-top: 0;
}

.video.large>div {
    padding-left: 0;
    padding-right: 0;
}

.deux-images div {
    align-items: baseline;
    display: flex;
}

.deux-images div figure:first-child {
    margin-right: 1.5em;
}

@media (min-width: 768px) {
    .deux-images div figure:first-child {
        margin-right: 2.5em;
    }
}

.deux-images div figure figcaption {
    color: #555;
    font-size: 0.85rem;
    line-height: 1.15;
    text-align: center;
}

.exergue {
    border-bottom: 2px solid;
    color: var(--clr-orange);
    display: block;
	font-weight: 700;
	font-size: clamp(1.25rem, 0.055vw + 1.236rem, 1.313rem);
	padding-bottom: 1rem;
	text-align: center;
}
@media (min-width: 768px) {
    .exergue {
    	padding-bottom: 1.875rem;
    	text-align: left;
    	margin-bottom: 3.125rem;
    }
}

.grand-texte .exergue {
    font-size: clamp(1.25rem, 0.657vw + 1.08rem, 2rem);
}

.encadre {
    color: var(--clr-bleu);
    font-size: 1.15em;
    margin-bottom: 19px;
    padding: 0;
}

@media (min-width: 768px) {
    .encadre {
        margin-bottom: 23px;
    }
}

.encadre > div {
    background-color: var(--clr-bleu-ciel);
    padding: 1.5em 17px 1px;
}
.encadre.style2 > div {
    background-color: transparent;
    border: 2px solid var(--clr-bleu);
}

@media (min-width: 768px) {
    .encadre > div {
        padding: 1.5rem 2.5rem calc(1.5rem - 1.25em);
    }
}

.encadre h2:first-child,
.encadre h3:first-child {
    margin-top: 0.7em;
}



.liste-projets .projet {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "image" "contenu";
    column-gap: 2em;
    margin-top: 2.5em;
    margin-bottom: 3.5rem;
	padding-bottom: 3rem;
	border-bottom: 2px solid var(--clr-bleu);
}
.liste-projets .projet:last-child {
	border-bottom: none;
}

.liste-projets .projet .projet-image {
    grid-area: image;
}

.liste-projets .projet .projet-contenu {
    grid-area: contenu;
}

@media (min-width: 768px) {
    .liste-projets .projet {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "image contenu";
    }

    .liste-projets .projet:nth-child(even) {
        grid-template-areas: "contenu image";
    }
}

.liste-projets .projet h2 {
    margin-top: 0;
    line-height: 1.05;
}

#section-evenement {
    margin-top: 3rem;
}
#section-evenement h2 {
    margin-bottom: 0;
}
.evenements {
    margin: 1rem 0;
}

.evenements .evenement {
    background: var(--clr-bleu);
    color: white;
    display: block;
    text-decoration: none;
    transition: 0.3s background ease-in-out;
}

.evenements .evenement:hover {
    background: var(--clr-link-hover);
}

.evenements .evenement img {
    display: block;
    width: 100%;
}

.evenements .evenement p {
    color: white;
    padding: 1rem;
}


@media (max-width: 900px) {
    section.bloc-vedette {
        flex-direction: column;
        min-height: auto;
    }

    section.bloc-vedette::before {
        clip-path: none;
        inset: 0;
    }

    section.bloc-vedette .image,
    section.bloc-vedette .fond-orange {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
}

table {
    width: 100%;
    text-align: left;
}

table tbody tr th,
table tbody tr td {
    border-top: 1px solid #ede3c1;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0.6em 0.5em;
    line-height: 1.35;
}

table tbody tr:nth-child(even) th,
table tbody tr:nth-child(even) td {
    background-color: rgba(237, 227, 193, 0.7);
}

table tbody tr:last-child th,
table tbody tr:last-child td {
    border-bottom: 1px solid #ede3c1;
}

.liste {
    max-width: 956px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "image" "contenu";
    column-gap: 2em;
    margin: 2.5em auto 3em;
    padding: 0 1em;
}

.liste .liste-photo {
    grid-area: image;
}

.liste .liste-contenu {
    grid-area: contenu;
    align-self: center;
}

@media (min-width: 768px) {
    .liste .liste-contenu {
        min-height: 150px;
    }
}

@media (min-width: 768px) {
    .liste {
        grid-template-columns: 1fr 2fr;
        grid-template-areas: "image contenu";
    }

    .liste:nth-child(even) {
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "contenu image";
    }
}

.liste h2 {
    margin-top: 0;
    line-height: 1.05;
}

@media (min-width: 768px) {
    .liste h2 {
        margin-top: -10px;
    }
}

.liste h3 {
    margin-top: 0;
}

.liste a {
    bottom: -2px;
    font-weight: 600;
    color: black;
}

.liste a::before {
    border-top: 0.35em solid var(--clr-bleu);
    left: -5px;
    right: -5px;
    transition: border 0.2s;
}

.liste a:hover::before {
    border-top: 1.25em solid var(--clr-bleu);
}

.liste a[target="_blank"]::after {
    content: "";
    background-image: url(/media/lysddrga/picto-site-externe.svg);
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    position: relative;
    top: 6px;
    left: 2px;
}

.souspages {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.souspage {
    background: #c2cdd9;
    color: black;
    display: block;
    position: relative;
    text-decoration: none;
    flex-basis: 100%;
    transition: 0.3s background ease-in-out;
}

.souspage:hover {
    background: #9aacbf;
}

.souspage img {
    display: block;
    width: 100%;
    max-height: 150px;
    object-fit: cover;
}

.souspage p {
    font-size: 0.85em;
    line-height: 1;
    margin: 0.8em;
}

.souspage .btn-savoir-plus {
    opacity: 0;
    font-size: 0.7em;
    font-weight: 800;
    margin: 0;
    padding: 25px 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
    background: rgba(237, 227, 193, 0.7);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 50;
    clip-path: polygon(25% 0%, 100% 0, 100% 48%, 75% 100%, 0 100%, 0 52%);
    transition: opacity 0.3s, clip-path 0.4s ease-out;
}

.souspage:hover .btn-savoir-plus {
    opacity: 1;
    clip-path: polygon(0 0%, 100% 0, 100% 48%, 100% 100%, 0 100%, 0 52%);
}

.souspage>a {
    border-bottom: 15px solid white;
}

@media (min-width: 390px) {
    .souspage {
        flex-basis: 50%;
    }
}

@media (min-width: 390px) {
    .souspages {
        margin-left: -5px;
        margin-right: -5px;
    }
}

@media (min-width: 390px) {
    .souspages>a {
        border: 5px solid white;
    }
}

@media (min-width: 390px) {
    .souspage img {
        max-height: 125px;
    }
}

@media (min-width: 590px) {
    .souspage {
        flex-basis: 33.333333%;
    }
}

@media (min-width: 590px) {
    .souspage img {
        max-height: none;
    }
}

@media (min-width: 768px) {
    .souspage {
        flex-basis: 25%;
    }
}

@media (min-width: 990px) {
    .souspage {
        flex-basis: 20%;
    }
}


@media (min-width: 1200px) {
    #projets > div {
        max-width: 1250px;
    }
}
#liste-projets-accueil .projets {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
    position: relative;
}
#liste-projets-accueil .projets > .projet  {
    text-decoration: none;
    padding-bottom: 3.125rem;
}

#liste-projets-accueil .projets > .projet  {
    background: var(--clr-deep);
}
#liste-projets-accueil .projets > .projet:nth-child(even) {
    background: var(--clr-ocean);
}

.card-content {
    position: relative;
    z-index: 4;
}

#liste-projets-accueil .projets > .projet .card-content h3,
#liste-projets-accueil .projets > .projet .card-content p, 
#liste-projets-accueil .projets > .projet .card-content div{
    color: white;
}

.card-content h3 {
    text-wrap-style: balance;
    margin-top: 0;
}
.card-content {
    padding: 2rem 2rem 0;
}
.card-content .description {
    font-weight: 100;
    font-size: 1.125rem;
    color: var(--clr-bleu);
}
.card-content .item-date {
    font-weight: 400;
	margin-bottom: .25rem;
}
#liste-projets-accueil .projets .btn-savoir-plus {
    background-repeat: no-repeat;
    width: 30px;
    height: 25px;
    background-image: url(/media/r2ijzr5y/fleche-blanche.svg);
    margin-left: auto;
    margin-top: 2rem;
    position: absolute;
	bottom: 0;
	right: 2rem;
	transition: right .3s ease-in-out;;
} 
#liste-projets-accueil .projets .projet:hover .btn-savoir-plus,
#liste-projets-accueil .projets .projet:focus .btn-savoir-plus {
    right: 1.5rem;
} 

#liste-projets-accueil .projets > .projet img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    #liste-projets-accueil .projets {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    #liste-projets-accueil .projet h3 {
        font-size: 1.25rem;
    }

    #liste-projets-accueil .projets > .projet {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    #liste-projets-accueil .projets > .projet img {
        height: 250px;
    }

    .card-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: normal;
    }
}
@media (min-width: 900px) { 
    #liste-projets-accueil .projets {
        gap: 2rem;
    }
}

@media (min-width: 1600px) {
    #liste-projets-accueil > div {
        max-width: 1461px;
    }
    #liste-projets-accueil .projets {
        grid-template-columns: 400px 400px 400px;
        justify-content: center;
        align-items: stretch;
        width: 100%;
    }
    #liste-projets-accueil .projets h3 {
        font-size: 1.75rem;
    }

    #liste-projets-accueil .projets > .projet:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #liste-projets-accueil .projets > .projet:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    #liste-projets-accueil .projets > .projet:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    #liste-projets-accueil .projets > .projet:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
    }
}

.appel-projet {
    padding-bottom: 1em;
}
.tiroir {
    margin-bottom: 0;
    font-size: 2.625rem;
    line-height: 1.5;
}

.tiroir button {
  all: inherit;
  cursor: pointer;
  background-color: var(--clr-turquoise);
  font-size: 18px;
  font-weight: 400;
  padding: 1rem 4rem 1rem 2.5rem;
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 25px;
  transition: background-image 0.3s;
  text-align: left;
}
.tiroir button:focus { outline: 2px solid; }


.tiroir button::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 30px;
  height: 30px;
  background-color: rgb(255 255 255 / 1);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  pointer-events: none;
}

.tiroir button[aria-expanded="false"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}
.tiroir button[aria-expanded="true"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

.tiroir-contenu {
  overflow: clip;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 250ms ease, opacity 250ms ease;
}
.tiroir-contenu[aria-hidden="false"] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.tiroir-inner { 
    
    min-height: 0; 
}
.tiroir-texte-wrapper {
    background-color: var(--clr-bleu-ciel);
    padding: 2.5rem;
    width: calc(100% - 30px);
}
.item-date-limite {
    color: var(--clr-bleu);
}
@media (max-width: 766px) {
    .item-lien {
        margin-top: 1.5rem;
    }
}
@media (min-width: 767px) {
    .tiroir-items-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rem;
    }
}
@media (min-width: 975px) {
    .item-date-limite {
        background-image: url(/media/4hghzm23/date-limite-de-depot.svg);
        background-repeat: no-repeat;
    	background-position: left bottom;
    	background-size: cover;
    	padding: 20px;
    }
    .item-date-limite > div {
        margin-left: 7rem;
        margin-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .tiroir-contenu { transition: none; }
}


/* Encadrés */

.accent {
    padding: 2rem 2rem;
}
@media (min-width: 768px) {
    .accent {
        padding: 5rem 3rem;
    }
}


/* Encadré orange */
.accent.clr-orange {
    background-color: var(--clr-orange);
    color: white;
}
.accent.clr-orange * {
    color: white;
}

.accent.gap-top-left {
    position: relative;
    margin-left: 0;
}
@media (min-width: 768px) {
    .accent.gap-top-left {
       margin-left: 10%; 
       padding: 5rem 3rem 5rem clamp(8rem, 24vw + -5.5rem, 14rem); /* clamp: de 900px à 1300px de largeur, de 128px à 224px de marge à gauche */
    }
    .accent.gap-top-left .inner {
        max-width: 850px;
        margin-left: 0;
    }
}
@media (min-width: 1280px) {
    .accent.gap-top-left {
       margin-left: 25%; 
    }
}
@media (min-width: 1800px) {
    .accent.gap-top-left {
       margin-left: clamp(28.125rem, 75vw + -56.25rem, 75rem);
    }
}
.accent.gap-top-left::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 35px;
    height: 70px;
    background-color: rgb(255 255 255 / 1);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
}

@media (min-width: 768px) {
    .accent.gap-top-left::before {
        width: 135px;
        height: 60%;
    }
}


/* Encadré turquoise */
.accent.clr-turquoise {
    background: var(--clr-turquoise);
    color: var(--clr-bleu);
}

.grandeur-large .accent.clr-turquoise p {
    font-weight: 600;
}
.grandeur-large .accent.clr-turquoise > div {
    padding-right: 12%;
}

/* Encadré bleu */
.accent.clr-bleu {
    background: var(--clr-bleu);
}
.accent.clr-bleu * {
    color: white;
}


.accent.gap-bottom-right {
    position: relative;
}
@media (min-width: 768px) {
    .accent.gap-bottom-right {
       margin-right: 10%; 
       padding: 5rem clamp(8rem, 24vw + -5.5rem, 14rem) calc(5rem - 18px) 2rem;  /* clamp: de 900px à 1300px de largeur, de 128px à 224px de marge à gauche */
    }
    .accent.gap-bottom-right .inner {
        max-width: 900px;
        margin-right: 0;
    }
    .grandeur-large .accent.gap-bottom-right .inner {
        max-width: 1364px;
    }
}
@media (min-width: 1280px) {
    .accent.gap-bottom-right {
       margin-right: 25%; 
    }
}
@media (min-width: 970px) {
    .accent.gap-bottom-right.is-aligned {
        margin: 0 auto;
        max-width: 900px;
        padding-left: 0;
       	margin-top: 3rem;
		margin-bottom: 3rem;
    }
    .grandeur-large .accent.gap-bottom-right.is-aligned {
        max-width: 1364px;
        margin-top: 5rem;
		margin-bottom: 5rem;
		padding-left: 2rem;
    }
    .accent.clr-turquoise.gap-bottom-right.is-aligned > div::after {
       content: "";
       background: var(--clr-turquoise);
       position: absolute;
       left: 0;
       width: 250%;
       height: 100%;
       top: 0;
	   z-index: -1;
	   transform: translateX(-100%);
    }
}
@media (min-width: 1470px) {
    .grandeur-large .accent.gap-bottom-right.is-aligned {
		padding-left: 0;
    }
}
@media (min-width: 1600px) {
    .grandeur-large .accent.clr-turquoise.gap-bottom-right.is-aligned {
        padding-bottom: 16rem;
    }
    .grandeur-large .accent.clr-turquoise.gap-bottom-right.is-aligned .inner .inner-image {
        background-image: url(/media/izibxmbe/illustration_bloc_turquoise.svg);
        position: absolute;
        width: 90%;
        aspect-ratio: 1281 / 280;
        background-size: cover;
        bottom: 3rem;
    }
    .grandeur-large .accent.clr-turquoise.gap-bottom-right.is-aligned .inner .inner-image::before {
        content: "";
    	border-bottom: 3px solid var(--clr-bleu);
    	left: -50%;
    	position: absolute;
    	bottom: 10px;
    	width: 50%;
    }
}
.accent.gap-bottom-right::before {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 35px;
    height: 70px;
    background-color: rgb(255 255 255 / 1);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    pointer-events: none;
}
@media (min-width: 768px) {
    .accent.gap-bottom-right::before {
        width: 129px;
		height: 231px;
    }
}
@media (min-width: 1100px) {
    .accent.gap-bottom-right::after {
        content: "";
        position: absolute;
        background-image: url(/media/2kffrrbl/encadre-coin-image.svg);
        background-repeat: no-repeat;
        background-position: center;
        width: 191.438px;
		height: 300.422px;
        bottom: -60px;
		right: 0;
    }
}


.accent.gap-bottom-left {
    position: relative;
}
@media (min-width: 768px) {
    .accent.gap-bottom-left {
     
       padding: 5rem 3rem 5rem clamp(8rem, 24vw + -5.5rem, 14rem);  /* clamp: de 900px à 1300px de largeur, de 128px à 224px de marge à gauche */
    }
    .accent.gap-bottom-left .inner {
        max-width: 900px;
        margin-left: 0;
    }
}

.accent.gap-bottom-left::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 35px;
    height: 70px;
    background-color: rgb(255 255 255 / 1);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    pointer-events: none;
}
@media (min-width: 768px) {
    .accent.gap-bottom-left::before {
        width: 129px;
		height: 231px;
    }
}
@media (min-width: 1100px) {
    .accent.gap-bottom-left::after {
        content: "";
        position: absolute;
        background-image: url(/media/nbzjzrpn/encadre-coin-image-2.svg);
        background-repeat: no-repeat;
        background-position: center;
        width: 191.438px;
		height: 300.422px;
        bottom: -60px;
		left: 0;
    }
}

#liste-projets-accueil-entete .accent.clr-turquoise > div {
    padding-right: 12%;
}

#liste-projets-accueil-entete p {
    font-weight: 100;
}
@media (min-width: 768px) {
    #liste-projets-accueil-entete {
        padding-left: 3rem;   
    }
}
@media (min-width: 1600px) {
    #liste-projets-accueil-entete {
        padding-bottom: 12rem;
    }
    #liste-projets-accueil-entete .inner {
        padding-right: 21%;
    }


    #liste-projets-accueil-entete .inner{
    	position: relative;
    }
    #liste-projets-accueil-entete .inner::after{
    	content: "";
    	position: absolute;
    	right: -25%;
    	bottom: -4rem;
    	width: 125%;
    	aspect-ratio: 1362 / 242;
    	background: url(/media/3x5nacd4/illustration_accueil_projets.svg) no-repeat right center / contain;
    	pointer-events: none;
    }
    #liste-projets-accueil-entete .inner h2 {
        margin-top: 0;
    }
    
    
    #liste-projets-accueil {
        margin-top: -9rem;
    }
}
#liste-projets-accueil p.centre {
    margin-top: 2rem;
    margin-bottom: 6.25rem;
}

/* ====== Bloc vedette : layout ====== */
.bloc-vedette {
    display: grid;
    padding: 0;
}
.bloc-vedette > div {
    max-width: none;
}
.bloc-vedette .image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1445 / 800;
}



/* ====== Desktop : 2 colonnes + notch qui révèle l'image ====== */
@media (min-width: 900px) {
      .bloc-vedette {
        /* image ~33%, encadré ~67% */
        grid-template-columns: 1fr 2fr;
        align-items: stretch;
      }
    
      .bloc-vedette .image {
        grid-column: 1;
        position: relative;
        min-height: 420px; /* ajuste au besoin */
      }
    
      .bloc-vedette .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      .bloc-vedette .accent {
        grid-column: 2;
        position: relative;
        z-index: 1;
        margin-left: -90px;
      }



    .bloc-vedette .accent.gap-top-left {
        /* choose values: y > x */
        --notch-x: 135px;   /* width of the cut */
        --notch-y: 60%;  /* height of the cut */

        /* overlap to reveal the image behind (adjust as needed) */
        margin-left: calc(-1 * var(--notch-x));

        /* notch: from (x,0) to (0,y) */
        clip-path: polygon(
            var(--notch-x) 0,
            100% 0,
            100% 100%,
            0 100%,
            0 var(--notch-y)
        );
        
        width: calc(100% + var(--notch-x));
  }


    /* En desktop on ne veut PLUS le triangle blanc au-dessus */
    .bloc-vedette .accent.gap-top-left::before {
        content: none;
    }
}

.date + h2 {
    margin-top: 0;
}

.page-actualites .projet h2 {
    margin-bottom: 1rem;
}
.page-actualites .projet .item-date {
    font-size: 1.375rem;
    font-weight: 600;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
}
#page-accueil .actualites {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
    position: relative;
}


@media (min-width: 1364px) {
    #page-accueil .actualites {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (min-width: 1364px) {
    #section-actualites-intro {
        padding-bottom: 14rem;
    }
    #page-accueil .actualites {
        margin-top: -12rem;
    }
}
#page-accueil .actualite {
    background: var(--clr-turquoise);
    display: block;
    text-decoration: none;
	padding-bottom: 3.125rem;
	position: relative;
}
#page-accueil .actualite img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    #page-accueil .actualite img {
        height: 250px;
    }
}
#page-accueil .actualite .btn-savoir-plus {
    background-repeat: no-repeat;
    width: 30px;
    height: 25px;
    background-image: url(/media/x2sbahqe/fleche.svg);
    margin-left: auto;
    margin-top: 2rem;
    position: absolute;
	bottom: 0;
	right: 2rem;
	transition: right .3s ease-in-out;
} 

#page-accueil .actualite:hover .btn-savoir-plus,
#page-accueil .actualite:focus .btn-savoir-plus {
	right: 1.5rem;
} 

@media (min-width: 1364px) {
    #page-accueil #section-actualites > div {
        max-width: 1364px;  
    }
}
#page-accueil #section-actualites p.centre {
    margin-top: 2rem;
    margin-bottom: 6.25rem;
}


.organismes {
    display: grid;
    gap: 31px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.organisme {
    background: var(--clr-bleu);
    color: white;
    display: block;
    position: relative;
    text-decoration: none;
    flex-basis: 100%;
    transition: 0.3s outline;
    outline: 2px solid transparent;
}
.organisme:hover,
.organisme:focus {
    outline: 2px solid black;
    color: white;
}
.organisme img {
    display: block;

    object-fit: cover;
    margin: 1px;
	width: calc(100% - 2px);
}
.organisme p {
    font-size: 0.85em;
    line-height: 1;
    margin: 0.8em;
}

.organisme .titre {
    padding: .5rem 2rem;
    font-size: 1.125rem;
    font-weight: 100;
}
@media (min-width: 768px) {
    .organisme .titre {
        min-height: 70px;
    }
}

/* Couleur par défaut (clair) */
.organisme {
    background: var(--clr-ocean);
}
@media (min-width: 1025px) {
    /* ===== 4 colonnes =====
       Motif sur 2 rangées (8 items) :
       D L D L | L D L D
       => foncé aux positions 1, 3, 6, 8 puis répétition */
    .organismes > :is(
        :nth-child(8n+1),
        :nth-child(8n+3),
        :nth-child(8n+6),
        :nth-child(8n+8)
    ) {
        background: var(--clr-bleu);
    }
}

/* ===== 3 colonnes (tablette) ===== */
@media (min-width: 821px) and (max-width: 1024px) {
    .organismes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Motif sur 2 rangées (6 items) :
       D L D | L D L
       => foncé aux positions 1, 3, 5 puis répétition */
    .organismes > :is(
        :nth-child(6n+1),
        :nth-child(6n+3),
        :nth-child(6n+5)
    ) {
        background: var(--clr-bleu);
    }
}

/* ===== 2 colonnes (entre tablette et mobile) ===== */
@media (min-width: 641px) and (max-width: 820px) {
    .organismes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* D L | L D -> foncé : 1, 4, 5, 8 ...
       (= positions 4n+1 et 4n) */
    .organismes > :is(
        :nth-child(4n+1),
        :nth-child(4n)
    ) {
        background: var(--clr-bleu);
    }
}

/* ===== 1 colonne (mobile) ===== */
@media (max-width: 640px) {
    .organismes {
        grid-template-columns: 1fr;
    }

    /* Simple alternance verticale */
    .organismes > :nth-child(odd) {
        background: var(--clr-bleu);
    }

    .organismes > :nth-child(even) {
        background: var(--clr-ocean);
    }
}


.page-organismes .organismes-filtres {
    padding-top: 0;
}
.page-organismes .organismes-filtres .organismes-filter {
    display: grid;
	grid-template-columns: 1fr 1fr;
    align-items: center;
	width: min-content;
    background-color: #7DD9DF;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem 3.5rem 1rem 2rem;
    clip-path: polygon(0 0, 100% 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}

.page-organismes .organismes-filtres .organismes-filter label {
    display: none;
}
@media (min-width: 768px) {
    .page-organismes .organismes-filtres .organismes-filter label {
        display: block;
        color: var(--clr-bleu);
        white-space: nowrap;
        margin-right: 1rem;
    }  
}
.page-organismes .organismes-filtres .organismes-filter select {
    padding: .25rem 1rem .25rem 1rem;
	font-size: 1.125rem;
}
@media (min-width: 768px) {
    .page-organismes .organismes-filtres .organismes-filter select {
        padding: .5rem 3rem .5rem 1rem;
    }   
}
.page-organisme .categorie {
    background-color: var(--clr-orange);
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    display: inline-block;
    padding: .25rem 1.5rem .25rem .5rem;
    clip-path: polygon(0 0, 100% 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
}
@media (min-width: 768px) {
    .page-organisme .categorie {
        padding: 1rem 3.5rem 1rem 2rem;
    }   
}

.page-organisme .accent h3 {
    margin-top: 0;
}
@media (min-width: 768px) {
    .page-organisme .accent h3 {
        margin-bottom: .5rem;
    }
}
.accent.clr-turquoise .organisme-adresse,
.accent.clr-turquoise .organisme-telephone {
    margin-bottom: .25rem;
    font-weight: 400;
}
.organisme-siteweb {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.organisme-siteweb a {
    overflow-wrap: anywhere;
}
.organisme-retour {
    margin-top: 5rem;
}
@media (min-width: 970px) {
    .page-organisme .accent {
        padding-right: 5rem;
    }
}
.page-organisme .inner {
    display: grid;
    grid-template-columns: 1fr;
    
}
@media (min-width: 970px) {
    .page-organisme .inner {
        align-items: center;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}
@media (max-width: 969px) {
    .page-organisme .inner > div:nth-child(2) {
        margin-top: 5rem;
    }
}


/* Page Logos */

.encadre-logo > div {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.5rem;
	gap: 1rem;
    
}
@media (min-width: 970px) {
    .encadre-logo > div {
        align-items: center;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 2rem;
    }
}
.encadre-logo img {
    display: block;
}

.grille-logos > div {
    display: grid;
    grid-template-columns: 1fr;
    
}
@media (min-width: 970px) {
    .grille-logos > div {
        align-items: center;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        position: relative; /* nécessaire pour positionner le filet */

    }
    .grille-logos > div::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background-color: #7DD9DF;
		transform: translateX(-50%); /* centre parfaitement le filet */
	}
}
.grille-logos h3  {
    font-size: 1.125rem;
    text-align: center;
    
}
.grille-logos p  {
    text-align: center;
    
}
.grille-logos .logo-03 span  {
    background-color: black; 
    display: inline-block;
}
.grille-logos .logo-04 span  {
    background-color: #0071bb; 
    display: inline-block;
}

.page-page .contact {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 970px) {
     .page-page .contact {
        grid-template-columns: 68% 32%;
    }   
    .page-page .contact-courriel {
        background-image: url(/media/scmmza2s/courriel.svg);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding: 1rem 0 1rem 8rem;
    }
}

.page-page .contact-social {
    text-align: center;
}
.page-page .contact-social p {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}
.page-page .contact-social a {
    display: inline-block;
    width: 47px;
    height: 47px;
    filter: invert(70%) sepia(29%) saturate(3274%) hue-rotate(210deg) brightness(53%) contrast(87%);
}
.page-page .contact-social .logo-facebook {
    background-image: url(/media/20fcihru/picto-facebook.svg);
}
.page-page .contact-social .logo-instagram {
    background-image: url(/media/tqwaor32/picto-instagram.svg);
}
.page-page .contact-social .logo-linkedin {
    background-image: url(/media/pledlx1a/picto-linkedin-blanc.svg);
}