:root {
    --theme-couleur-noir: #3c3c3c;
    --couleur-noir: #3c3c3c;
    --theme-couleur-gris-fonce: #404040;
    --couleur-gris-fonce: #404040;
    --theme-couleur-gris: #666666;
    --couleur-gris: #666666;
    --theme-couleur-gris-clair: #929292;
    --couleur-gris-clair: #929292;
    --theme-couleur-blanc: white;
    --couleur-blanc: white;
    --theme-couleur-rouge: #c00000;
    --couleur-rouge: #c00000;
    --theme-couleur-violet: #5c2482;
    --couleur-violet: #5c2482;
    --theme-couleur-orange: orange;
    --couleur-orange: orange;
    --theme-couleur-vert: green;
    --couleur-vert: green;

    --theme-couleur-formulaire-valide: #467D43;
    --theme-couleur-formulaire-invalide: #BD4848;
    --theme-couleur-formulaire-initial: #EFEFEF;

    --theme-couleur-bordure-texte-fichier: rgb(200 200 200 / 0.8);
    
    --vector-bouton-suivant: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='62.587967mm' height='47.10791mm' viewBox='0 0 62.587967 47.10791' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E %3Cdefs id='defs1' /%3E %3Cg id='layer1' transform='translate(-16.501858,-9.7910659)'%3E %3Cpath style='fill:%23ffffff;stroke-width:3' id='path4' d='m 20.921067,13.38608 c 0.634931,0.560773 1.237226,1.160827 1.904796,1.682318 2.617767,2.044949 5.425205,3.826018 8.299426,5.485789 4.679926,2.70251 8.577837,4.699625 13.640356,6.725462 2.632972,1.053621 5.345189,1.897264 8.017781,2.845896 6.54272,1.942938 13.33865,3.742753 20.24124,3.215391 1.04787,-0.08006 2.20331,-0.08322 3.08345,-0.657495 1.21153,-0.79049 3.46729,-1.913258 2.88842,-3.238992 -0.82529,-1.890083 -3.6811,-1.861077 -5.52165,-2.791616 -1.82745,-0.0413 -3.65893,-0.251989 -5.48235,-0.123897 -8.19138,0.575435 -15.9891,3.173016 -23.312741,6.789698 -5.121375,2.529126 -8.246356,4.7576 -12.955362,7.833498 -4.41951,3.385365 -4.161584,2.949397 -7.742584,6.465339 -0.687179,0.674699 -1.312529,1.409912 -1.987047,2.097265 -0.528633,0.538689 -1.479958,1.539423 -2.248887,1.935808 -0.24602,0.126823 -0.531183,0.155848 -0.796774,0.233773 -1.508985,0.165981 -0.703877,0.05313 -2.412114,0.360696 -0.328843,0.146867 1.748192,4.797422 2.077037,4.650554 v 0 c 1.779927,-0.406344 0.868067,-0.186176 2.734644,-0.664387 5.811821,-1.859724 11.07803,-5.098169 16.558646,-7.71403 2.012971,-1.057045 4.007133,-2.150711 6.038916,-3.171132 10.020846,-5.032761 20.372596,-9.455494 31.099476,-12.751358 -0.65547,-9.670169 -0.3365,5.695487 2.73045,-5.694979 0.18209,-0.676288 -1.26852,-0.59976 -1.92879,-0.833355 -5.81897,-2.058673 -11.86953,-3.4173 -17.77248,-5.193546 -2.56309,-0.782 -5.1425,-1.51239 -7.689272,-2.346005 C 41.61908,15.657279 33.112847,11.925159 24.112291,9.8012825 23.858807,9.5756265 20.667583,13.160425 20.921067,13.38608 Z' /%3E %3C/g%3E %3C/svg%3E") no-repeat;
    --vector-bouton-precedent: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='62.587971mm' height='47.10791mm' viewBox='0 0 62.587971 47.10791' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E %3Cdefs id='defs1' /%3E %3Cg id='layer1' transform='translate(-16.501856,-9.7910659)'%3E %3Cpath style='fill:%23ffffff;stroke-width:3' id='path4' d='m 74.67062,53.303959 c -0.634931,-0.560773 -1.237226,-1.160827 -1.904796,-1.682318 -2.617767,-2.044949 -5.425205,-3.826018 -8.299426,-5.485789 -4.679926,-2.70251 -8.577837,-4.699625 -13.640356,-6.725462 -2.632972,-1.053621 -5.345189,-1.897264 -8.017781,-2.845896 -6.54272,-1.942938 -13.33865,-3.742753 -20.24124,-3.215391 -1.04787,0.08006 -2.20331,0.08322 -3.08345,0.657495 -1.21153,0.79049 -3.46729,1.913258 -2.88842,3.238992 0.82529,1.890083 3.6811,1.861077 5.52165,2.791616 1.82745,0.0413 3.65893,0.251989 5.48235,0.123897 8.19138,-0.575435 15.9891,-3.173016 23.312741,-6.789698 5.121375,-2.529126 8.246356,-4.7576 12.955362,-7.833498 4.41951,-3.385365 4.161584,-2.949397 7.742584,-6.465339 0.687179,-0.674699 1.312529,-1.409912 1.987047,-2.097265 0.528633,-0.538689 1.479958,-1.539423 2.248887,-1.935808 0.24602,-0.126823 0.531183,-0.155848 0.796774,-0.233773 1.508985,-0.165981 0.703877,-0.05313 2.412114,-0.360696 0.328843,-0.146867 -1.748192,-4.7974221 -2.077037,-4.6505541 v 0 c -1.779927,0.4063441 -0.868067,0.186176 -2.734644,0.6643871 -5.811821,1.859724 -11.07803,5.098169 -16.558646,7.71403 -2.012971,1.057045 -4.007133,2.150711 -6.038916,3.171132 -10.020846,5.032761 -20.372596,9.455494 -31.099476,12.751358 0.65547,9.670169 0.3365,-5.695487 -2.73045,5.694979 -0.18209,0.676288 1.26852,0.59976 1.92879,0.833355 5.81897,2.058673 11.86953,3.4173 17.77248,5.193546 2.56309,0.782 5.1425,1.51239 7.689272,2.346005 8.766574,2.869496 17.272807,6.601616 26.273363,8.725492 0.253484,0.225656 3.444708,-3.359142 3.191224,-3.584797 z' /%3E %3C/g%3E %3C/svg%3E") no-repeat;
    --vector-symbole-liste: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg enable-background='new 0 0 462.2 481.6' version='1.0' viewBox='0 0 462.2 481.6' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle type='text/css'%3E .st0%7Bdisplay:none;fill:%23C30B30;%7D .st1%7Bfill:%23C00000;%7D .st2%7Bdisplay:none;%7D .st3%7Bdisplay:inline;fill:%23C00000;%7D %3C/style%3E %3Cpath class='st1' d='m430.4 222.7c-95 25.7-142.3-18.5-142.3-18.5-36.5-30.6-35.3-72.4-35.3-72.4 83.8-14.4 77-94.2 77-94.2-43.8-8.1-71.4 17.2-71.4 17.2-45.8 35.5-31.4 96.5-31.4 96.5 6.7 38.5 32.2 63.9 32.2 63.9 45.5 44.4 96.6 42.2 96.6 42.2l-60.8 59.2 15.5 90.3-81.1-42.7-81.2 42.7 15.5-90.3-65.7-64 90.6-13.1 23.2-45.5c-9.6-17.4-12.3-38.8-12.3-38.8l-29.6 58.1-133.2 19.3 96.3 93.9-22.7 132.6 119.1-62.6 119.1 62.6-22.8-132.6zm-133.8-155.8s-8.3 26.1-38.5 34.3c0 0 8.6-25.3 38.5-34.3'/%3E %3C/svg%3E") no-repeat;
}

@media (prefers-color-scheme: dark) {
    :root {
    --theme-couleur-blanc: #202020;
    --theme-couleur-noir: #e8e6e3;
    --theme-couleur-gris: black;

    --theme-couleur-formulaire-valide: green;
    --theme-couleur-formulaire-invalide: #5c2482;
    --theme-couleur-formulaire-initial: #404040;

    --theme-couleur-bordure-texte-fichier: rgb(14 14 14 / 0.7);
    }

    .vignette-texte * {
        color: var(--theme-couleur-noir);
    }

}
h1, h2, h3, h4, h5, legend {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--theme-couleur-noir);
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.35;
}

.conteneur-infos-evenement p,
.conteneur-infos-evenement #lien-evenement {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--theme-couleur-noir);
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.35;
    font-size: medium;
}

/*  On souhaite garder l'apparence du texte normal pour
    le nom de fichier d'un fichier d'un événement */
.conteneur-texte-fichier-evenement h5 a {
    text-decoration: none;
    color: var(--theme-couleur-noir);
}

/*  Texte 'Voir l'événement en détail' */
.conteneur-infos-evenement #lien-evenement {
    font-style: italic;
}

h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
}

p, li {
    font-size: 1.15rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: var(--theme-couleur-noir);
    line-height: 1.35;
}

label {
    font-size: 1.05rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--theme-couleur-noir);
    line-height: 1.35;
}
.label-message-envoi-valide {
    color: var(--couleur-noir);
    background-color: var(--couleur-orange);
}
.label-message-envoi-erreur {
    color: var(--couleur-blanc);
    background-color: var(--couleur-rouge);
}

input, select, textarea {
    font-size: 1.05rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--couleur-blanc);
}
input::placeholder, textarea::placeholder {
    color: var(--couleur-gris-clair);
}

select, input.toggle-cases {
    color: var(--theme-couleur-noir);
}

.box-rss a{
     text-decoration: none;
     font-family: 'Arial Narrow', Arial, sans-serif;
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--couleur-blanc);
}
.box-rss a:hover{
  color: var(--couleur-orange);
} 
.box-rss p{
    margin-block-end: 0.3rem;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    color: #DBA6FF;
}
.lienpcf a{ 
    align-self: center;
    font-size:1.3rem;
    font-weight: 800;
    color: var(--couleur-orange);
}



.titre-boucle {
    font-size: 1.5rem;
}
.titre-boucle a{
    text-decoration: none;
}

.font-extrait {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
}

.vignette-texte *{
    text-decoration: none;
    color: var(--couleur-blanc);
    line-height: 1.1;
}
.vignette-titre h3{
    font-size: 1rem;
}
.vignette-excerpt p{
    font-size: 0.7rem;
    margin-block: 0.5rem;
}
.sous-vignette-titre, .sous-vignette-titre-petition {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--couleur-blanc);
}
.sous-vignette-titre a, .sous-vignette-titre-petition a{
    color: var(--couleur-blanc);
    text-decoration: none;
    }

.section-home {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--couleur-blanc);
}
.section-home a {
    color: var(--couleur-blanc);
    text-decoration: none;
}

.vignette-rubrique {
    font-size: 0.75rem;
    font-style: italic;
    margin-top: 0.5rem;
}



.article-rubriques, .article-rubriques a {
    text-decoration: none;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--theme-couleur-rouge);
}
.article-date, .article-date a{
    text-decoration: none;
    font-size: 1rem;
    color: var(--theme-couleur-noir);
}


.conteneur-excerpt-gauche a {
    text-decoration: none;
}
.conteneur-excerpt-gauche h1 {
    font-size: 2rem;
}
#article-rubrique-boucle a{
    font-size: 1rem;
}

.boucle-extrait-secteur {
    font-weight: bolder;
}
.boucle-extrait-rubrique a{
    font-weight: lighter;
}
#article-date-boucle *{
    color:grey;
}
.boucle-extrait-auteur {
    font-weight: bolder;
}
.boucle-extrait-date {
    font-weight: lighter;
}

.liste-evenements a {
    font-family: sans-serif;
    color: white;
    font-size: 1rem;
    font-weight: 100;
    text-decoration: none;
}
.evenement-date a {
    text-decoration: none;
}
.evenement-nom a {
    text-decoration: none;
}

#conteneur-evenements-home table {
    border-collapse: collapse;
    text-align: left;
}
#conteneur-evenements-home th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}


:root, html, body {
	display: block;
	box-sizing: border-box;
	overflow-x:hidden;
	margin: 0px;
    background-color: var(--theme-couleur-blanc);
}

head {
	display: none;
}

ul {
    list-style:circle;
    margin-block-start: 0rem;
    margin-block-end: 0rem;
    padding-inline-start: 0rem;
}
li {
    list-style-type: none;
    margin-bottom: 1rem;
    margin: 2rem 0.5rem 2rem 1rem;
    background: var(--vector-symbole-liste);
    background-size: 1.5rem;
    background-position-y: 0.3rem;
    padding: 0px 0 3px 2.33rem;
}

.max-content-object {
    width: max-content;
    height: max-content;
}

.fond-rouge {
    background-color: var(--theme-couleur-rouge);
    }



#box-entete {
    position: fixed;
    z-index: 9999;
    width: 100%;
}
.ruban-haut {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    background-color: var(--theme-couleur-rouge);
    height: 5rem;
    justify-items: center;
    align-items: center;;
}
.logo {
    height: 65px;
    width: auto;
}
.bouton {
    height: 35px;
    width: auto;
}
#bouton-logo {
    grid-row: 1;
    grid-column: 5/7;
}
#bouton-login {
    grid-row: 1;
    grid-column: 1;
}
#bouton-articles {
    grid-row: 1;
    grid-column: 10;
}

#page-accueil {
    padding: 5rem 2.5rem 0;
}
.page {
    display: flex;
    flex-wrap: wrap;
    max-width: 960px;
    padding: 8rem 2.5rem 0;
    margin: 2.4rem auto 50px;
    position: relative;
    z-index: 1;
    order: 10;
    bottom: 3.5rem;
    gap: 0 3rem;
}

.box-rss {
    display: none;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0.75rem;
    row-gap: 1rem;
    line-height: 1;
    padding: 2rem 4rem 1rem 4rem; /*haut droit bas gauche */
    border-radius: 1rem;
    background-color: var(--theme-couleur-violet);
    order: 1;
    justify-items: center;
    margin-top: 0rem;
    }
#flux-rss-lien {
    grid-column: 1/8;
}

.marge-haute {
    display: block;
    width: 100%;
    height: 0rem;
    order: 10;
}

.conteneur-gauche {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 650px;
    max-width: 650px;
    position: relative;
    z-index: 1;
    order: 20
}
#conteneur-gauche-1 {
    order: 20;
}
#conteneur-gauche-2 {
    order: 40;
}
.conteneur-droit {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: left;
    align-content: flex-start;
    flex-direction: row;
    width: 250px;
    max-width: 650px;
    position: relative;
    z-index: 1;
}
#conteneur-droit-1 {
    order: 30;
}
#conteneur-droit-home {
    order: 30;
    margin-top: 0;
    margin-bottom: 0;
}
#conteneur-sections-home, #conteneur-evenements-home {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#conteneur-evenements-home {
    margin-top: 3rem;
}
#sections-home {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    /* max-width: 250px; */
    justify-content: center;
    gap: 0.5rem;
}

.conteneur-section-home {
    /* width: 100%; */
    width: 230px;
    justify-content: center;
}
.conteneur-section-home .section-home {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
}

.section-home {
    /* width: max-content; */
    height: fit-content;
    border-radius : 20px;
    padding: 0.3rem;
    text-decoration: none;
    text-align: center;
    background-color: var(--theme-couleur-vert);
    height: 4rem;
}
.liste-evenements {
    margin: auto;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    }
.evenement-home {
    display: grid;
    width: 80%;
    max-width: 450px;
    grid-template-columns: 6rem 2fr;
    border: 0.15px;
    border-radius: 1rem;
    border-color: white;
    border-style: ridge;
    background-color: var(--theme-couleur-rouge);
    padding: 0.5rem 1rem 0.5rem 1rem;

}
#evenements-home .titre-boucle > a, .evenement-home > p {
    text-align: left;
}
.evenement-date{
    grid-column: 1;
    align-content: center;
    min-height: 3rem;
}
.evenement-nom{
    grid-column: 2;
    align-content: center;
}

#conteneur-article-petition, #conteneur-article {
    display: flex;
	justify-content: space-between;
	align-items: start;
    gap: 1rem; /* l'espace entre les details et l'article principal */
}

.conteneur-petition h3 {
    text-align: center;
    margin-bottom: 1rem;
}

/*  Conteneur pour les informations d'un événement au sein d'un article */
.conteneur-infos-evenement {
    justify-self: center;
    max-width: 30rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0px 6px 12px 6px var(--theme-couleur-gris);
}

/*  Conteneur pour les informations détaillées d'un événement */
#conteneur-infos-detaillees-evenement {
    margin-top: 1rem;
    max-width: inherit;
}

/*  L'image d'un événement affichée dans les informations détaillées d'un événement */
#image-evenement {
    object-fit: contain;

    /* On souhaite rétrécir l'image aux dimensions du conteneur */
    max-width: 100%;
    max-height: 100%;

    /* Réduction des espaces vides après rétrécissement */
    height: auto;

    box-shadow: 0px 0px 12px 6px var(--theme-couleur-gris);
}
.image-evenement-vignette-defaut {
    width: 165px;
    height: 171px;
}

/*  Liste contenant les fichiers d'un événement.
    La liste va remplir l'espace jusqu'à qu'il n'y ait
    plus de place sur la ligne au quel cas elle continue
    sur la prochaine ligne (grâce à flex-direction et flex-wrap) */
#liste-fichiers-evenement {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: inherit;
}

/*  Conteneur d'un seul fichier d'un événement */
.conteneur-fichier-evenement {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 140px;
    height: 140px;
    outline: 1px solid var(--theme-couleur-gris-fonce);
}
/*  Élément <a> qui englobe l'image pour qu'on puisse cliquer sur l'image */
.lien-fichier-evenement-image {
    position: absolute;
    width: inherit;
    height: inherit;
}
/*  On veut que l'image prenne toute la place disponible et on la centre */
.conteneur-fichier-evenement img {
    max-width: 100%;
    max-height: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

/*  Agrandissement de l'image si c'est un fichier image.
    Sinon, l'image par défaut à la classe 'vignette' que l'on ne veut pas agrandir */
.conteneur-fichier-evenement img:not(.vignette) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.conteneur-texte-fichier-evenement {
    background-color: var(--theme-couleur-bordure-texte-fichier);
    position: absolute;
    width: inherit;
}
.conteneur-texte-fichier-evenement h5 {
    position: relative;
    word-break: break-all;
    width: inherit;

    /* Application du padding à l'intérieur de l'élément */
    box-sizing: border-box;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;

    overflow: scroll;
    max-height: 2.65rem; /* 2 lignes de texte */
}

/*  Réduit la marge pour le texte du lieu d'un événement */
.article-titre + a p {
    margin-top: 0.5rem;
}

.conteneur-excerpt-gauche {
    width: 650px;
    max-width: 650px;
    position: relative;
    z-index: 1;
}
#conteneur-excerpt-gauche-1 {
    order: 30;
    margin-top: 4rem;
}





#accueil-campagne-evenements {
    width: 100%;
    order: 2;
}
#accueil-articles {
    width: 100%;
    order: 3;
}
#accueil-petitions {
    width: 100%;
    order: 4;
}
#accueil-communiques {
    width: 100%;
    order: 5;
}
#accueil-affiches {
    width: 100%;
    order: 1;
}
#accueil-flyer {
    width: 100%;
    order: 6;
}


.conteneur-boucle * {
    position: relative;
    z-index: 1000;
}
.conteneur-boucle {
    display: flex;
    flex-wrap: wrap;
    flex-direction : row;
    align-items : center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 1;
    }
#conteneur-secteurs {
    gap: 2rem;
}
#conteneur-articles-section {
    gap: 1rem;
}
.conteneur-boucle img{
    
}

#evenements-section {
    width: 100%;
}
#petitions-section {
    width: 100%;
}
#derniers-articles-section {
    width: 100%;
}
#coordonees-section h4 {
    margin-top: 0.4rem;
}
#communique-section {
    width: inherit;
    margin-top: 2rem;
}
#communique-section * {
    margin-top: 0.5rem;
    width: inherit;
}

.article-court-texte {
    /* A faire pour rendre le texte plus lisible */
}

.slider {
    display: flex;
    gap: 1rem;
    width: 95%;
	overflow-x: visible;
    scrollbar-width: none;
    overflow-y: hidden;
	scroll-snap-type: x mandatory;
    position: relative;
    z-index: 1000;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    scroll-padding-inline-start: 50px;
}

.carrousel {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
}
#carrousels-section {
    width: 100%;
}

.vignette-largeur-125, .vignette-largeur-125 a img {
    width: 125px !important;
}
.vignette-hauteur-125, .vignette-hauteur-125 a img {
    height: 125px !important;
}
.vignette-largeur-200, .vignette-largeur-200 a img {
    width: 200px !important;
}
.vignette-hauteur-200, .vignette-hauteur-200 a img {
    height: 200px !important;
}
.vignette-largeur-300, .vignette-largeur-300 a img {
    width: 300px !important;
}
.vignette-hauteur-300, .vignette-hauteur-300 a img {
    height: 300px !important;
}
.vignette-hauteur-450, .vignette-hauteur-450 a img {
    height: 450px !important;
}

#grande-archive {
    margin-top: 2rem;
}
#grande-archive-mosaique {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-template-rows: repeat(auto-fill, 450px);
    justify-content: center;
    padding-left: 0;
}
#conteneur-grande-archive {
    width: 100%;
}

.vignette-complete {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
    border-radius: 20px;
    box-shadow: 6px 6px 12px 0px var(--theme-couleur-gris);
}
.vignette-complete a {
    height: 100%;
}
.vignette-complete a img {
    object-fit: cover;
    object-position: top;
}
.vignette-complete-grande-archive {
    height: auto;
}
.vignette-complete-grande-archive img {
    height: 100%;
    object-fit: cover;
}

.img-vignette-default {
    filter: opacity(25%);
    border-radius: 20px;
}
.img-vignette-default img{
    width: 100%;
    height: 100%;
}
.vignette-texte {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    width: 80%;
    margin-bottom: 0.5rem;
    padding: 10px;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(0 0 0 / 90%) 50%, rgba(0 0 0 / 75%) 100%);
    text-align: center;
    justify-content: center;
}
.vignette-titre {
    width: 100%;
}
.sous-vignette-titre {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.barre-deux-boutons {
    display: flex;
    margin: auto;
    gap: 0.25rem;
    margin-top: 1rem;
}
.bouton-slider {
text-decoration: none;
padding: 10px;
font-family: arial;
font-size: 1em;
color: var(--theme-couleur-blanc);
background-color: var(--theme-couleur-rouge);
border-radius: 24px;
border-width: 0 ;
}


.fondu-droit {
    align-self: stretch;
        box-shadow: -1px -1px 5px 5px var(--theme-couleur-blanc);
    background: var(--theme-couleur-blanc);
    width: 0.2rem;
}



.article-contenu {
    width: 600px;
}

.article-auteur {
    border-radius: 20px;
    display: grid;
    justify-items: center;
    padding: 1rem;
    width: 70%;
    max-width: 455px;
    margin: 3rem auto 0rem auto;
    background-color: var(--theme-couleur-blanc);
    box-shadow: 6px 6px 12px 0px var(--theme-couleur-gris);
}
.article-auteur img {
    border-width: thin;
    border-radius: 100%;
    width: 40%;
    min-width: 150px;
    height : auto;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.article-auteur a {
    text-decoration: none;
}
.article-auteur h2 {
    color: var(--theme-couleur-rouge);
}

.sous-vignette-titre {
    width: max-content;
    height: fit-content;
    border-radius : 20px;
    padding: 0.3rem;
    margin-top : 0.25rem;
    text-decoration: none;
    background-color: var(--theme-couleur-rouge);
}
.sous-vignette-titre-petition {
    background-color: var(--theme-couleur-orange);
}

.article-rubriques{
    display: block;
    width: 100%;
}
.article-titre {
    margin-top: 1.25rem;
    line-height: 1;
}
.article-date {
    margin: 1rem 0 1rem 0;
}
.article-box-secteur {
    justify-self: center;
    display: grid;
    border-style: solid;
    border-width: thin;
    border-color: var(--theme-couleur-rouge);
    border-radius: 20px;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    width: 100%;
    max-width: 455px;
    margin: 0 auto 2.5rem auto;
    justify-items: center;
    text-align: center;
}
.article-footer {
    width: 100%;
}


.boucle-nom-secteur {
    width: inherit;
    height: 3.5rem;
}

.extrait-boucle img {
    max-height: 100%;
    border-radius: 20px;
}

#extrait-secteur {
    width: 250px;
}

.titre-boucle {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
.excerpt-contenu {
    width: 200px;
}

.wp-block-image {
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.size-large img {
    width : 100%;
}






.conteneur-excerpt-gauche .article-titre{
    margin-top: 0rem;
}
#conteneur-excerpt-gauche-1 {
    display: grid;
    grid-template-columns: 450px min-content;
    grid-column-gap: 1.75rem;
}
#conteneur-excerpt-gauche-1 .article-contenu {
    grid-column: 1;
    width: 100%;
}
.conteneur-excerpt-gauche .article-thumbnail {
    grid-column: 2;
    grid-row: 1/3;
    margin-top: 1.25rem;
    border-radius: 20px;
    box-shadow: 6px 6px 12px 0px var(--theme-couleur-gris);
}
.conteneur-excerpt-gauche .article-thumbnail img {
    border-radius: 20px;
}
.boucle-extrait-secteur {
    display: inline;
    margin-right: 0.5rem;
}
.boucle-extrait-rubrique {
    display: inline;
}
#article-date-boucle {
    margin-top: 0.25rem;
    margin-bottom: 0rem;
}
.boucle-extrait-auteur {
    display: inline;
    margin-right: 0.5rem;
}
.boucle-extrait-date {
    display: inline;
}





#box-pieddepage {
    position: fixed;
    z-index: 9999;
    width: 100%;
    bottom: 0rem;
}
.ruban-bas {
    display: grid;
    grid-template-columns: 1fr repeat(7, 2rem) 1fr;
    gap: 1.5rem;
    background-color: var(--theme-couleur-gris-fonce);
    height: 3rem;
    justify-items: center;
    align-items: center;;
}
#bouton-courrier {
    grid-row: 1;
    grid-column: 2;
}
#bouton-accueil {
    grid-row: 1;
    grid-column: 4;

}
#bouton-agenda {
    grid-row: 1;
    grid-column: 6;
}
#bouton-recherche {
    grid-row: 1;
    grid-column: 8;

}


#barre-pagination-simple {
    order: 60;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
}
#barre-pagination-grande-archive {
    display: flex;
    gap: 3rem;
    margin: 3rem auto auto auto;
}

.bouton-suivant {
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: var(--vector-bouton-suivant);
    background-color: var(--theme-couleur-rouge);
    background-size: 1.5rem;
    background-position: center;
}
.bouton-precedent {
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: var(--vector-bouton-precedent);
    background-color: var(--theme-couleur-rouge);
    background-size: 1.5rem;
    background-position: center;
}

#form-signature {
    max-width: 30rem;
    width: 21.5rem;
    margin: auto;
}
#label-opt-in {
    text-wrap: balance;
}
.formulaire-ligne {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
    gap: 0.33rem;
}
.formulaire-ligne div {
    display: flex;
    align-items: center;
    justify-content: center;
}
label {
    display: inline-block;
}
label[for="captcha"] {
    padding-right: 0.5rem;
}
#label-opt-in {
    margin-left: 0.5rem
}

/*  Pour chaque champ du formulaire : input (pas les checkboxs) et textarea :
    - Les champs apparaitront comme gris (non touchés) au chargement de la page
    - Quand un champ est focus, la validation sera instantanée et
      change au fur et à mesure que l'utilisateur saisit une entrée
    - Quand un champ n'est plus focus, si l'utilisateur à intéragit avec, il apparaitra comme valide ou invalide */
input:not([type='checkbox']), textarea {
    background: var(--theme-couleur-formulaire-initial);
    border-width: 0;
    appearance: none;
}
input:not([type='checkbox']) {
    height: 2rem;
}

/*  On selectionne les input 'user-valid / user-invalid' et,
    on selectionne les input 'valid / invalide' ET 'focus'
    sans prendre en compte les cases à cocher et les boutons
    de validation du formulaire. */
input:user-valid:not([type='checkbox'], [type='submit']),
textarea:user-valid,
input:valid:not([type='checkbox'], [type='submit']):focus,
textarea:valid:focus {
    background: var(--theme-couleur-formulaire-valide);
}
input:user-invalid:not([type='checkbox'], [type='submit']),
textarea:user-invalid,
input:invalid:not([type='checkbox'], [type='submit']):focus,
textarea:invalid:focus {
    background: var(--theme-couleur-formulaire-invalide);
}

form:valid input[type="submit"] {
    background: var(--theme-couleur-formulaire-valide);
}
form:invalid input[type="submit"] {
    background: var(--theme-couleur-formulaire-invalide);
}

input[type="submit"] {
    width: 100%;
    border-width: 0;
}

select {
    background: var(--theme-couleur-formulaire-initial);
    border: 0;
    height: 1.8rem;
}

#form-contact {
    margin: auto;
}

.label-message-envoi {
    margin-top: 0.75rem;
    width: 100%;
    display: table-caption;
    text-align: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#conteneur-type-recherche {
    width: 100%;
}

/*  Affichage du formulaire de recherche correspondant à l'état de la case à cocher */
#conteneur-form-recherche-simple {
    display: none;
}
#conteneur-form-recherche-custom {
    display: none;
}

#conteneur-type-recherche:has(#type-recherche:not(:checked)) ~ #conteneur-form-recherche-simple {
    display: flex;
}
#conteneur-type-recherche:has(#type-recherche:checked) ~ #conteneur-form-recherche-custom {
    display: flex;
}

#conteneur-form-recherche-simple form div input {
    margin-left: 0.5rem;
}
#bouton-recherche-simple {
    margin-top: 0.5rem;
}

#recherche-custom {
    display: grid;
}
#recherche-custom input[type="date"] {
    height: 1.8rem;
}

/*  Affichage de certaines parties de recherche dans une grille de 2 colonnes :
     - La première colonne décrit la partie
     - La deuxième colonne représente le contenu de la recherche */
#elements-recherche, #categories-recherche, #rubriques-recherche, #sections-recherche, #auteurs-recherche {
    display: grid;
    grid-template-columns: minmax(20px, 170px) auto;
    grid-template-rows: auto;
    margin-bottom: 0.7rem;
}

/*  Affichage de la sélection de catégories et rubriques
    SEULEMENT quand l'item 'Un article' est coché, */
#categories-recherche, #rubriques-recherche, #conteneur-sans-rubrique {
    transition: all 1s;

    /*  Effet de disparition des rubriques / articles 
        on rend les éléments invisibles, qui ne prennent pas de place
        puis on enlève leur marge basse pour éviter d'avoir un trou
        entre les élements restants.
        Enfin, on change leur z-index pour éviter qu'une zone fareflue reste cliquable */
    opacity: 0;
    height: 0px;
    margin-bottom: 0;
    z-index: -99999;
}
/*  On sélectionne en premier la première div parente commun à la case à cocher et la div à afficher
    on teste ensuite si la case est bien cochée, si oui, on sélectionne la div à afficher */
#recherche-custom:has(#elements-recherche #recherche-article:checked) #categories-recherche,
#recherche-custom:has(#elements-recherche #recherche-article:checked) #rubriques-recherche,
#recherche-custom:has(#elements-recherche #recherche-article:checked) #conteneur-sans-rubrique {
    transition: all 1s;

    /*  Effet d'apparition des rubriques / articles :
        on rétablit l'opacité, la hauteur et la marge entre les éléments.
        Enfin, on rétablit leur z-index pour les rendre cliquables */
    opacity: 1;
    height: 137px;
    margin-bottom: 0.7rem;
    z-index: 99999;
}
/*  Petite spécificité pour le conteneur-sans-rubrique */
#recherche-custom:has(#elements-recherche #recherche-article:checked) #conteneur-sans-rubrique {
    height: initial !important;
}

.recherche-premiere-colonne {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}
.recherche-premiere-colonne label {
    height: min-content;
    overflow: auto;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.recherche-premiere-colonne input {
    margin: 0.3rem 0.5rem 0 0.5rem;
    flex-grow: 1;
}

/*  Sélection des <divs> avec la classe recherche-premiere-colonne
    qui sont suivis d'une deuxième colonne qui contient un select */
.recherche-premiere-colonne:has(~ .recherche-deuxieme-colonne select) {
    align-self: center;
}

.recherche-deuxieme-colonne {
    overflow-y: auto;
    max-height: 137px;
}

.recherche-deuxieme-colonne div:not(.ss-wrapper, .ss-content, .ss-scroll) {
    grid-column: 2 / 3;
    display: flex;
    gap: 0.2rem;
    align-items: center;
    width: 100%;
}
.recherche-deuxieme-colonne div:not(.ss-wrapper, .ss-content, .ss-scroll) label {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.recherche-deuxieme-colonne select {
    width: 100%;
}

.periode-recherche {
    margin-bottom: 0.7rem;
    justify-self: center;
    text-align: center;
    line-height: 2rem;
}
.periode-recherche * {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

#recherche-custom .termes-recherche {
    margin-bottom: 0.7rem;
    justify-self: center;
    text-align: center;
}
#recherche-custom .termes-recherche * {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

#conteneur-sans-rubrique {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.conteneur-petit-resultat-recherche {
    width: 100%;
    margin-bottom: 2rem;
}
	
.vignette-excerpt {
	display: none;
	}
@media (max-width: 1100px) {
    #form-signature {
        width: fit-content;
    }
}

@media (max-width: 1044px) {
    #form-signature {
        width: 18rem;
    }

    .logo {
        height: 50px;
    }

    .box-rss {
    grid-template-columns: repeat(4, 1fr);
    padding: 1.5rem 0.5rem 1rem 0.5rem; /*haut droit bas gauche */
    order: 99;
    margin-top: 3rem;
    }
    #flux-rss-lien {
        grid-column: 1/5;
    }

    .page, #page-accueil {
        width: 100%;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        max-width: 100%;
        box-sizing: border-box;
        order: 10;
    }
    #page-accueil {
        margin-top: 5rem;
    }

    .slider {
        width: 94%;
    }

    .conteneur-gauche {
        width: 100%;
        max-width: 100%;
    }
    .conteneur-droit {
        width: 100%;
        padding-top: 2.5rem;
    }
    #conteneur-droit-1 {
    order: 15;
}


    .extrait-boucle, .extrait-boucle img {
        height: auto;
    }

    #extrait-secteur {
        width: 250px;
    }
    .article-auteur {
        width: 90%;
    }

    .article-contenu {
        width: 100%;
    }

    .titre-boucle *{
        text-align: center;
    }
    .vignette-excerpt p{
        font-size: 0.7rem;
    }

    #conteneur-secteurs {
        justify-content: center;
    }


    #conteneur-excerpt-gauche-1 {
        width: 100%;
        grid-template-columns: auto min-content;
        grid-template-rows: auto auto;
    }
    #conteneur-excerpt-gauche-1 .article-header {
        grid-column: 1;
        grid-row: 1;
    }
    #conteneur-excerpt-gauche-1 .article-contenu {
        grid-column: 1/2;
        grid-row: 2;
    }
    .conteneur-excerpt-gauche .article-thumbnail {
        grid-row: 1/3;
    }

}

@media (max-width: 800px) {
    #form-signature {
        width: fit-content;
    }

    /*  Changement de la disposition des pages de pétitions 
        Le but est de les afficher de cette manière :
        _________________
        | 'Article'     |
        | 'Pétition'    |
        | 'Secteurs'    |
        | 'Bas de page' |
        -----------------

        On utilise pour ca une subgrid qui va permettre
        de changer l'ordre de rendu des <div>s embriquées
        Ici, on a cette disposition :

        <div id="conteneur-article-petition"> <- grid
            <div id="conteneur-article-texte"> <- subgrid
                <div id="1">...</div>
                <div id="2">...</div>
            </div>
            <div id="conteneur-article-details"> <- subgrid
                <div id="3">...</div>
                <div id="4">...</div>
            </div>
        </div>

        L'utilisation des subgrids nous permet de les rendre dans cet ordre : 
        1
        4
        3
        2
    */

    #conteneur-article-petition, #conteneur-article {
        display: grid !important;
        grid-template-rows: repeat(4, auto);
        grid-template-columns: 1fr;
    }
    #conteneur-article-petition #conteneur-article-texte, #conteneur-article #conteneur-article-texte {
        display: grid;
        grid-row: 1 / 5;
        grid-column: 1;
        grid-template-rows: subgrid;
        grid-template-columns: subgrid;
    }
    #conteneur-article-details {
        display: grid;
        grid-row: 2 / 4;
        grid-column: 1;
        grid-template-rows: subgrid;
        grid-template-columns: subgrid;
    }

    #conteneur-article-petition #conteneur-article-texte #conteneur-gauche-1,
    #conteneur-article #conteneur-article-texte #conteneur-gauche-1 {
        grid-column: 1;
	    grid-row: 1 / 2;
    }
    #conteneur-petition-1, #conteneur-infos-evenement {
        grid-column: 1;
        grid-row: 1 / 2;
    }
    .conteneur-droit {
        grid-column: 1;
        grid-row: 2 / 3;
    }
    #conteneur-article-petition #conteneur-article-texte #conteneur-gauche-2,
    #conteneur-article #conteneur-article-texte #conteneur-gauche-2 {
        grid-column: 1;
	    grid-row: 4 / 5;
    }
}

@media (max-width: 480px) {
    .page {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    }
    h1 {
        font-size: 2rem;
    }

    .box-rss {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem 0.5rem 1rem 0.5rem; /*haut droit bas gauche */
        order: 99;
    }

    .slider {
        /*width: 88%;*/
    }

    #flux-rss-lien {
        grid-column: 1/3;
    }

    #conteneur-excerpt-gauche-1 {
        grid-template-columns: 2fr 1fr;
    }
    #conteneur-excerpt-gauche-1 .article-header {
        grid-column: 1/3;
    }
    .conteneur-excerpt-gauche .article-thumbnail {
        grid-row: 2;
    }
    #article-date-boucle {
        margin-top: 0.25rem;
    }
    boucle-extrait-secteur {
        display: block;
    }
    #conteneur-excerpt-gauche-1 p {
        font-size: 1rem;
    }
    #conteneur-excerpt-gauche-1 a {
        font-size: 0.8rem;
    }
    #article-date-boucle {
        font-size: 0.8rem;;
    }
    .conteneur-excerpt-gauche h1 {
        font-size: 1.5rem;
    }

    #barre-pagination-simple, #barre-pagination-grande-archive {
        padding-top: 0rem;
    }

    #conteneur-articles-section {
        gap: 0.5rem;
        justify-content: center;
    }
    #derniers-articles-section .vignette-largeur-200, #derniers-articles-section .vignette-largeur-200 a img {
        width: 175px !important;
    }
    #derniers-articles-section .vignette-hauteur-200, #derniers-articles-section .vignette-hauteur-200 a img{
        height: 175px !important;
    }
}

@media (max-width: 420px) {
    .ruban-bas {
        gap: 1.0rem;
    }
}

/*  Dans le cas où l'écran n'est pas assez grand pour afficher le formulaire de signature classique,
    on affiche le captcha sur 2 lignes différentes (1 ligne pour le texte, 1 ligne pour l'image) */
@media (max-width: 380px) {
    #code-captcha {
        display: grid;
    }
}

@media (max-width: 350px) {
    .ruban-bas {
        gap: 0.5rem;
    }
}
.wp-block-heading {
    margin-top: 5rem;
    margin-bottom: 2rem;
}
.wp_post_image {
    object-fit: cover;
}

.wp-block-button {
	width: fit-content;
	padding: 1rem;
	border-radius: 1rem;
	background-color: green
}

.wp-block-button a{
	color: white;
	text-decoration : none;
	font-size: 1.15rem;
	font-family: sans-serif;
}