:root {
    --primary-red: #ff626a;
    --highlight-yellow: #fd2;
    --purple: #bb7ff2;
    --off-white: whitesmoke;
    --bg-grey: #e2e2e2;
    --bg-peach: #ffe6cc;
    --bg-lavender: #ebdaff;
    --text-black: black;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    display: block;
    page-break-inside:avoid;
}

/* liens vers la typo */
@font-face {
    font-family: 'BBBDMSans';
    src: url('../fonts/BBBDMSans-Light.woff') format('woff');
    font-weight: 100;
}
@font-face {
    font-family: 'BBBDMSans';
    src: url('../fonts/BBBDMSans-Regular.woff') format('woff');
    font-weight: 200;
}
@font-face {
    font-family: 'BBBDMSans';
    src: url('../fonts/BBBDMSans-Medium.woff') format('woff');
    font-weight: 800;
}
@font-face {
    font-family: 'BBBDMSans';
    src: url('../fonts/BBBDMSans-Bold.woff') format('woff');
    font-weight:900;
}
@font-face {
    font-family: 'ManifontGrotesk';
    src: url('../fonts/BBBManifontGrotesk-Book.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Herthey';
    src: url('../fonts/BBB-Herthey-Futural-40.otf') format('OpenType');
    font-weight: normal;
}
@font-face {
    font-family: 'Grandola';
    src: url('../fonts/Grandola-Regular.otf') format('OpenType');
    font-weight: normal;
}

body {
    font-family: 'BBBDMSans';
    font-size: 1.4rem;
    background-color: var(--bg-grey);
    animation: changebg 60s infinite;
    cursor: url(../images/cursor-CG-flags-30px.png), auto;
    max-width: 100%;
    overflow-x: hidden;
}
@keyframes changebg {
    0% { background-color: var(--bg-peach); }
    20% { background-color: var(--bg-lavender); } 
    40% { background-color: var(--bg-peach); }
    60% { background-color: var(--bg-grey); }
    80% { background-color: var(--bg-lavender); }
    100% { background-color: var(--bg-grey); }
}

header {
    height: 48px;
    font-size: 1.6rem;
    /* padding: 7px 13px 0 13px; */
}
header a {
    text-decoration: none;
}
a {
    color: black;
    cursor: url(../images/cursor-rond-30px.png), auto;
}
.sans-dec {
    text-decoration: none;
}
h1 {
    font-size: 1.6rem;
    font-weight: normal;
}
h2 {
    font-size: 1.5rem;
    font-weight: normal;
    margin: 2rem 0;
    letter-spacing: 0.5px;
}
ul {
    padding: 2rem 3rem;
}
ul li {
    list-style-image: url(../images/triangle.png);
}


.contrast {
    position: fixed;
    top: 8px;
    right: 15px;
    width: 30px;
    z-index: 100000000000000;
    cursor: url(../images/cursor-rond-30px.png), auto;
}
.lang-switcher {
    position: fixed;
    top: 8px;
    right: 55px;
    z-index: 100000000000000;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 2rem;
    display: flex;
    align-items: center;
}
.lang-switcher li a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    color: black;
    text-transform: uppercase;
    display: block;
    line-height: 1;
    padding: 1rem 0 1rem 1rem;
}
.lang-item {
    list-style: none;
}
.contrasted .lang-switcher li a {
    color: white;
}
.en-haut {
    position: fixed;
    z-index: 100000000000;
    bottom: 15px;
    right: 15px;
    text-decoration: none;
}
.en-haut img {
    width: 30px;
}

/* MENU */
.site-header {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000000000000000000;
    background-color: var(--primary-red);
    display: flex;
    align-items: center;
}
.header-logo {
    position: absolute;
    left: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
}
.header-logo img {
    height: 2rem;
    vertical-align: middle;
}
nav {
    flex: 1;
}
nav a:hover {
    color: var(--highlight-yellow);
}
nav ul {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    width: 60%;
    justify-content: space-between;
    height: 100%;
}
nav ul li {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 .8rem;
    
}
nav ul li.highlight,
nav ul li.current-menu-item,
nav ul li.current-page-item,
nav ul li.current-menu-ancestor {
    background-color: var(--highlight-yellow);
}
nav img {
    background-color: var(--primary-red);
}
nav h1 {
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    /* color: transparent; */
}
/* .header-logo is already styled above */
.click-menu {
    display: none;
}

button {
    background-color: transparent;
    border: none;
    font-family: "BBBDMSans";
    font-size: 1rem;
}

iframe {
    width: 100%;
    margin: 2rem 0;
}

.plus {
    height: 10mm;
    /* border: 0.2rem solid #c587ff; */
    cursor: pointer;
    background-color: #ffee8c;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 5px;
}


a.cta {
    text-decoration: none;
}
.cta {
    padding: 1rem;
    border-radius: 3rem;
    margin: 4rem 0 4rem 2rem;
    background-color:var(--highlight-yellow);
    border: 4px solid var(--purple);
    width: fit-content;
    rotate: 7deg;
    z-index: 1;
    font-size: 1.6rem;
    clear: both;
}
.cta:hover {
    background-color: black;
    border: 4px solid black;
    color: var(--off-white);
}

/* FOOTER */

footer.site-footer {
    clear: both;
    width: 100vw;
    background-color: #c587ff;
    height: fit-content;
    position: relative;
    font-size: 1rem;
    padding: 2rem 1rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    align-items: flex-start;
}



footer .logos-subsides {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.logos-subsides img {
    height: 2.3rem;
    width: auto;
}

footer .footer-socials {
    padding-left: 1rem;
}

footer .social-wrapper img {
    width: auto;
    height: 1.2rem;
    display: block;
    margin: 0 0 10px 0;
}

footer a {
    cursor: pointer;
}

.footer-legal {
    padding-left: 1rem;
}

.footer-contact {
    padding-left: 1rem;
}

footer .logo-CG {
    text-align: left;
    padding-left: 1rem;
}

footer .logo-CG img {
    height: 100px;
    width: auto;
}



/* MAIN */

main {
    /* position: absolute;
    z-index: 100; */
    padding: 10% 18% 18% 18%;
    padding-bottom: 20vh;
    /* min-height: 90vh; */
}
section {
    margin-top: 2rem;
    margin-left: 20%;
    width: 60%;
    margin-top: 0;
    /* margin: 30vh 15% 0 35%; */
    background-color: var(--off-white);
    z-index: 0;
    position: relative;
}
section a:hover {
    color: var(--primary-red);
    /* background-color: var(--highlight-yellow); */
}
section h1 {
    background-color:var(--highlight-yellow);
    position: sticky;
    top: 48px;

}

.page-id-17 section h1 {
    position: sticky;
    top: 46px;
}
section h2 {
    background-color: #3cbf75;
    position: sticky;
    top: 48px;
    z-index: 100000000000000;
}
section h3 {
    font-size: 1.8rem;
    letter-spacing: 0.2pt;
    background-color: #f4c1ff;
}
section h1, section h2, section h3 {
    padding: 0.5rem 0.8rem 0.6rem 0.8rem;
}
section p {
    padding: 0.5rem 0.8rem 0.6rem 0.8rem;
}
section .grille p {
    padding-top: 0;
}

/* HOME */
.logo-coalition-home {
    width: 70%; margin-left: 15%; position: fixed; top: 4rem;
}
.logo-genre-home {
    width: 50%; right: 25%; position: fixed; bottom: 2rem;
}
.logo-coalition-home.transformed {
    animation: changecoalition 1s linear forwards;
}
.logo-genre-home.transformed {
    animation: changegenre 1s linear forwards;
}
@keyframes changecoalition {
    0% { width: 70%; margin-left: 15%; }
    100% { width: 35vh; margin-left: -10vh; transform: rotate(-90deg); top: 50vh; }
}
@keyframes changegenre {
    0% { width: 50%; right: 25%; }
    100% { width: 25vh; right: -5vh; transform: rotate(-90deg); bottom: 42vh; }
}
.welcome {
    font-size: 3.5vw;
    /* background-color: hsla(16,100%,80%,1); */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    padding: 0;
    box-shadow: none;
    position: absolute;
    top: 46vh;
    z-index: 10;
}
main.home {
    margin-top: 110vh!important;
    padding: 0;
}
.home h2 {
    margin: 0;
}
.home section {
    width: 45%;
    z-index: 0;
    position: relative;
}
.home section:nth-of-type(2n+1) {
    background-color: #ea8dff;
}
.home section:nth-of-type(2n+2) {
    background-color:#ffd5e4;
}
.home section {
    width: 45%;
}
.home-qui {
    margin: 50% 10% 0 20%;
    border-bottom: 1rem solid #b7925d;
}
.home-qui h2 {
    background-color: var(--highlight-yellow);
}
.home-qui p:first-of-type {
    border-top: 1rem solid var(--purple);
    background-color: var(--off-white);
}
.home-qui p:nth-of-type(2) {
    background-color: #ffb5cf;
    border-bottom: 1rem solid #79d0ea;
}
.decouvrez-assos {
    float: left;
    margin-left: 10%;
}
.home section.home-image {
    background-position: center;
    background-size: cover;
    width: 450px;
    height: 450px;
    border-radius: 450px;
    float: right;
    margin-right: 8%;
    filter: sepia(100%) contrast(70%) hue-rotate(170deg);
}
.home-objectifs {
    margin: 15vh 10% 0 20%;
    padding: 0;
    clear: both;
}
.home-objectifs h2 {
    background-color: var(--primary-red);
}
.home-objectifs ul {
    padding: 0;
}
.home-objectifs ul li {
    padding: 0.5rem 0.8rem 0.6rem 0.8rem;
    list-style: none;
    background-color: var(--off-white);
}
.home-objectifs ul li::marker {
    content: '';
}
.home-objectifs ul li:nth-of-type(2n+1) {
    list-style: none;
    background-color:hsla(16,100%,80%,1);
}
.home-actions {
    margin: 15vh 10% 0 20%;
}
.home-actions h2 {
    background-color: var(--primary-red);
    /* border-bottom: 1rem solid #ffae50; */
}
.home-actions h3 {
    font-family: 'ManifontGrotesk';
    letter-spacing: 0.5pt;
    padding: 0.8rem 0.8rem 0.3rem 0.8rem;
}
.home-actions h3:nth-of-type(n+1) {
    background-color: #ffae50;
}
.home-actions h3:nth-of-type(2) {
    background-color: var(--highlight-yellow);
}
.home-actions h3:nth-of-type(3) {
    background-color: #3cbf75;
}
.home-actions h3:nth-of-type(4) {
    background-color: #7099ef;
}
.home-actions h3:nth-of-type(5) {
    background-color: #c587ff;
}
.home-actions p {
    /* background-color: var(--highlight-yellow); */
    background-color: var(--off-white);
}
.home-actus {
    margin: 15vh 10% 0 33%;
    background-color: transparent!important;
    padding-bottom: 0.5rem;
}
.home-actus a {
    text-decoration: none;
}
.home-actus h2 {
    background-color: var(--highlight-yellow);
}
.home-actus h3 {
    background-color: var(--off-white)!important;
}
.home-actus .grille {
    display: flex;
    flex-direction: column;
}
.home-actus .element-grille {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 2px solid black;
    background-color: var(--off-white);
}

.home-actus .element-grille:hover img {
    filter: sepia(100%) contrast(70%) hue-rotate(170deg);
}

.home-actus .element-grille .img-event {
    flex: 0 0 20%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.home-actus .element-grille .img-event img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-actus .element-grille .info-event {
    flex: 1;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .25rem;
    margin-top: .25rem;
}
.home-actus .element-grille h3, .home-actus .element-grille p, .home-actus .element-grille .plus {
    font-size: 1.4rem;
    padding-bottom: 0;
}
.decouvrez-actus {
    width: 90%; 
    text-align: center; 
    margin-bottom: 0rem; 
    margin-left: -50%;
}
.home-ressources {
    margin: 10vh 30% 0 48%;
    padding: 3.3rem 2.7rem;
    width: 270px;
    height: 270px;
    border-radius: 300px;
    overflow: hidden;
    text-align: center;
    background-color:#c587ff;
    color: black;
    border: 4px solid var(--highlight-yellow);
    rotate: 0deg;
}
.home-ressources:hover {
    background-color: black;
    color: var(--off-white);
}
.home-contact {
    rotate: -7deg; 
    float: right; 
    margin-right: 10%;
    margin-bottom: 10%;
}



/* LOGOS AUTRES PAGES */

.logo-coalition {
    display: none;
}
.logo-genre {
    display: none;
}

/* GLOBAL PAGES */

.page-template main, .page-template-default main {
    margin-top: 48px;
}

/* A PROPOS */

.page-a-propos {
    font-size: 1.4rem;
    padding: 0;
    padding-bottom: 2rem;
    margin-top: 0%;
}
.page-a-propos section {
    margin-left: 20%;
    margin-top: 0;
    /* background-color: transparent!important; */
}
.page-a-propos section p {
    background-color: none;
}
.page-a-propos .decouvrez-projets {
    margin-left: 20%; 
    width: 30%; 
    text-align: center;
}
.page-a-propos .decouvrez-ressources {
    rotate: -7deg; 
    margin-left: 50%; 
    margin-bottom: 4rem; 
    width: 30%; 
    text-align: center;
}
.page-a-propos .grille {
    margin-left: 20%;
    background-color: var(--off-white);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1000px) {
    .page-a-propos .grille {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 15%;
    }
}
@media screen and (max-width: 700px) {
    .page-a-propos .grille {
        grid-template-columns: 1fr;
        margin-left: 5%;
    }
}
.page-a-propos .grille img {
    filter: grayscale(100);
}
.page-a-propos .grille h2 {
    background-color: var(--primary-red);
    margin: 0;
    grid-column: 1 / -1;
}
.page-a-propos .element-grille {
    min-height: 450px;
    height: 100%;
    padding: 0 0 1rem 0;
}
.page-a-propos .element-grille .cta {
    rotate: 0deg;
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
    margin: auto;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--off-white);
    border: 2px solid black;
    color: black;
    text-transform: uppercase;
}
.page-a-propos .element-grille:hover .cta {
    background-color:var(--purple);
}
.page-a-propos .element-grille:hover {
    color:var(--purple);
}
.page-a-propos a:nth-of-type(2n+2) .element-grille {
    background-color:var(--purple);
    color: var(--off-white);
}
.page-a-propos a:nth-of-type(2n+2) .element-grille:hover {
    color: black;
}

.page-a-propos .element-grille img {
    max-width: 15%;
    margin-left: 40%;
    margin-bottom: 10px;
}
.page-a-propos .grille h3 {
    font-size: 1.8rem;
    line-height: 2rem;
    position: initial;
    padding-top: 1rem;
    text-transform: uppercase;
}
.page-a-propos .grille a h3 {
    background-color: transparent;
}
.page-a-propos .element-grille p, .page-a-propos .element-grille li {
    font-size: 1.2rem;
    padding-top: 0;
}
.logo-membre {
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    filter: grayscale();
    border: 2px solid black;
    background-color: white;
    float: right;
    margin: 1rem 0.6rem 0.5rem 0.5rem;
}


/* PAGE ACTION EVENT RESSOURCE ETC */

.page-actions {
    margin: 0;
    padding: 0;
}
/* .page-actions section {
    margin-left: 20%;
    width: 53%;
    margin-top: 0;
} */
.page-actions section.intro {
    margin-left: 0;
    width: 49%;
}
.page-actions section h2 {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 12px;
    background-color: #c587ff;
}
/* .page-actions .element-grille {
    width: 30%;
    border-radius: 1rem;
    display: inline-block;
    vertical-align: top;
    background-color: #f4c1ff;
    border: 0.5rem solid #97ebbb;
    margin: 1% 1% 0 0;
}
.page-actions .element-grille:nth-of-type(2n+1) {
    background-color: #97ebbb;
    border: 0.5rem solid #f4c1ff;
}
.page-actions .element-grille h2 {
    font-size: 1.4rem;
}
.page-actions .element-grille h3 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 0.5rem;
    position: initial;
}
.page-actions .element-grille p {
    font-size: 1.2rem;
} */

.page-actions h1 {
    background-color: #3cbf75;
}
.page-actions h3 {
    background-color: transparent!important;
}
.page-actions .grille {
    border-bottom: 1rem solid #79d0ea;
}

.page-actions .grille a {
    text-decoration: none;
}
.page-actions h2 {
    border-top: 1rem solid black;
}
.page-actions .grille {
    margin-bottom: 3rem;
} 
.page-actions .element-grille {
    /* width: 32%;
    display: inline-block;
    vertical-align: top;
    background-color: #ffae50; */
    border-bottom: 2px solid black;
    background-color: var(--off-white);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.page-actions .element-grille:hover img {
    filter: sepia(100%) contrast(70%) hue-rotate(170deg);
}


.page-actions .element-grille > * {
    text-decoration: none;
}

.page-actions .element-grille .img-event {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #3cbf75;
}
.page-actions .element-grille .img-event img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-actions .element-grille .info-event {
    display: inline-block;
    vertical-align: top;
    width: 78%;
    margin-left: -5px;
}
.page-actions .element-grille .info-event .titre-et-date {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}
.page-actions .element-grille .info-event .titre-et-date h3, .page-actions .element-grille .info-event .titre-et-date .date {
    display: inline-block;
    vertical-align: top;
    width: 65%;
}
.page-actions .element-grille .info-event .titre-et-date .date {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    text-align: right;
    padding-top: 0.5rem;
    font-weight: bold;
}
.page-actions .element-grille .info-event p, .page-actions .element-grille .info p {
    font-size: 1rem;
    line-height: 1.3rem;
    margin-top: 0.5rem;
}
.page-actions .element-grille h3, .page-actions .element-grille p {
    font-size: 1.4rem;
    line-height: 1.7rem;
    padding-bottom: 0;
}

.page-actions .element-grille .img {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #3cbf75;
}
.page-actions .element-grille:hover .img-event {
    background-color: var(--purple);
}
.page-actions .element-grille .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-actions .element-grille .info {
    display: inline-block;
    vertical-align: top;
    width: 78%;
    margin-left: -5px;
}

@media screen and (max-width: 768px) {
    .page-actions .element-grille {
        flex-direction: column;
    }
    .page-actions .element-grille .img-event,
    .page-actions .element-grille .img,
    .page-actions .element-grille .info-event,
    .page-actions .element-grille .info {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .page-actions .element-grille .info-event {
        padding: .8rem 0;
    }

    .page-actions .element-grille .info-event .titre-et-date {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions .element-grille .info-event .titre-et-date h3, .page-actions .element-grille .info-event .titre-et-date .date {
        width: 100% !important;
        text-align: left !important;
        
    }

    .page-actions .element-grille .info-event .titre-et-date .date {
        padding-left: .8rem !important;
    }

}

/* PAGE RESSOURCES */
.page-ressources section.intro {
    width: 44%;
}
.podcasts .element-grille .img, .grille-ressources .element-grille .img {
    background-position: center;
    background-size: cover;
}
.podcasts .element-grille:hover .img, .grille-ressources .element-grille:hover .img {
    filter: sepia(100%) contrast(70%) hue-rotate(210deg);
}

.grille-ressources {
    padding: 2%;
}

.grille-ressources .element-grille .date {
    padding: 0.5rem 0.8rem 0.6rem 0.8rem;
    font-weight: bold;
    font-size: 1.2rem;
}

.grille.grille-ressources .img {
    aspect-ratio: 2;
}

.page-ressources .element-grille .info .titre-et-date h3, .page-ressources .element-grille .info-event .titre-et-date .date {
    display: inline-block;
    vertical-align: top;
    width: 65%;
}
.page-ressources .element-grille .info .titre-et-date .date {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    text-align: right;
    padding-top: 0.5rem;
    font-weight: bold;
}

/* PAGES ACTION */

.page-action h1 {
    font-family: 'ManifontGrotesk';
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 4.8rem;
    margin-bottom: 2rem;
    text-align: center;
}
.page-action h2 {
    font-size: 2rem;
    font-weight: 800;
}
.page-action h3 {
    padding-bottom: 1rem;
}
.page-action .infos-action {
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0.5rem 0.8rem 0.6rem 0.8rem;
    background-color: #3cbf75;
}
.page-action p {
    margin-bottom: 1rem;
}
.page-action ul {
    padding-top: 0rem;
}
.page-action img {
    max-width: 100%;
    height: auto;
}

.page-action .img-full__media {
  position: relative;
  display: block;
  overflow: hidden;
}

.page-action .img-full__media img {
  display: block;
  width: 100%;
  height: auto;
}

/*
.page-action .img-full__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20210915/pngtree-noise-abstract-texture-dark-gray-noise-background-image_879896.jpg");
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
}*/


.page-action figure.img-full {
    max-width: 100%;
}
.page-action figure.img-full:not(:has(figcaption)) {
    margin-bottom: 2rem;
}
.page-action figure {
  position: relative;
}


.page-action figcaption {
    font-size: 1rem;
    margin: 1rem;
}
.page-action figure.img-left {
    max-width: 40%;
    float: left;
    margin-right: 1rem;
}
.page-action figure.img-right {
    max-width: 40%;
    float: right;
    margin-left: 1rem;
}
.page-action figure.img-right figcaption, .page-action figure.img-left figcaption {
    margin: 0.2rem 0 0.2rem 0rem;
}
.page-action figure.img-galerie {
    max-width: 30%;
    margin-right: 1rem;
    display: inline-block;
    vertical-align: top;
}
.page-action figure.img-galerie figcaption {
    margin: 0.2rem 0 0.2rem 0rem;
}

/* PAGES RESSOURCE, PODCAST */
.liens-ressources {
    background-color: #3cbf75;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
}
.liens-ressources.has-one > a {
    flex: 0 0 100%;
}
.liens-ressources.has-two > a {
    flex: 1 1 300px;
}
.telechargement, .lien-externe {
    padding: 1.5rem 1rem;
    background-color: #3cbf75;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.telechargement:hover, .lien-externe:hover {
    background-color: var(--purple);
}
.liens-ressources a {
    text-decoration: none;
    color: inherit;
}
.lien-externe {
    border-left: 1px solid rgba(0,0,0,0.1);
}
.telechargement::before {
    content: url('../images/download.png');
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.telechargement p, .lien-externe p {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
}
.lien-externe::before {
    content: url('../images/external-link.png');
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}


/* PAGE RESSOURCES */

/* PAGE RESSOURCES */
.grille-ressources {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    margin-bottom: 3rem;
}


.grille-ressources > a {
    width: 32%;
    text-decoration: none;
    color: inherit;
    margin-bottom: 2%;
}

.grille-ressources .element-grille {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    background-color: var(--off-white);
    height: 100%;
}

.grille-ressources .element-grille .info {
    display: inline-block;
    vertical-align: top;
    width: 78%;
    margin-left: -5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.grille-ressources .element-grille .img {
    display: block;
    width: 100%;
}

/* PODCASTS */
.podcasts {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
}

.podcasts > a {
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.podcasts .element-grille {
    border-bottom: 2px solid black;
    background-color: var(--off-white);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.podcasts .element-grille .img {
    width: 20%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #3cbf75;
}

.podcasts .element-grille .info {
    width: 78%;
    padding: 1rem;
}


/* CONTACT */
.page-contact {
    margin: 0;
    padding: 0;
}
.page-contact section {
    margin-left: 20%;
    margin-top: 0;
    padding: 0;
}
.page-contact section p {
    margin-right: 20px;
}
.page-contact section h2 {
    margin-bottom: 0;
}

.page-contact .social-wrapper {
    margin-bottom: 2rem;
}
.page-contact .social-wrapper img {
    width: auto;
    height: 1.5rem;
    display: inline-block;
    margin-right: 1rem;
}
.page-contact .social-wrapper span {
    padding: 12px 0px 4px 14px;
    border-radius: 30px;
    background-color: var(--highlight-yellow);
}
.page-contact .social-wrapper span:hover {
    background-color: var(--purple);
}


/* SINGLE */

.single main {

    ul {
        padding: 0 2.5rem 2rem 3rem;
    }

    ul li {
     padding-left: .35rem;
}
}

/* BLOC RÉSEAUX SOCIAUX */
.social-link-block {
    margin: 1rem 0;
}
.social-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.2rem;
    background-color: var(--highlight-yellow);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-black);
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.social-button:hover {
    background-color: var(--purple);
    transform: translateY(-2px);
}
.social-icon {
    display: flex;
    align-items: center;
    margin-right: 0.8rem;
}
.social-icon img {
    width: 24px;
    height: 24px;
    display: block;
}
.social-label {
    font-size: 1.2rem;
}
.social-link-block.preview {
    border: 2px dashed #ccc;
    padding: 1rem;
    text-align: center;
    background: #f9f9f9;
}
.credits-site {
    font-size: 1rem;
}

.page-contact figcaption {
    font-size: 1rem;
    padding: 0.5rem 0.8rem 0.6rem;
}

/* TEST COULEURS */
main.test-colors {
    padding: 0;
}
.test-colors {
    width: 100%;
}
.test-colors .spectre, .test-colors div div {
    padding-top: 6px;
    padding-left: 5px;
    height: 5vh;
    position: relative;
}
.test-colors .spectre div {
    padding-top: 6px;
    padding-left: 5px;
    width: 50%;
    position: absolute;
    height: 5vh;
    right: 0;
    top: 0;
}


body.contrasted {
    height: 100vh;
}
.contrasted .en-haut {
    position: fixed;
}
.contrasted, .contrasted h2, .contrasted h3, .contrasted p, .contrasted li, .contrasted blockquote, .contrasted div, .contrasted section {
    background-color: transparent!important;
    color: black;
}

/* ⚠️ remove div */

.contrasted section, .contrasted footer, .contrasted figure img {
    filter: grayscale(100)!important;
}
            
.contrasted nav, .contrasted header, .contrasted .main-navigation ul {
    background-color: black!important;
}
.contrasted nav li a {
    color: white!important; 
}

.contrasted .header-logo img {
    background-color: white;
    filter: invert();
}
.contrasted section h1, .contrasted section h2 {
    position: initial;
}
.contrasted ul li::marker {
    color: black;
}

/* CUSTOM WP BLOCKS */

.social__icon:first-child {
    margin-left: .8rem!important;
}

.social__icon a {
    width: 3rem;
    background: var(--highlight-yellow);
    display: flex!important;
    aspect-ratio: 1;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
}

.social__icon a {
    width: 3rem;
    background: var(--highlight-yellow);
    display: flex!important;
    aspect-ratio: 1;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
}

.social__icon a:hover {
    background: var(--purple);
}

.social__icon a img {
    height: 1.25rem;
}

.social__icon .alignleft {
    float: left;
    margin: .4rem .4rem 0 0!important;
}
/* RESPONSIVE */

/* ÉCRAN SEULEMENT */
@media screen {
    .print-only {
        display: none;
    }
}

/* ÉCRAN (VALEURS MINIMUM) */
@media screen and (min-width: 700px) {
    nav {
        height: 48px;
    }
    nav ul {
        gap: 1rem;
    }
    .header-logo img {
        position: relative;
        left: 0;
        vertical-align: middle;
    }
}

/* ÉCRAN (VALEURS MAXIMUM) */
@media screen and (max-width: 1350px) {
    .header-logo img {
        width: 85%;
    }


    nav ul li a {
    font-size: 1.6vw;
    }

    section {
        width: 70%!important;
        margin-left: 15%!important;
    }
}
@media screen and (max-width: 1000px) {
    section {
        width: 90% !important;
        margin-left: 5% !important;
    }

    .site-header {
        height: 48px;
        background-color: var(--primary-red);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }

    .header-logo {
        position: relative;
        left: 0;
        z-index: 110;
        display: flex;
        align-items: center;
    }

    .header-logo img {
        height: 1.8rem;
        width: auto;
        margin: 0;
    }

    nav {
        flex: 0;
    }

    .click-menu {
        display: block;
        position: absolute;
        font-family: inherit;
        font-size: 1.2rem;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 110;
        color: var(--text-black);
        left: 50%;
    }

    .contrasted .click-menu {
        color: white !important;
    }

    nav ul {
        display: none;
        position: fixed;
        top: 48px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 48px);
        background-color: var(--primary-red);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start; /* Aligne les LI à gauche */
        /*padding: 2rem 0;*/
        margin: 0;
        z-index: 100;
        overflow-y: auto;
    }

    nav.menu-show ul {
        display: flex;
    }

    nav ul li {
        width: 100%!important;
        height: auto;
        display: block; /* Plus simple pour une liste verticale */
    }

    nav ul li a {
        font-size: 1.8rem;
        display: block;
        width: 100%;
        text-align: left;
        padding: 1.5rem 2rem; /* Le padding est ici maintenant */
    }

    main {
        margin-top: 48px !important;
    }

    main.home {
        margin-top: 97vh !important;
    }

    .logo-coalition-home {
        width: 80% !important;
        margin-left: 9% !important;
    }

    .logo-genre-home {
        width: 55% !important;
        margin-left: 15% !important;
        bottom: 10vh !important;
    }

    .element-grille {
        width: 100% !important;
    }
    .logo-genre-home.transformed, 
    .logo-coalition-home.transformed {
        animation: none;
        position: absolute;
        margin: auto;
    }

    .page-actions .element-grille,
    .podcasts .element-grille,
    .home-actus .element-grille {
        flex-direction: column;
    }

    .page-actions .element-grille .img-event,
    .page-actions .element-grille .img,
    .page-actions .element-grille .info-event,
    .page-actions .element-grille .info,
    .podcasts .element-grille .img,
    .podcasts .element-grille .info,
    .home-actus .element-grille .img-event,
    .home-actus .element-grille .info-event {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .home-actus .element-grille .info-event {
        padding-bottom: .8rem;
    }

    .grille-ressources > a {
        width: 100%;
    }


    .home-ressources {
        margin: 5rem auto;
        width: 80%;
        height: auto;
        aspect-ratio: 1/1;
    }

    footer .logos-subsides,
    footer div:nth-child(3),
    .footer-contact {
        width: 90% !important;
    }

    

    
}

@media screen and (max-width: 480px) {
    .click-menu {
        padding-bottom: 0.3rem;
    }
    nav {
        height: 48px;
    }
    .contrasted nav ul li a {
        margin-left: -0.5rem;
        margin-bottom: -2.5rem;
        color: black!important;
    }
    nav.menu-show {
        height: 100vh;
    }
    nav.menu-show ul li:nth-of-type(n+2) {
        display: block;
    }

    nav ul li:nth-child(n+2) {
        font-size: 2.3rem;
        line-height: 2.6rem;
    }
    nav ul li a {
        display: block;
        margin: 0 0;
        width: 100%!important;
    }
    .header-logo img {
        height: auto!important;
        width: 37%;
        /*margin: 0.8rem 0 0 0.6rem;*/
    }
    .header-logo {
        color: transparent;
    }
    .access {
        display: none;
    }
    main {
        padding: 0!important;
        margin-top: 6rem!important;
        padding-bottom: 6rem!important;
    }
    main, section {
        width: 90%!important;
        margin-left: 5%!important;
        margin-right: 0;
    }
    section {
        margin-top: 0;
        margin-bottom: 2rem;
    }
    .page-contact section {
        margin-top: 2rem;
        margin-bottom: 0;
    }
    .element-grille {
        width: 100%!important;
    }
    main.home {
        margin-top: 97vh!important;
    }
    main.home, .home section {
        width: 90%!important;
        margin-left: 5%!important;
    }
    .logo-coalition-home {
        width: 80%!important;
        margin-left: 9%!important;
    }
    .logo-genre-home {
        width: 55%!important;
        margin-left: 15%!important;
        bottom: 10vh!important;
    }
    .logo-genre-home.transformed, 
    .logo-coalition-home.transformed {
        animation: none;
        position: absolute;
        margin: auto;
    }
    .decouvrez-actus {
        margin-left: 0;
    }
    .home-ressources {
        margin: auto;
        margin-top: 10vh;
    }
    footer.site-footer {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "partenaires reseaux"
            "mentions mentions"
            "contact logo";
        gap: 2rem 1rem;
    }

    .logos-subsides { grid-area: partenaires; }
    .footer-socials { grid-area: reseaux; display: flex; justify-content: flex-end; }
    .footer-legal { grid-area: mentions; text-align: left; }
    .footer-contact { grid-area: contact; }
    .footer-logo-link { grid-area: logo; display: flex; justify-content: flex-end; }

    footer.site-footer > div, 
    footer.site-footer > a {
        width: 100% !important;
        padding-left: 0 !important;
    }
    .page-a-propos .decouvrez-projets, .page-a-propos .decouvrez-ressources {
        width: 90%;
        margin-left: 5%;
    }
    nav ul li a.header-logo:hover {
        color: transparent;
    }
    .page-action h1 {
        font-size: 3rem;
    }
}

/* IMPRESSION */

@media print {
    .screen-only {
        display: none;
    }
}

@page {
    size: 210mm 297mm;
    margin: none;
}
/* WP ADMIN BAR AT THE BOTTOM */
html {
    margin-top: 0 !important;
}
* html body {
    margin-top: 0 !important;
}
#wpadminbar {
    top: auto !important;
    bottom: 0;
    position: fixed;
}
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}