:root {
    --border-radius:35px;
    --header-height:100px;
    }

a {transition: all .15s ease-in-out}
.dropbtn {
    margin-right: .5rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 54px}
a.dropbtn:hover span {background-color: rgb(0,0,0,.15)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:black;background-color: rgb(0,0,0,.15)}
.search-button:hover svg {scale:115%}
.show--mobile {display: none}
a.tag:hover {border-color: var(--main-color) }
a.tag.selection:hover {border-color: #f17171 }

.mainGrid--desktop, .countGrid--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)}
 
.mainNav, .subNav, .socialNav,
.langue, .search-content {margin-left: var(--space-2xl)}   
.subNav a {font-size: var(--size-step--1)}
  
footer {padding-top: var(--space-2xl)}
footer .content {--count-column:8}
footer ul {
    grid-column: span 2;
    margin-bottom: var(--space-xl)}   
.subFooter {grid-column: span 8; margin-top: var(--space-2xl)}  
.subFooter a + a {font-style: italic}

.page_sommaire main {padding-top: calc(var(--header-height) + var(--space-xl))}
.page_sommaire main:has(:is(.carousel,.background-video,.image-single)) {padding-top: calc(var(--header-height) + var(--space-m))}
.page_sommaire :is(.carousel,.background-video,.image-single) {
    grid-column: content;
    margin-bottom: var(--space-2xl)}
.background-video {min-height: 80svh}
.accroche {padding:0 0 var(--space-xl)}
.accroche p {
    font-size:var(--size-step-3);
    line-height:var(--line-height-medium)}

.footer_actus {padding-bottom: var(--space-m)}
.footer_actus section {
    --count-column: 2;
    grid-column: 4 / -4}
.footer_actus header {grid-column: span 2; padding: var(--space-xl) 0} 
.footer_actus article {display: flex}  
.footer_actus .logo {
    max-width: 33%;
    margin-right: var(--space-m)} 
.footer_actus :is(h3, .h3) a {
    font-size: var(--size-step-0);
    line-height:var(--line-height-medium)}

/* ARTICLE RUBRIQUE
/* -------------------------- */
.rubrique, .article {padding-top: calc(var(--header-height) + var(--space-xl))}
.rubrique {padding-bottom: var(--space-2xl)}   
.rubrique section {--count-column:4}
.rubrique section.oddColumn {
    --count-column:3;
    grid-column: 3 / -3}    

h1 {font-size: var(--size-step-5)}
h1,.h1 {text-wrap: balance}         

:is(.rubrique,.article) h1 {
    grid-column: 4 / -4;
    margin: var(--space-m) 0 var(--space-l)}
.rubrique p.rub-chapo,
.article p.art-chapo {
    font-size: var(--size-step-0);
    line-height: var(--line-height-large)}
.rubrique p.rub-chapo {
    grid-column: content;
    justify-self: center;
    max-width: 56.25rem;
    margin-bottom: var(--space-xl)}
.art-logo {
    grid-column: content;
    margin-bottom: var(--space-2xl)}

.article p.art-chapo,
.article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article :is(.list--tag,.date,.toggleBtn,.block,.download,.btn-group,.table),
.art-img, .art-youtube, .art-sticky {grid-column: 5 / -5}
    
p,li,blockquote,pre {line-height: var(--line-height-large)}

.article :is(p, ul, blockquote) a:hover {background-color: hsl(from var(--main-color) h s 85%)}
.article :is(p, ul, blockquote) a:active {background-color:hsl(from var(--main-color) h s l)}
.btn-group > * {flex:0}

.block > .content {grid-column: span 5 / -2}
.article button svg {margin-right: inherit}
.article .toggleBtn {padding: var(--space-m) 2.5rem; padding-left: 0}
.article .toggleBtn :is(h2,h3,h4) {text-wrap: pretty}

section:has(+ .next-prev)  {padding-bottom: var(--space-xl)}
.next-prev {
    grid-gap: var(--space-l);
    margin:var(--space-xl) 0 var(--space-s)} 
.next-prev {--count-column:2}
.next-prev a {
    align-items: flex-start;
    padding: var(--space-xs);
    font-size: var(--size-step-1)}
:is(.prev,.next) div {padding:0 0 0 var(--space-s)}
.next-prev a:hover {background-color: hsl(from var(--main-color) h s l)}

.page_form form {
    grid-column: 5 / -5;
    justify-content: space-between;
    gap: var(--space-l)}
.page_form_success .art-chapo.success {grid-column: 5 / -5}
.page_contact hr {margin-top: var(--space-2xl)}         
form :is(.name, .email) {width: calc(50% - (var(--space-l)) / 2)}
.article.page_form .art-chapo {grid-column: 5 / -5}

@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]}
    :is(.rubrique,.article) h1,.article p.art-chapo,
    .article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
    .article :is(.list--tag,.date,.toggleBtn,.block,.download,.btn-group,.table),
    .art-img, .art-youtube, .art-sticky,
    .rubrique p.rub-chapo {grid-column: 4 / -4}
    .rubrique section {--count-column: 3}
    .rubrique .content .logo {border-radius: 25px}
    .block > .content {grid-column: span 6 / -1}
    .footer_actus section {grid-column: 3 / -3}
    .banner a {padding: var(--space-m) var(--space-s)} 
    }

@media only screen and (max-width: 89.9375rem) {
    .description :is(img, p) {grid-column: 3 / -3}
    .rubrique section.oddColumn {grid-column: content}
    .next-prev a {font-size: var(--size-step-0)}
    }

@media only screen and (max-width: 79.9375rem) {
    .page_sommaire main section {grid-column-gap: var(--space-m)}
    .dropbtn span {padding: .375rem .5rem}
    .footer_actus section {grid-column: 2 / -2; grid-column-gap: var(--space-m)}
    h1 {font-size: var(--size-step-4)}
    :is(.rubrique,.article) h1,.article p.art-chapo,
    .article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
    .article :is(.list--tag,.date,.toggleBtn,.block,.download,.btn-group,.table),
    .art-img, .art-youtube, .art-sticky,
    .rubrique p.rub-chapo {grid-column: 3 / -3}
    .page_form form, .article.page_form .art-chapo,.page_form_success .art-chapo.success {grid-column: 3 / -3}  
    }

@media only screen and (max-width: 71.9375rem) {
    .block > .content {grid-column-start: span 7}
    }