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

a, .button {transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1)}
a.dropbtn:hover span {background-color: hsl(from var(--main-color) h s 85%)}
.dropdown:hover .dropdown-content {display: block}
.dropdown-content a:hover {color:black;background-color: var(--secondary-color)}     
.search-button:hover svg {scale:115%}
.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, .subNav, .socialNav, .langue, .search-content {margin-left: var(--space-2xl)}   
.subNav a {font-size: var(--size-step--1)}

.contentHeader {
    grid-column: full;
    padding-left: var(--space-s);
    padding-right: var(--space-s)} 
.contentHeader .logo-main {margin-left: 0; margin-right: auto}
/* En-tête au scroll : hauteur, texte du menu, logo et ombre changent ensemble, sur la même courbe */
.mainHeader {transition: box-shadow .25s cubic-bezier(0.23, 1, 0.32, 1)}
.contentHeader {transition: height .25s cubic-bezier(0.23, 1, 0.32, 1)}
a.dropbtn {transition: line-height .25s cubic-bezier(0.23, 1, 0.32, 1), color .15s ease, background-color .15s ease}
.logo-main img {transform-origin: left center; transition: scale .25s cubic-bezier(0.23, 1, 0.32, 1)}
header.scroll .logo-main img {scale: .9}
@media (prefers-reduced-motion: reduce) {
    .mainHeader, .contentHeader, a.dropbtn, .logo-main img {transition: none}
    }   
.subNav {display: flex;align-items: center;margin-left: var(--space-2xs)}
.langue {margin: 0 var(--space-2xs)}
  
footer {padding-top: var(--space-2xl)}
footer .content {
    display: flex;
    flex-wrap: wrap}
footer .contact {
    max-width: 40%;
    margin-right: auto}      
footer .contact p {font-size: var(--size-step-5)}
footer .social, footer .infos {margin-left: var(--space-2xl)}      
.subFooter {
    width: 100%;
    margin-top: var(--space-2xl)}  

.header--sommaire {
    padding: var(--space-s);
    padding-top: calc(var(--header-height) - var(--space-s))}
.image-single,
.carousel-cell a {
    display: grid;
    grid-template-areas: "center";
    place-items: center}
.image-single > *,
.carousel-cell a > * {grid-area: center}
.image-single picture,
.carousel-cell picture, 
.background-video, .container-video {height: calc(100svh - var(--header-height))}   
.header--sommaire .carousel-cell img,
.image-single img,
.youtube-background {opacity: .75}
.catchPhrase {
    z-index:2;
    max-width:70%;
    background: none}
.background-video .catchPhrase {
    position:absolute;
    margin-inline:auto;
    left:0;right:0;
    top:50%;
    transform: translateY(-50%)} 
.catchPhrase p {
    margin-inline:auto;
    font-size: var(--size-step-5);
    line-height: var(--line-height-small);
    color: white}
.catchPhrase p i {color: hsl(from var(--main-color) h s 80%)} 
.catchPhrase .buttons {margin-bottom: var(--space-xs)}

.page_sommaire main > * + * {margin-top: var(--space-2xl)}
.page_sommaire main {padding-bottom: var(--space-2xl)}

.intro--sommaire .content {
    grid-column: 4 / -4;
    display: flex;
    gap: var(--space-l)}
.intro--sommaire .content > * {flex: 0 1 50%} 
.intro--sommaire a {margin-top: var(--space-s)}
.slogan--sommaire p {
    padding:var(--space-2xl) 0;
    font-size: var(--size-step-3)}

.partners {
    --count-column:6;
    padding: var(--space-l)}
.partners h2 {grid-column: span 6} 
.partners figure {max-width:65%} 

.presta--sommaire {--count-column: 2}
.presta--sommaire .header {max-width: 70%}

.mission--sommaire {padding: var(--space-2xl) 0}
.mission--sommaire .rub--list-entries .header {grid-column: span 2}

.page_sommaire .banner-testimony {
    --count-column:4;
    grid-column: content}
.page_sommaire .banner-testimony :is(.header,.chapo) {grid-column: span 2}
.page_sommaire .banner-testimony .chapo p {max-width: 70%; margin-bottom: var(--space-s)}
.page_sommaire .banner-testimony .link {grid-column: span 4; margin-top: var(--space-s)}

.zoom-header {padding: var(--space-2xl)}       
.zoom h3 {font-size: var(--size-step-3)}

.footer_actus {padding-bottom: var(--space-m)}
.footer_actus section {grid-column: 4 / -4}
.footer_actus header {padding: var(--space-xl) 0} 
.footer_actus article {display: flex}  
.footer_actus .logo {
    max-width: 33%;
    margin-right: var(--space-m)}
.footer_actus .date {margin-top: 0} 

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

.section--rub  {padding: var(--space-2xl) var(--space-m)}
.section--rub article:first-of-type {border-top: 3px solid var(--color-grey-light)}
.section--rub article:last-child {border-bottom: 1px solid var(--color-grey-light)}
.section--rub h2 {transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.section--rub h2 {font-size: var(--size-step--1)}

.rub--list-entries {--count-column:2} 
.rub--list-entries.news :is(h2,h3) {
    max-width: 70%;
    font-size: var(--size-step-1)}
.rub--list-entries :is(h2,h3) {font-size: var(--size-step-2)}
.rub--list-entries .date {
    margin-top: 0;
    margin-left: auto}   
.rub--list-entries:not(.news) {--count-column:1}
.rub--list-entries.testimonies {
    --count-column:4;
    grid-gap: var(--space-m)} 


:is(.rub-header, .art-header) > * {max-width: 75%}
.rub-chapo {
    max-width: 50%;
    margin-bottom: var(--space-xl)}  

.page_art .art-container {
    grid-column: 4 / -4;
    display: flex;
    gap: var(--space-l);
    justify-content: space-between}
.art-content {
    order: 2;
    max-width: 45rem}

h1,.h1 {
    margin-bottom: var(--space-xl);
    font-size: var(--size-step-5);  
    text-wrap: balance}     
.art-logo {
    grid-column: full;
    padding:0 var(--space-s);
    margin-bottom: var(--space-2xl)}
.art-logo {clip-path: inset(0 var(--space-s))}
p,li,blockquote,pre {line-height: var(--line-height-large)}
.art-content :is(p, ul, blockquote) a:hover {background-color: hsl(from var(--main-color) h s 85%)}
.art-content :is(p, ul, blockquote) a:active {background-color:hsl(from var(--main-color) h s l)}
.btn--group > * {flex:0}
.art-button p {font-size: var(--size-step--1)}

.block > .content {padding-left: var(--space-m)}
button svg {margin-right: inherit}
.toggleBtn :is(h2,h3,h4) {
    font-size: var(--size-step-0);
    text-wrap: pretty}
.block .content :is(h2, h3, h4) {font-size: var(--size-step--1)}

.next-prev {
    --count-column:2;
    grid-gap: var(--space-l);
    margin-top:var(--space-xl)} 
.block + .next-prev {margin-top:var(--space-2xl)}
.next-prev a {
    align-items: flex-start;
    padding: var(--space-xs);
    font-size: var(--size-step-0)}
:is(.prev,.next) div {padding:0 0 0 var(--space-s)}
.next-prev a:hover {background-color: var(--secondary-color)}
.rubrique .next-prev {margin-top:var(--space-xl)}

.stickyNav {
    position: relative;
    order: 1;
    min-width: 15rem}    
.stickyNav nav {
    margin-top: 0;
    position: sticky}
.stickyNav li a {font-size:.875rem} 
.stickyNav li:hover {background-color:  hsl(from var(--secondary-color) h s 92%)}

.stickyNav nav,
.sticky--shop {top: calc(var(--header-height-scroll) + var(--space-m))}
.sticky--shop .product {width: 50%}
.sticky--shop .price {width:20%}
.sticky--shop .buy {width:30%}
.sticky--shop .buy span {text-align: left} 

.prestation .supTitle {margin: var(--space-l) 0 var(--space-s)}   
.prestation .toggleBtn {padding-top: var(--space-l);padding-bottom: var(--space-l)}
.prestation .toggleBtn :is(h2,h3,h4) {font-size: var(--size-step-2)}
.number {margin-right: var(--space-m)} 
.prestation .example {margin-top: var(--space-s);padding-top: var(--space-s)}
.prestation .card-testimony {grid-row:1;grid-column: 4 / span 3;margin: 0}
.prestation .subBlock {align-items: start}
.prestation .subBlock .content {grid-column: 8 / -1; max-width: inherit;margin:0}
.block .contactToggle {margin-top: var(--space-m); padding: var(--space-m) var(--space-s)}

.realisation :is(h1,.category)  {color: white}
.realisation .category {margin-bottom: var(--space-2xs)}
.realisation .header--sommaire {padding-bottom: 0}
.realisation .art-content {margin-bottom: var(--space-2xl)}
.real-media {padding-top: var(--space-2xl); padding-bottom: var(--space-l)}  
.real-media .mozaic {grid-column: 3 / -3}
.video > * {margin-top: var(--space-2xl);margin-bottom: var(--space-2xl)}
.real-plus {z-index: 2; margin-top: -66px; padding-top: 0;background: none;border:none}
.real-plus h2 {
    background-color: white;
    border-bottom: 1px solid var(--color-grey-light);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    line-height: 65px}
.sup--art-content {margin-top: var(--space-2xl)}
.real-plus ul {--count-column:3;grid-column: 3 / -3;gap: var(--space-m);padding-top: var(--space-m);padding-bottom: 0}   
.real-plus li, .real-plus li a {padding: var(--space-s)}
.real-plus li {font-size: calc(.85 * var(--size-step-0))}

.realisation .banner-testimony {margin: var(--space-2xl) 0}
.banner-testimony:has(.first) {--count-column:1;grid-column:6 / -6}
.banner-testimony:has(.first) h2 {grid-column: span 1}
.banner-testimony:has(.second) {--count-column:2;grid-column:4 / -4}
.banner-testimony:has(.second) h2 {grid-column: span 2}
.banner-testimony:has(.third) {--count-column:3;grid-column:3 / -3}
.banner-testimony:has(.third) h2 {grid-column: span 3}

.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]}
        .catchPhrase p {font-size: var(--size-step-4)}
        .page_sommaire main > * + * {margin-top: var(--space-xl)}

    }

@media only screen and (max-width: 89.9375rem) {
        :root {
        --border-radius-large:40px;
        --border-radius-big:75px;
        }
        .catchPhrase {width:80%}
        .intro--sommaire .content {grid-column: 3 / -3}
        .zoom-header {padding: var(--space-xl)}  
        .footer_actus section {grid-column: 3 / -3}
        .prestation .card-testimony {grid-column: 2 / span 4}
        .prestation .subBlock .content {grid-column-start: 7 }
    }

@media only screen and (max-width: 79.9375rem) {
        .catchPhrase {width:90%}
        .page_sommaire main > * + * {margin-top: var(--space-l)}
        .partners {--count-column: 4;padding: var(--space-m)}
        .partners h2 {grid-column: span 4}
        .zoom-header {padding: var(--space-l)}  
        footer .contact p {font-size: var(--size-step-4)}
        .footer_actus section {grid-column: content}
        .rubrique, .article {
            padding-top: calc(var(--header-height) + var(--space-l));
            padding-bottom: var(--space-xl)}
        .page_art .art-container {grid-column: content}
        h1, .h1 {font-size: var(--size-step-4)}     
        .rub-chapo {max-width: 70%}
        h1, .h1, .rub-chapo,.art-logo{ margin-bottom: var(--space-l)}
        .prestation .card-testimony {margin-right: var(--space-l)}
        .prestation .subBlock .content {grid-column-start: 6}
        .real-media .mozaic {grid-column: content}
        .banner-testimony:has(.first) {grid-column:4 / -4}
        .banner-testimony:has(.second), .banner-testimony:has(.third) {grid-column:content}
    }

@media only screen and (max-width: 71.9375rem) {
        .intro--sommaire .content {grid-column: content}
    }

@media (hover: hover) and (pointer: fine) {
    .section--rub article a:hover h2 {transform: translateX(.375rem)}
    .rub--list-entries a:hover img {transform: scale(1.05); opacity: .65}
    }