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

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)}

header.scroll {margin-top:-100px}
header .row--up {
    height: calc(var(--header-height) - 55px);
    border-color: rgb(0,0,0,1)}
.row--up, .row--down {grid-column: content}
.row--down {display: flex; align-items: center}
.logo-main, header nav {margin-right: auto}    
header .logo-main {margin-left: 0}    
.langue, .logo-bis, .search-content {display: block}

.intro {grid-column: span 4}
.intro > * {max-width: calc(50% - (var(--space-l) / 2))}
.intro h1 {font-size: var(--size-step-0)} 
.intro p {font-size: var(--size-step--1)} 
.h2--spotlight, .h2--recently {
    grid-row: 2;
    grid-column: span 2}

:is(.footer_actus, .recently) section {grid-column-gap: var(--space-l)}
.recently {padding-bottom:var(--space-l)}
.recently section {--count-column:4}
.recently header {grid-column: span 4; padding: var(--space-xl) 0}

.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 .link {grid-column: span 2}
.footer_actus .list--tag {margin-top: 0}    
.footer_actus .logo {
    max-width: 33%;
    margin-right: var(--space-m)} 
:is(.footer_actus, .recently) :is(h3, .h3) a {
    font-size: var(--size-step-0);
    line-height:var(--line-height-medium)}
  
footer {padding-top: var(--space-2xl)}
footer .content {--count-column:8}
footer .row--up {
    grid-column: span 8;
    margin-bottom: var(--space-m)}
footer ul, .col--tag {
    grid-column: span 2;
    margin-bottom: var(--space-xl)}
.col--tag {grid-column: span 1}    
.subFooter {grid-column: span 8; margin-top: var(--space-2xl)}  
.subFooter a + a {font-style: italic}
.footer_advert {grid-column: 5 / span 3}   

.page_search {padding-bottom:var(--space-xl)}
.search-component {
    grid-column: content;
    margin-top: var(--space-2xl);
    border-radius: 20px}
.search-select {gap: var(--space-2xs)}
.search-select :is(select,button) {width:calc(20% - var(--space-2xs))}

.page_sommaire main {padding-top: calc(var(--header-height) + var(--space-xl))}
.page_sommaire main:has(:is(.carousel,.background-video)) {padding-top: calc(var(--header-height) + var(--space-m))}
.page_sommaire main section {
    --count-column: 4;
    grid-column-gap: var(--space-l)}
.page_sommaire :is(.carousel,.background-video) {
    grid-column: content;
    margin-bottom: var(--space-2xl)}
:is(.carousel,.background-video) + .section--one > .intro {
    margin-top: calc(-1 * var(--space-xs));
    padding-bottom: var(--space-xs)} 
.background-video {min-height: 80svh}
.hook {padding:0 0 var(--space-xl)}
.hook p {
    font-size:var(--size-step-4);
    line-height:var(--line-height-medium)}   
.spotlight {grid-column: span 2}    
.spotlight article > * {grid-column: 1; grid-row: 1; z-index: 1}
.spotlight .content {align-self: end; padding:  var(--space-l); padding-right: 20%}        
.spotlight .logo {z-index: 0}
.spotlight h3 {font-size: var(--size-step-3)}    
.spotlight :is(h3 a, .date) {color: white}
.spotlight .tag.rub {background-color: transparent}   
.spotlight .tag {border-color:white;color: white}
.spotlight .tag.selection {border-color:#FF8383}
.spotlight .date {margin-bottom: var(--space-2xs)}
.highlight { margin-top: var(--space-l)}
.highlight p {font-size: var(--size-step-1)}
.row--first {grid-column-start:3}    
.row--third {
    grid-column:span 4;
    --count-column: 4;
    grid-column-gap: var(--space-l)}
.zoom, .banner {
    --count-column: 2;
    margin: var(--space-xl) 0 var(--space-2xl)}         
.banner {margin-top: 0}
.banner a {padding: var(--space-xl)}   


/* 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 .whatApp,
.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}
    .footer_advert p, .banner p {font-size: var(--size-step-1)}
    .banner a {padding:var(--space-s)}
    .next-prev a {font-size: var(--size-step-0)}
    }

@media only screen and (max-width: 79.9375rem) {
    .page_sommaire main section, .row--third {grid-column-gap: var(--space-m)}
    .intro > * {max-width: calc(75% - (var(--space-m) / 3))}
    .highlight { margin-top: var(--space-m)}
    .dropbtn span {padding: .375rem .5rem}
    .search-form {width: 150px}
    :is(.footer_actus, .recently) section {grid-column-gap: var(--space-m)}
    .footer_actus section {grid-column: 2 / -2}
    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}
    .hook {padding: 0 var(--space-m) var(--space-m)}
    }