:root {
    --border-radius:35px;
    --border-radius-min:15px;
    --header-height:80px;
    }

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--content {grid-column: content}
.logo-main, header nav {margin-right: auto}    
header .logo-main {margin-left: 0}    
.langue, .btn--contact {display: block}  

.page_sommaire main section {
    --count-column:12;
    margin-bottom: var(--space-xl);
    padding:var(--space-2xl) 0}
.intro {--count-column:12; margin-bottom: var(--space-xl)}
.intro h1 {
    margin-bottom: var(--space-m);
    font-size: var(--size-step-2)}

.carousel,.background-video,.image-single {grid-column: content}
.background-video,.image-single,.diptyque,.triptyque,.quadriptyque,.blockquote,.highlight { margin-bottom: var(--space-xl)}
.carousel {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)}

.text--next2img  {grid-gap: var(--space-2xl)}
.text--next2img .article {
    grid-column: span 5 / -2;
    align-self: center}
.text--next2img picture {grid-column: 2 / span 5}
.text--next2img .article.switch {grid-column: 2 / span 5; grid-row: 1}
.text--next2img picture:has(+ .article.switch) {grid-column: span 5 / -2}

.page_sommaire .text--3Col {
    grid-gap: var(--space-xl);
    padding: var(--space-xl)}
.text--3Col > * {grid-column: span 4}
.text--3Col .article:not(:last-child) {margin-bottom: 0}
.text--3Col picture {margin-bottom: var(--space-l)}

.blockquote {--count-column:12}
.blockquote p {
    padding: var(--space-xs) 0 var(--space-xs) var(--space-l);
    border-left-width:10px}
.highlight :is(h2,h3,h4) {
    grid-column: 5 / -5;
    padding: var(--space-xl) 0 0}
.highlight p {
    grid-column: 5 / -5;
    padding: var(--space-xl) 0 calc(var(--space-xl) - var(--space-xs))}

.diptyque {
    flex-direction: row; 
    column-gap: var(--space-xl);
    row-gap: 0}
.triptyque {
    --count-column:3;
    grid-gap:var(--space-xl)}
.triptyque picture:last-child {grid-column: span 1}
.quadriptyque {
    --count-column:12;
    grid-gap:var(--space-xl)}
.quadriptyque picture {grid-column: span 5}    
.quadriptyque picture:nth-of-type(n + 2):nth-of-type(-1n + 3) {grid-column: span 7}    

.video {
    margin-bottom: var(--space-xl);
    padding: var(--space-xl) 0}

.footer .content {--count-column:12}
.footer .logo--footer  {grid-column: span 5}
.footer .col--footer {grid-column: span 3}   
.footer .adress, .footer .social {grid-column: span 2}   
.footer .social {display: flex}   
.footer .social > * {margin-left: auto; margin-right: var(--space-xs)}   
.subFooter {grid-column: span 12; margin-top: var(--space-2xl)}  


/* ARTICLE RUBRIQUE
/* -------------------------- */       
.intro :is(h1,p), .blockquote p,
.page_art .article h1,
.article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
.article :is(.toggleBtn,.block,.download,.btn-group,.table),
.art-img, .art-youtube, .art-sticky {grid-column: 4 / -4}

h2 {font-size: var(--size-step-3)}
h3 {font-size: var(--size-step-1)} 
h4 {font-size: var(--size-step-0)} 
h2,h3,h4,h5 {line-height: var(--line-height)}

.article :is(h2,h3,h4):has(strong) {font-size: var(--size-step-5)}
.article :is(h2,h3,h4):has(i) {font-size: var(--size-step-4)}   
.article :is(h2,h3,h4):has(strong),
.article :is(h2,h3,h4):has(i) {grid-column: 2 / -4; text-wrap: pretty}
.article h2:is(:has(strong),:has(i)) + :is(h3,h4,h5,p) {margin-top: calc(var(--space-xl) - var(--space-s))}     

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; font-size: 1.125rem}

.page_form_success {padding-bottom: var(--space-xl)}  
.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}       
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]}
    .text--next2img  {grid-gap: var(--space-xl)}
    .block > .content {grid-column: span 6 / -1}
    }

@media only screen and (max-width: 89.9375rem) {
    .page_sommaire main section,
    .page_sommaire :is(.background-video,.image-single,.diptyque,.triptyque,.quadriptyque,.blockquote,.highlight) { margin-bottom: var(--space-l)}
    .article h2:has(strong) {text-wrap: pretty}
    .page_sommaire .text--3Col {grid-gap: var(--space-l);padding: var(--space-l)}
    .diptyque { column-gap: var(--space-l)}
    .triptyque,.quadriptyque {grid-gap:var(--space-l)}
    }

@media only screen and (max-width: 79.9375rem) {
    .dropbtn span {padding: .375rem .5rem}
    .article :is(h2,h3,h4):has(strong) {font-size: var(--size-step-4)}
    .article :is(h2,h3,h4):has(i) {font-size: var(--size-step-3)}
    .article :is(h2,h3,h4):has(strong),
    .article :is(h2,h3,h4):has(i) {grid-column-end: -3}  
    .intro :is(h1,p), .blockquote p,
    .page_art .article h1,
    .article :is(h2,h3,h4,h5,h6,p,ul,blockquote,pre),
    .article :is(.toggleBtn,.block,.download,.btn-group,.table),
    .art-img, .art-youtube, .art-sticky,
    .page_form form, .article.page_form .art-chapo,.page_form_success .art-chapo.success {grid-column: 3 / -3}
    .highlight :is(h2,h3,h4,p) {grid-column: 4 / -4}
    .text--next2img  {grid-gap: var(--space-l)}
    .footer .logo--footer  {grid-column: span 4}
    .footer .col--footer {grid-column: span 3}   
    .footer .social {grid-column: span 2}    
    }

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