:root {
    --header-height:80px;
    --header-height-scroll:55px;
    --border-radius-medium:40px;
    --border-radius-large:70px;
    --border-radius-big:100px;
    --text-base-size: .875rem;
    }

a, .animation, .button {transition: all .15s ease-in-out}
a.dropbtn:hover span {background-color: var(--color-blue)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:black;background-color:var(--color-blue)}
.dropdown-content a:hover.on {color:var(--color-green); background-color:var(--color-green)} 
.btn--primary, .btn--secondary {transition: all .15s ease-in-out}    
.show--mobile {display: none}
.hide--mobile {display: block}

.mainGrid--desktop, .countGrid--desktop, .grid--desktop {display: grid}
.mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), 1fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), 1fr) [full-end]}
.countGrid--desktop {grid-template-columns: repeat(var(--count-column), 1fr)}
 
.openBtn {
    height:45px;
    border-radius: 22px}
.closeBtn {padding: var(--space-m)}
.mainNav, .socialNav, .sidebar .btn-group {display:block}      

.contentHeader {grid-column: content} 
.contentHeader .logo-main {margin-left: 0}    
.subNav {display: flex;align-items: center;margin-left: var(--space-2xs)}
.contentHeader .logo-main,
.topnav + .btn--contact {width: 245px}
.scroll .contentHeader .logo-main,
.scroll .topnav + .btn--contact {width: 170px}

.separator {margin-bottom: var(--space-2xl)}
footer .content {
    display: flex;
    align-items: start;
    justify-content: space-between}    

.intro--sommaire {--count-column:2; margin-top: var(--space-2xl)}
.intro--sommaire picture {padding: var(--space-xl)}
.intro--sommaire p, .titre--mini-caps, .article .titre--mini-caps {margin-bottom: var(--space-m)}

.pratiquer--sommaire { 
    margin-top: var(--space-2xl);    
    margin-bottom: var(--space-2xl)}
.pratiquer--sommaire .button {margin-top: var(--space-l)}
.page_pratiquer .rubrique h1 {margin-bottom: var(--space-l)} 
     
.block--content {
    --count-column:4;
    gap: var(--space-l)}
.block--item :is(h2,h3) {
    padding-left: var(--space-m);
    padding-bottom: var(--space-l);
    font-size: 1.625rem;
    letter-spacing: 1.5px}

.citation--sommaire blockquote {font-size: var(--size-step-2)}
.citation--sommaire a {margin-top: var(--space-m)}

.agenda--sommaire {
    --count-column:12;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl)}
.agenda--sommaire > * {grid-column: span 12}
.agenda--sommaire article {
    grid-column: 4 / span 8;
    margin-bottom: var(--space-xl);
    padding: var(--space-l) var(--space-2xl)}
.agenda--sommaire article:nth-child(2n + 1) {grid-column-start: 2}
.page_sommaire .agenda--sommaire article:nth-child(2n + 1) {margin-bottom: var(--space-l)}
.agenda--sommaire article .link {align-items:end}
.agenda--sommaire picture {max-width:inherit}    
.agenda--sommaire :is(h3,.h3) {
    padding: 0;
    width: 30%;
    font-size: var(--size-step-1);
    letter-spacing: 1.5px}   
.agenda--sommaire :is(h3,.h3) span {margin-bottom: 0}    

.page_agenda .agenda--sommaire {padding-bottom: var(--space-2xl)} 
.page_agenda .rubrique h1 {
    grid-column: span 12;
    margin-bottom: var(--space-l)}
    
.page_article--agenda article {padding-bottom: var(--space-2xl)}

.actus--sommaire {margin-bottom: var(--space-xl)} 


/* ARTICLE RUBRIQUE
/* -------------------------- */
.rubrique, .article {padding-top:calc(var(--header-height) + var(--space-2xl))}

.rubrique h1 {grid-column: span 4} 
.rub--list-entries {
    --count-column: 4;
    grid-gap: var(--space-l);
    margin-bottom: var(--space-2xl)}   

.art-content {padding: var(--space-xl) 0}
.art-content > * {padding: 0 var(--space-3xl)}
.art-content + .pratiquer--sommaire {margin-bottom: var(--space-2xl)}

h1,.h1 {text-wrap: balance}  
.art-content :is(h2,h3,h4,h5) {line-height: var(--line-height-medium)}
.art-content .chapo p {padding: var(--space-m) var(--space-2xl)}

.art-content h1 + .chapo,
.art-content .content {margin-top: var(--space-xl)}  
.article .logo {border-width: var(--space-2xl)}
   
.art-content :is(p, ul, .texteencadre-spip) a:hover {background-color: var(--color-blue)}
.art-content :is(p, ul, .texteencadre-spip) a:active {background-color:var(--color-green)}
.art-content .texteencadre-spip {padding: 1.0625rem 1.125rem}
.btn--group > * {flex:0}

.formulaire_spip form .form-hidden + div {gap: var(--space-m)} 
.formulaire_spip form :is(.saisie_input) {width: calc(50% - (var(--space-m) / 2))}
.formulaire_spip .explication {margin-top: calc(-1 * var(--space-m))}

@media only screen and (max-width: 99.9375rem) {
    .mainGrid, .mainGrid--desktop {grid-template-columns: [full-start] minmax(var(--min-column-size), .5fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), .5fr) [full-end]}
    .block--content {gap: var(--space-m)} 
    .block--item h3 {padding-left: var(--space-m); padding-bottom: var(--space-m)}
    .agenda--sommaire h3 {width: 35%}
    }

@media only screen and (max-width: 89.9375rem) {
    :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
    .block--item h3 {padding-left: var(--space-s);font-size: var(--size-step-0)}
    .agenda--sommaire article {grid-column: 3 / span 10;margin-bottom: var(--space-l);padding: var(--space-l)}
    .agenda--sommaire article + article {grid-column-start: 1}
    }

@media only screen and (max-width: 79.9375rem) {
    .contentHeader .topnav {margin-left: var(--space-2xs)}
    .topnav .btn--contact {padding: 0 var(--space-2xs)}
    .dropbtn {margin-right: var(--space-3xs)}
    .rub--list-entries {grid-gap: var(--space-m)} 
    }

@media only screen and (max-width: 71.9375rem) {
    .contentHeader {grid-column: full;margin-left: var(--space-xs);margin-right: var(--space-xs)}
    }