*,::before,::after{box-sizing:border-box}*{margin:0;font:inherit;}html,body{height:100%}html{color-scheme: dark light;
    hanging-punctuation: first last;scroll-behavior:smooth}img,picture,svg,video{display:block;max-width:100%}img{vertical-align:middle;height:auto;object-fit:cover;line-height:0;font-style:italic;shape-margin:0.75rem;}input,button,textarea,select{font:inherit}button:focus,input:focus,select:focus{outline:none}p,h1,.h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul{margin:0;padding:0}a{display:inline-block;text-decoration:none;color:black;line-height:var(--line-height)}#root,#__next{isolation:isolate}

:root {
  --color-grey-light : #bbc0b5;
  --color-grey : #a8b1a7;
  --color-blue : #179add;
  --color-orange : #ff673e;
  --color-green : #00894c; 
  --success : green;
  --error : red;  

  --font-primary: system-ui, sans-serif;
  --font-secondary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-google-primary: 'Roboto', system-ui, sans-serif;
  --font-google-secondary: 'Oswald', system-ui, sans-serif;
  --text-base-size: 1.125rem;
  --body-line-height: 0;
  
  --ratio: 1.4;
  --line-height-large: 1.75;
  --line-height: 1.5;
  --line-height-medium: 1.3;
  --line-height-small: 1.15;

  /* Fluid type scale */
  --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem);
  --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem);
  --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem);
  --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem);
  --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem);
  --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem);
  --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem);
  --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem);
  --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem);
  --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem);
  --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem);
  --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem);
  --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem);
  --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem);

  --header-height:58px;
  --header-height-scroll:58px;
  --border-radius-xsmall:4px;
  --border-radius-small:10px;
  --border-radius:20px;
  --border-radius-large:40px;
  --border-radius-big:70px;
  --min-column-size:10px;
  --count-column:1}

body {
    min-height: 100svh;	
    background: white;
    font:normal 400 var(--text-base-size) var(--font-google-primary);
    line-height: var(--body-line-height);
    color:var(--main-color);
    text-rendering: optimizeSpeed;
    font-smooth: always;
    -webkit-font-smoothing: antialiased}
main, section, article {background-color: var(--color-grey-light)}    

.full-width { width: 100%}
.full-height { height: 100%}
.full-height-viewport { min-height: 100vh; min-height: 100dvh}
.no-line-height {line-height: 0}
.no-list-style {list-style: none}
.overflow-hidden {overflow: hidden}

.fadein, .fadeinmoveup {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    backface-visibility: hidden}

.animation {transition: all .15s ease-in-out}
.animation--slow {transition: all .55s ease-in-out}

.button {touch-action: manipulation; inline-size: fit-content; user-select: none;cursor: pointer;border: none}
.button:focus {outline: none} 
.button:focus-visible {outline: 2px solid magenta; outline-offset: 2px} 
sup {font-size: .65em}

/* GRID
/* -------------------------- */
.mainGrid, .autoGrid, .countGrid, .grid {display: grid}
.mainGrid {grid-template-columns: [full-start] minmax(var(--min-column-size), .75fr) [content-start] repeat(12, minmax(var(--min-column-size), 1fr)) [content-end] minmax(var(--min-column-size), .75fr) [full-end]}
.autoGrid {grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr))}
.countGrid {grid-template-columns: repeat(var(--count-column), 1fr)}
.max-width-1920 {max-width:120rem; margin-inline:auto}
.grid-column--full {grid-column: full}
.grid-column--content {grid-column: content}

.banner--rgpd {
    position: fixed;
    display: none;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: var(--space-m);
    background-color: black}
.banner--rgpd > * {
    max-width: 40em;
    margin:0 auto;
    text-align: center}
.banner--rgpd p {
    font-family: var(--font-google-primary);
    color: white;
    line-height: var(--line-height-medium)}
.banner--rgpd a {color: white; text-decoration: underline}   
.banner--rgpd .btn--group {
    justify-content: center;
    margin: var(--space-xs) auto 0}
.banner--rgpd .btn--accept {
    color: white;
    border-color: var(--success);
    background-color: var(--success)}
.banner--rgpd .btn--decline {
    border-color:#333;
    background: none;
    color: grey}

/* MENU
/* -------------------------- */
.topnav {
    display: flex;
    justify-content: center;
    /*overflow: hidden*/}
.btnNav { 
    position: absolute;
    color: white;
    right: 6px;
    padding: 14px}
.dropdown {overflow: hidden}
.dropbtn {
    font-size: 1rem;
    font-weight: 400;
    line-height: 4rem;   
    color: var(--color-grey-light);
    margin: 0}
.dropbtn span {
    position: relative;
    padding: .375rem .625rem}     
.dropdown-content {
    display: none;
    overflow: hidden;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 2px 4px 10px 0px rgb(0,26,115,0.15);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1}
.dropdown-content a {
    display: block;
    font-size: .875rem;
    text-align: left;
    color: var(--beige-text);
    padding: .375rem .625rem} 
.dropbtn.on {color: white}
.dropbtn.on span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: .625rem;
    height: 3px;
    width: calc(100% - 1.250rem);
    background-color:var(--color-orange)}
.dropdown-content a.on {font-weight:600; background-color:hsl(from var(--color-grey) h s 95%)}     
.btn--contact.devis {
    display: none;
    padding: 0 var(--space-s);
    margin-left: auto;
    margin-right: 70px;
    font-size: .9375rem;
    font-weight: 700;
    text-transform: uppercase} 

@media screen and (max-width: 63.9375rem) {
    .topnav a, .dropbtn, .langue {display: none}
    .topnav.responsive {
        transition: all .15s ease-in-out;
        position: absolute;
        overflow: hidden;
        top: var(--header-height);
        width: 100%;
        display: block;
        padding-top: var(--space-s);
        border-top: 1px solid rgb(255 255 255 / .2);
        border-radius: var(--border-radius);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: var(--main-color)}
    .topnav.responsive a, .dropbtn, .topnav.responsive .langue {display: block}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropbtn {
        width: 100%;
        font-size: var(--size-step-1);
        text-align: center;
        line-height: 2.75rem}
    .topnav.responsive .dropbtn.on {color:var(--main-color)}  
    .topnav.responsive .dropbtn.on span {     
        background-color: var(--color-grey);
        border-radius:6px}
    .topnav.responsive .dropbtn.on span::before {content:inherit}
    .topnav.responsive .subNav .btn--contact {display: none}
    .btn--contact.devis,
    .topnav.responsive .stickyNav {display: block}      
    }


/* HEADER
/* -------------------------- */
.mainHeader {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--main-color)}
.contentHeader {
    display: flex;
    align-items: center;
    position: relative;
    height: var(--header-height)}    
.contentHeader .logo-main {margin-left: var(--space-xs)}
header.scroll {box-shadow: 0 2px 15px rgb(0 0 0 / 0.15)}
header.scroll .contentHeader {height: var(--header-height-scroll)}
header .logo-main img {max-width: 115px}     

/* LANGUES
/* -------------------------- */
.langue--btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border:none;
    font-size: .875rem;
    color: var(--main-color);
    line-height: var(--line-height);
    background: none;
    padding: .250rem .5rem}
.langue--btn svg {margin-right: .250rem; margin-left: 0}          
.langue--content {display: none}
.langue--content {
    position: absolute;
    min-width: 118px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1}   
.langue--content a {
    font-size:.975rem;
    color: black;
    padding: .375rem .5rem;
    display: block}   
.langue--content a:hover {background-color: #ddd}
.langue--content.show {display: block}      

/* ACCUEIL
/* ---------------------------------------------------- */
.page_sommaire main:has(:is(.carousel,.background-video,.image-single)) {padding-top: calc(var(--space-2xs) + var(--header-height))}
.page_sommaire :is(.carousel,.background-video,.image-single) {
    grid-column: full;
    position: relative} 
.background-video {
    background-color: black;
    min-height: 50svh;
    position: relative}
.youtube-background {opacity: .8}
.carousel-cell picture,
.image-single picture {
    overflow: hidden;
    background-color: black}    
.catchPhrase {grid-column: content} 
.catchPhrase h1 {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
    font-size:var(--size-step-1);
    font-weight: 400;
    line-height:var(--line-height-small);
    text-align: center;
    color:var(--main-color)}
.catchPhrase h1 strong {
    display: block;
    font-size:var(--size-step-2)}
.catchPhrase .buttons {margin-top: var(--space-xs)}
.catchPhrase .buttons a:not(:last-child) {margin-right: var(--space-3xs)} 

.callToAction {
    display: block;
    padding: var(--space-m);
    background-color: var(--color-yellow-light);
    text-align: center}
.callToAction svg{
    margin-inline: auto;
    margin-bottom: var(--space-2xs)}
.callToAction .title {
    display: inline-block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-google-secondary);
    font-size:var(--size-step-3);
    text-transform: uppercase}    
.callToAction p {
    max-width: 60rem;
    margin-inline:auto;
    margin-bottom: var(--space-s);
    font-size:var(--size-step-2);
    line-height: var(--line-height-small)}
.gradient {
    --color-1:var(--color-orange);
    --color-2:var(--color-grey-light);
    background: linear-gradient(in oklab 0deg,var(--color-1),var(--color-2))}    

.page_sommaire .banner {
    grid-column: full;
    margin-bottom: var(--space-l);
    background-color: var(--color-yellow-light)}
.page_sommaire .banner .container {
    max-width: 60rem;
    margin-inline:auto;
    padding: var(--space-m);
    text-align: center}
.page_sommaire .banner p {
    font-size:var(--size-step-0);
    line-height: var(--line-height)}
.page_sommaire .banner a {margin-top: var(--space-xs)}

.page_sommaire .intro {
    grid-column: full;
    padding: 0}
.page_sommaire .intro .art-logo,
.benefits .content--left {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small)}
.page_sommaire .intro .art-chapo {margin-bottom:var(--space-l)}
.page_sommaire .intro .art-chapo h2 {
    font-size: 1.250rem;
    text-transform: uppercase;
    letter-spacing: 2px}
.page_sommaire .intro .art-chapo p {
    margin-bottom: var(--space-s);
    font-weight: 400;
    color:var(--color-grey-dark)}
@media only screen and (max-width: 63.9375rem) {
    .page_sommaire .intro .art-logo {
        grid-column: content;
        overflow: hidden;
        margin-top: var(--space-m);
        margin-bottom: 0}
    .page_sommaire .intro .art-chapo {
        border-top-left-radius: 0;
        border-top-right-radius: 0}}

.page_sommaire :is(.rub--entry, .video, .zoom, .statut, .customers) {margin-bottom: var(--space-l)}

.page_sommaire .rub--entry {
    grid-column: full;
    text-align: center}
.page_sommaire .rub--entry .content {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-m);
    background-color: var(--color-blue-dark)}      
.page_sommaire .rub--entry a {
    flex: 0 1 50%;
    padding-left:var(--space-xs);
    padding-right:var(--space-xs);
    border-right: 1px solid rgb(255 255 255 / .35)}
.page_sommaire .rub--entry a:nth-child(2n + 1) {border-left: 1px solid rgb(255 255 255 / .35)}
.page_sommaire .rub--entry h2 {padding: 0 var(--space-m) var(--space-s)}
.page_sommaire .rub--entry h3 {
    margin-top: var(--space-2xs);
    font-size:1.125rem;
    line-height: var(--line-height-small);
    color: white}

.page_sommaire :is(.video, .zoom) {grid-column: content}
.page_sommaire :is(.video, .zoom) picture {background-color: black}
.page_sommaire :is(.video, .zoom) img {opacity: .75}
.page_sommaire :is(.video, .zoom) .content {
    padding-top:var(--space-m);
    padding-bottom:var(--space-m);
    margin-inline: auto;
    text-align: center}
.page_sommaire .video svg {margin-bottom: -14px}
.page_sommaire :is(.video, .zoom) :is(h2,h3) {
    line-height: var(--line-height-medium);
    color:white}
.page_sommaire :is(.video, .zoom) h2  {
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 2px}
.page_sommaire :is(.video, .zoom) h3  {
    padding: var(--space-xs);
    font-size: var(--size-step-2);
    font-weight: 700}
.poster {
    display: grid;
    place-items: center}
.poster :is(picture, svg, .content) {grid-row: 1; grid-column: 1} 
.poster picture {border-radius: var(--border-radius-small)} 
.poster :is(svg, .content) {z-index: 5} 
.poster svg {display: inline-block} 

.som--contact {
    grid-column: full;
    background-color: var(--color-yellow)}
.som--contact .page_form {grid-column: content}
.som--contact .page_form form {margin-bottom: var(--space-s)}
.som--contact h2 {color: black}    
.som--contact h2 strong {
    font-weight: 400;
    color: hsl(from var(--color-yellow-light) h 150% 60%)}
.som--contact p {
    font-size: var(--size-step--1);
    margin-bottom: var(--space-s)}       
.som--contact label {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: var(--size-step-1);
    line-height: var(--line-height);
    color: black}

.statut {
    grid-column: content;
    padding:var(--space-m);
    border-radius: var(--border-radius-small);
    background-color: var(--color-blue-dark)}
.statut .section--rub {margin:0}
.statut .section--rub article {
    background-color: transparent;
    border-color:rgba(255, 255, 255, 0.35)}
.statut .section--rub h3 {color: white} 

.customers {
    grid-column: full;
    padding-bottom: var(--space-2xl);  
    background-color: var(--color-yellow-light)}
.customers .carousel-cell {
    padding: var(--space-xs);
    background-color: var(--color-yellow);
    border-radius: var(--border-radius-small);
    margin-right: var(--space-m)}
.customers article a {
    display: flex;
    align-items: center}    
.customers h2 {
    margin: var(--space-s) auto;
    text-align: center;
    color: black}
.customers a {color: black}    
.customers p {
    margin-left: var(--space-xs);
    font-size: var(--size-step--1);
    line-height: var(--line-height-medium)}
.customers p strong {
    display: block;
    font-size: var(--size-step-0)}          
.btn--arrow {
    display: grid;
    place-items: center;
    margin-left: auto;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--color-yellow-light)}
.btn--arrow svg {transform: rotate(-45deg)}        

.benefits {grid-column: full}
.benefits :is(.content--left, .content--right) {grid-column: content}
.benefits .content--left {
    padding: var(--space-s);
    background-color: var(--main-color)}
.benefits .content--right {background-color: white}
.benefits h2 strong {color:var(--color-blue-light)}
.benefits .word {
    display: flex;
    flex-direction: column;
    gap:var(--space-2xs);
    margin-inline:auto;
    max-width: 190px}
.benefits span {
    display: block;
    text-transform: uppercase}
.benefits .article ul {
    margin-bottom: 0;
    border-top: 1px solid rgb(0 0 0 / .15);    
    border-bottom: 1px solid rgb(0 0 0 / .15)}
.benefits .content--right li::before {top:1.85rem}        
.benefits .article li {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    font-weight: 400}
.benefits .article li:not(:last-child) {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(0 0 0 / .15)}       

.page_sommaire .reasons {grid-column: full}
.som--contact,
.reasons {padding: var(--space-l) 0}
.reasons header {
    grid-column:content;
    margin-bottom: var(--space-m)}
.statut h2,
.benefits h2,    
.reasons :is(h2 , p) {
    font-size: var(--size-step-2);
    text-align: center;
    line-height: var(--line-height-medium);
    text-shadow: rgb(228, 230, 236) 1px 1px;
    color:var(--main-color)}
.statut h2,
.benefits h2 {
    margin-bottom: var(--space-s);
    text-shadow: none;
    color:white}    
.reasons .content {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s)}
.reasons .content > * {
    flex: 0 1 calc(50% - ((2 * var(--space-xs)) / 3));
    display: flex;
    flex-wrap: wrap}  

.footer_actus .content {
    --count-column:2;
    grid-column: content;
    grid-gap: var(--space-m);
    padding-bottom: var(--space-m)}  
.footer_actus header {
    grid-column: span 2;
    display: flex;
    align-items: center;
    padding-top: var(--space-m)}  
.footer_actus .btn--primary {margin-left: auto}                                      
.footer_actus :is(h2, .h2) {
    font-size: var(--size-step-2);
    font-weight: 600;
    line-height: var(--line-height-small)}
.footer_actus :is(h2, .h2) a {
    font-family: var(--font-google-secondary);
    text-transform: uppercase;
    color: var(--main-color)}
.block--content .logo {
    overflow: hidden;
    border-radius: var(--border-radius-small)}
.block--content :is(h3, .h3) {
    display: block;
    margin-top: var(--space-m);
    font-family: var(--font-google-secondary);
    font-size: 1rem;
    font-weight: 600;
    line-height: inherit}
.block--content :is(h3, .h3) a {
    text-transform: uppercase;
    line-height:var(--line-height-medium);
    color:var(--main-color)}
.block--content p {
    margin-top: var(--space-xs);
    font-size: .875rem;
    line-height: var(--line-height-medium)}    
.block--content .btn--underline {
    margin-top: var(--space-3xs);
    color: var(--main-color)}    

.date {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: var(--line-height-small);
    color:var(--main-color)}
.date .btn--primary {
    padding: 0 var(--space-s);
    background-color: var(--color-blue-light);    
    border-color: var(--color-blue-light);
    font-size: .750rem;
    color: var(--main-color)}
.article .date {
    grid-column: content;
    margin-inline: auto;
    margin-top: var(--space-m);
    text-align: center}
.article .date + h1 {margin-top: var(--space-2xs)}                 

footer {
    color: var(--color-grey-light);
    background: var(--main-color)}
footer .content {
    --count-column:2;
    grid-column: content;
    padding-top: var(--space-l)}  
footer a {color:white}
footer :is(.logo-main, .social) {margin-bottom: var(--space-m)}   
footer ul {margin-bottom: var(--space-xs)}   
footer li {margin-bottom: var(--space-3xs)}  
footer li a {font-size: 1.125rem}  
footer p {
    margin-bottom: var(--space-3xs);
    line-height: var(--line-height);
    font-size: 1.125rem;
    color: var(--color-grey-light)}
footer .infos p + p {font-size: .875rem}    
footer .phone {margin-top: var(--space-m)}
footer .map {margin-top: var(--space-2xs)}
footer .phone a {
    padding: 0 var(--space-m);
    font-size: 1.5rem;
    font-weight: 600}     
footer .social a {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    line-height: 1.875em}
footer .social svg {margin-right: var(--space-2xs)}    
.subFooter {
    grid-column: content;
    margin-top: var(--space-l);
    padding: var(--space-s) 0;
    border-top: 1px solid rgb(255 255 255 / .15);
    font-size: .750rem}     


/* BOUTONS
/* -------------------------- */
:is(.btn--primary, .btn--secondary, .btn--outline):focus {outline: none}
:is(.btn--primary, .btn--secondary, .btn--outline):active {transform: scale(.95)}

.btn--primary,
.btn--secondary,
.btn--outline {
    display: inline-block;   
    vertical-align: middle;
    padding: 0 var(--space-s);
    font-family: var(--font-google-secondary);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .015em;
    color: var(--main-color);	
    line-height: 38px;
    background-color: var(--color-orange);	
    border: 1px solid var(--color-orange);
    border-radius: var(--border-radius-large)}
.btn--secondary {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--color-orange)}
.btn--outline {
    position: relative;
    padding: 0 var(--space-xl) 0 var(--space-xs);
    background: none;
    border-color: currentColor;
    border-radius: var(--border-radius-xsmall);
    text-align: left;
    font-size: .750rem;
    line-height: 34px;
    color:currentColor} 
.btn--outline svg {
    position:absolute;
    top: 6px;
    right: 10px}     
.btn--underline {
    font-size: 1rem;
    text-decoration: underline;
    color:black}

.btn--group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: var(--space-m) 0}
.btn--group > * {
    flex:1;
    min-width: fit-content}         

/* RUBRIQUE ARTICLE
/* -------------------------- */
::selection {
  background: var(--color-orange);	
  color:black}

.progress {height: 2px;background:var(--color-orange);position: fixed;top: 0;left: 0;width: 100%;z-index: 30;transform-origin: 0 50%;animation: scaleProgress auto linear;animation-timeline: scroll(root)}
@keyframes scaleProgress {
    0% {transform: scaleX(0)}
    100% {transform: scaleX(1)}}  

hr {width: 100%;border:none;border-top:1px solid rgb(0,0,0,.2);margin: var(--space-m) 0}

.error_404 .article {
    text-align: center;
    padding-bottom: 0}
.error_404 .return {
    grid-column: content;
    padding-bottom: var(--space-xl)}    

.rubrique, .article {padding-top:var(--header-height)}
.rubrique {background-color:var(--main-color)}
.section--rub {
    margin-top: var(--space-m);
    margin-bottom: var(--space-xl)}
.rubrique:has(nav) {padding-bottom: 0}       
.rub-logo {grid-column: 1 / span 10}
.rub-logo_suite {
    grid-column: 11 / span 4;
    display: flex;
    background: var(--color-orange)}
.rub-logo_suite img {mix-blend-mode: multiply}  

.rub-header h1 {
    position: relative;
    z-index: 1;
    margin-top: var(--space-m);
    margin-bottom: var(--space-2xs);
    font-weight: 500;
    color:white}
.rub-chapo p {
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-m);
    color:white}
.rub-chapo p strong {color:white}

.rub-header, .section--rub {grid-column: content}
.section--rub {background-color:var(--main-color)}
.section--rub .intro {
    margin-bottom: var(--space-m);
    font-family: var(--font-google-secondary);
    font-size: var(--size-step-1);
    text-transform: uppercase;
    text-align: center;
    line-height: var(--line-height-medium);
    color: var(--color-orange)}
.section--rub .intro span {
    display: block;
    font-size: var(--size-step-4)}
.section--rub .intro svg {
    margin-inline:auto;
    margin-bottom: var(--space-2xs)}    
.section--rub article {
    background-color:var(--main-color);
    padding: var(--space-xs) 0;
    border-top: 1px dashed rgb(255 255 255 / .2);
    border-bottom: 1px dashed rgb(255 255 255 / .2)}
.section--rub article:first-of-type {border-top: 4px solid rgb(255 255 255 / .2)}
.section--rub article:last-child {border-bottom: 4px solid rgb(255 255 255 / .2)}
.section--rub a { color: white}
.section--rub :is(h2, h3) { padding-right: var(--space-s)}
.section--rub .btn--next {
    margin-left: auto;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--border-radius-xsmall);
    background-color: var(--color-orange);
    color: var(--main-color)}

.rubrique .content h2 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--line-height-medium)}          
.section--rub article a {
    display: flex;
    align-items: center}
.section--rub article img,
.customers article img {
    max-width: 70px;
    border-radius: var(--border-radius-small)}
.section--rub :is(h2, h3),
.rub--list-entries h2 {
    font-size:1rem;
    line-height: var(--line-height-medium)}

.rub--list-entries {
    grid-column: content;
    grid-gap: var(--space-s)}
.rub--list-entries .logo {
    overflow: hidden;
    border-radius: var(--border-radius-small)}
.rub--list-entries .date {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-3xs);
    color: var(--color-grey-dark)} 
.rub--list-entries h2 a {line-height: var(--line-height-small)} 
.rub--list-entries:not(:has(+ .next-prev)) {padding-bottom: var(--space-xl)}  
.rub--list-entries + .next-prev {margin-top: 0}  
@media only screen and (min-width:  37.5rem) {.rub--list-entries {--count-column:2}} 

.article {padding-bottom: var(--space-xl)}

h1 {font-size: var(--size-step-3);line-height: var(--line-height-medium)}
/* h1,.h1{hyphens:auto} */
h2, h3, h4, h5 {
    font-family: var(--font-google-secondary);
    text-transform: uppercase}
h2 {font-size: var(--size-step-2)}
h3 {font-size: var(--size-step-1)} 
h4 {font-size: var(--text-base-size)} 
h5 {font-size: 1.375rem}
h2,h3,h4,h5 {line-height: var(--line-height-medium)}
p,li,blockquote,pre {
    font-size: var(--text-base-size);
    color: var(--color-grey-dark);
    text-wrap: pretty;
    line-height: var(--line-height)}

strong {font-weight:700}
.article blockquote :is(p, ul) strong {color: black }
.article i {
    color: var(--main-color);
    background-color:hsl(from var(--color-grey-light) h s 85%)}
i {font-style:normal}

.article :is(p, ul, blockquote) a {
    text-decoration-line: underline;
    text-decoration-color: var(--color-orange)}
a { color: var(--main-color);
    text-underline-offset: 0.1em;
    text-decoration-thickness: 2px}
.article a, .article a strong {font-weight: 500}          
a:is(:hover, :focus) {outline: none}

.art-content {grid-column: content}    
.art-logo {grid-column: full;margin-bottom: var(--space-m)} 
.art-img {overflow: hidden; border-radius: var(--border-radius)}   

.article h1 {
    position: relative;
    z-index: 1;
    grid-column: content;
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
    font-weight: 500}
.rub-header h1::after,    
.article h1::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 270px;
    height: 270px;
    border-radius: 50%;
    left: -110px;
    top: -100px;
    background-color: var(--color-orange);}

.art-chapo {
    grid-column: content;
    z-index: 1;
    line-height: var(--line-height)}
@media only screen and (max-width: 63.9375rem) {
.page_sommaire .intro .art-chapo {
    border-top-left-radius: 0;
    border-top-right-radius: 0}}
.article .art-chapo p {margin-bottom: var(--space-m)}  
.art-chapo p strong {color: var(--color-blue)}  
.article hr {
    grid-column: content;
    margin-inline:auto;
    max-width: 70px;
    height: 2px;
    border-bottom:1px solid var(--main-color);
    border-color:var(--main-color)}

.article :is(p, ul, blockquote, .download, .table, .block, .image) + :is(h2, h3, h4, h5) {margin-top: var(--space-l)}
.article :is(p, ul, ol, h2, h3, h4, h5, .table) {margin-bottom:var(--space-xs)}
.article p:has(+ :is(ul, ol)) {margin-bottom:var(--space-3xs) !important}
.article :is(h2, h3, h4, h5) strong {font-weight:600}

.art-img picture + picture  {margin-top:var(--space-m)}
.art-img, .art-youtube, .art-sticky {grid-column: content; margin:var(--space-s) 0}
.art-youtube + .art-youtube {padding-top: 0}
.article :is(.art-img, .art-youtube, .art-sticky, .block, .table) + :is(h2, h3, h4, h5) {margin-top:var(--space-l)}
.art-sticky {position: sticky;top:70px;z-index: 10}

.article ol {padding-left: 1.065em}
.article ul > li {
    position: relative;
    list-style: none;
    padding-left:1.125rem}
.article ul > li:not(:last-child) {margin-bottom: .250em}
.article ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: .95rem;
    color: var(--main-color);
    font-size: 1.375rem;
    line-height: 0;
    font-weight: 700}
.article ol li::marker {
    font-weight: 700;
    color: var(--main-color)}
    .article .stickyNav {
    display: block;
    margin-top: var(--space-m)}

.article .stickyNav nav {overflow: hidden}    
.article .stickyNav nav {
    padding: var(--space-xs);
    padding-top: var(--space-s);
    border-radius: var(--border-radius);
    background-color: var(--main-color)} 
.article .stickyNav nav li::before {display: none}         
.article .stickyNav nav ul {margin: 0;padding: 0}        
.article .stickyNav nav li {
    padding: .175rem var(--space-xs) .125rem;
    margin-bottom: 0;
    border-radius: var(--border-radius-xsmall);
    line-height: var(--line-height-small)}        
.article .stickyNav nav li a {
    display: block;
    font-size:1rem;
    line-height: var(--line-height);
    font-weight: 400;
    color:white;
    text-decoration: none}   
.stickyNav nav li.current a {color: white;font-weight: 500}  
.stickyNav nav li.current {background-color:hsl(from var(--main-color) h s 15%)}
.stickyNav nav span {
    display: block;
    padding: var(--space-3xs) var(--space-xs) var(--space-2xs);
    font-family: var(--font-google-secondary);
    font-size: .875rem;
    line-height: var(--line-height-small);
    color: white;
    text-transform: uppercase}    
.stickyNav .contact {
    display: block;
    background-color: var(--color-orange);
    padding: var(--space-xs) calc(var(--space-xl) + var(--space-2xs)) var(--space-xs) calc(2 * var(--space-xs));
    margin: calc(-1 * var(--space-xs));
    margin-top: var(--space-xs)}
.stickyNav .contact  {
    background-repeat: no-repeat;
    background-position:bottom -1px right 10px;
    background-size:80px auto;
    font-family: var(--font-google-secondary);
    font-weight: 600;
    text-transform: uppercase}
.stickyNav .contact p {
    margin-top: var(--space-3xs);
    margin-bottom: 0;
    font-family: var(--font-google-primary);
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    line-height: var(--line-height-small);
    color:var(--main-color)}
.stickyNav .contact img {margin-top: var(--space-3xs)}
.topnav .stickyNav {
    display: none;
    margin-top: var(--space-s)}
.topnav .stickyNav .contact {
    padding: var(--space-s) var(--space-3xl) var(--space-s) var(--space-l);
    margin: 0}
.topnav .stickyNav .contact {
    margin-top: var(--space-2xs);
    background-position: bottom -1px right 15px}      

.block > .content {grid-column: span 12; padding-left: var(--space-3xs)}
.block :is(p,figure) {margin-bottom: var(--space-m)}
.block :is(p,figure):last-child {margin-bottom:0}
.article .block + :is(p, ul) {margin-top:var(--space-l)}
.toggleBtn {
    position: relative;
    display: flex;
    align-items:center;
    padding: var(--space-s) 2.5rem;
    padding-left: 0}
.article .toggleBtn :is(h2,h3,h4) {
    font-family: var(--font-google-primary);
    font-size: var(--size-step-1);
    font-weight: 500;
    text-transform: none;
    margin-bottom: 0;
    line-height: var(--line-height)}
.article .block :is(h2,h3,h4) {font-size: var(--size-step-0)}          
.article :is(h2,h3,h4):has(+ .toggleBtn) {margin-bottom: 0}          
.toggleBtn button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    border:none;
    background: none;
    cursor: pointer}
.toggleBtn button svg {
    margin-left: auto;
    margin-right: 5px;
    transition: all .275s linear}
.toggleBtn button.down svg {transform:rotate(45deg)}                 
.block {
    --count-column:12;
    grid-template-rows: 0fr;
    transition: grid-template-rows 275ms;
    border-bottom: 1px solid rgb(0 0 0 / .2)}
.block > .content {overflow: hidden}       
.toggle {
    grid-template-rows: 1fr;
    padding-bottom:var(--space-m)}
.block + :is(.art-img, .art-youtube) {margin-top:var(--space-xl)}

blockquote {
    padding: var(--space-m) var(--space-m) calc(var(--space-m) - var(--space-s));
    margin: var(--space-s) 0;
    background-color: var(--color-orange);
    border-radius: var(--border-radius);
    color:var(--main-color)}
.article blockquote :is(h2,h3,h4,h5) {
    font-family: var(--font-google-secondary);
    font-size: var(--size-step-0);
    font-weight: 600;
    text-transform: uppercase;
    line-height: var(--line-height-medium)}
.article blockquote :is(h2,h3,h4,h5,p,ul,li) {color: var(--main-color)}
.article blockquote:has(h2, h3, h4, h5) {margin-top: var(--space-l)}

.article .carousel {grid-column: content}
.article .carousel-cell {overflow: hidden;border-radius: var(--border-radius-small)}

.download a {
    grid-column: content;
    display: flex;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    margin: var(--space-2xs) 0;
    padding: var(--space-2xs);
    background-color: hsl(from var(--main-color) h s 75%);
    font-family: var(--font-google-primary);
    font-weight: 400;
    font-size: var(--size-step-0);
    text-transform: uppercase}   
.download svg {margin-right:var(--space-2xs)}   
.article .download + :is(h2, h3, h4, h5, figure) {margin-top: var(--space-xl)}
.article .download + .download a {margin-top: 0}

table {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;    
    line-height: 1.35em}
.table {border: 1px solid  var(--color-blue-dark)}
th,td {
    padding:.575rem;
    text-align: left;
    line-height: 1.3em}
th {
    vertical-align: top;
    background-color: var(--color-blue-dark);
    border: 1px solid  var(--color-blue-dark);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: var(--main-color)}
tr {background-color: var(--color-grey-light)}
tr:nth-child(even) {background-color: #f2f2f2;}
td {border: 1px solid  var(--color-blue-dark)}
blockquote table {
    overflow: hidden;
    border-radius: var(--border-radius-small)}
@media only screen and (max-width: 39.9375rem) {
    .table {
        max-width: 88dvw;
        width: 100%;
        margin-inline: auto;
        overflow-x: scroll;
        scrollbar-color: var(--color-orange) var(--color-orange)}
    th,td {padding:.375rem}}

.next-prev {
    grid-gap: var(--space-xs);
    grid-column: content;
    margin-top:var(--space-l)}
.next-prev:not(:has(a)) {margin:0}    
@media only screen and (max-width: 63.9375rem) {
    article .next-prev:not(:has(.next a)),
    article .next-prev:not(:has(.prev a)) {grid-gap:0}
    }     
.prev,.next {background-color:var(--color-grey)}
.next-prev .back  {
    margin-top:var(--space-s);
    margin-bottom:var(--space-s)}
.next-prev .back a > * {vertical-align: middle}
.next-prev .back svg {
    display: inline-block;
    margin-right: .250rem}
.next-prev div a {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-grey);
    font-weight: 400;
    line-height: var(--line-height-medium);
    color: var(--main-color)}
.next-prev span {
    display: block;
    font-family: var(--font-google-secondary);
    font-weight: 600;
    font-size: .750rem;
    text-transform: uppercase;
    color:var(--main-color)}
:is(.prev,.next) img {width:140px}       
:is(.prev,.next) div {
    width:calc(100% - 140px);
    align-self: flex-end;
    padding: var(--space-xs)}

.rubrique .next-prev {
    --count-column:2;
    grid-gap: var(--space-s);
    grid-column: content}
.rubrique .next-prev:has(div) {margin:var(--space-xl) 0}   
.rubrique :is(.prev,.next) {background: none}       
.rubrique .prev {justify-self: self-end}       
.rubrique .next {justify-self: self-start}       
.rubrique .next-prev div a,
.rubrique .next-prev span {
    display: grid;
    place-items: center;
    background-color: var(--main-color);
    padding: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: white}
.rubrique .next-prev span {
    background: var(--color-blue-light)}

.page_contact hr {grid-column:content; margin-bottom: 0}             
.article.page_form .art-chapo {
    grid-column: content;
    margin-left:0 ;
    border-radius: var(--border-radius-small);
    font-family: var(--font-google-primary);
    line-height: var(--line-height)}
.article.page_form .art-chapo.success {margin-bottom:var(--space-xl)}     
.page_form form {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-m);
    margin-bottom: var(--space-l)} 
.page_form form > * {
    width: 100%;
    line-height: 0}
.page_form h1, .page_form .phone {
    grid-column: content;
    text-align: center}
.page_form .phone {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    margin-top: var(--space-s);
    margin-bottom: var(--space-xl);
    background-color: var(--color-orange);
    border-radius: 5px;
    font-size: var(--size-step-2);
    font-weight: 700;
    color:white}
.page_form .phone svg {margin-right: var(--space-xs)}         
.page_form .phone:has(+ .phone) {margin-bottom: 0}         
.page_form .phone + .phone {
    margin-top: var(--space-2xs);
    color: var(--color-blue-light);
    background-color: var(--main-color)}         
.article form h2 {
    margin-bottom: .5rem;
    font-size: var(--size-step-1);
    font-weight: 400}
.page_form :is(input[type=email],
input[type=text],
select,textarea) {
    width: 100%;
    padding: .5rem;
    background-color:white;
    height: 60px;
    border: none;
    border-radius: 5px;
    font-size: 1.250rem;
    line-height: var(--line-height);
    color:black}
input {outline: 2px solid rgb(0,0,0,0)}
input:user-valid {outline-color: var(--success)}
input:user-invalid {outline-color: var(--error)}
.page_form textarea {min-height: 300px}
.page_form button[type="submit"] {
    cursor: pointer;
    width: 100%;
    height: 80px;
    line-height: 80px;
    border: none;
    border-radius: 5px;
    background: var(--main-color);
    font-size: var(--size-step-1);
    font-weight: 700;
    color: white;
    text-transform: uppercase}
.page_form .section--rub {
    grid-column: content;
    margin-bottom: 0}
.page_form .section--rub article {
    max-width: 40rem;
    margin-inline: auto}
.page_form .section--rub :is(h2, h3) {
    margin: 0;
    font-size: 1.125rem}
.hide--mobile {display: none}