*,::before,::after{box-sizing:border-box}*{margin:0;font:inherit;}html,body{height:100%}html{color-scheme: dark light;hanging-punctuation: first last;scrollbar-gutter:stable}@media(prefers-reduced-motion:no-preference){html{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,ol{margin:0;padding:0}a{display:inline-block;text-decoration:none;color:black;line-height:var(--line-height)}#root,#__next{isolation:isolate}

:root {
  --color-text:#666;  
  --color-grey : #777;
  --color-grey-light : #ddd;
  --color-grey-more-light : #f1f1f1;
  --color-green : #6de2ac; 
  --color-highlight : hsl(from var(--main-color) h s 90%);
  --success : green;
  --error : red;  

  --font-primary: system-ui, sans-serif;
  --font-secondary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-google-primary: 'Google Sans', sans-serif;
  --text-base-size: 1rem;
  --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:50px;
  --header-height-scroll:50px;
  --border-radius-xsmall:4px;
  --border-radius-small:10px;
  --border-radius:15px;
  --border-radius-medium:25px;
  --border-radius-large:40px;
  --border-radius-big:70px;
  --min-column-size:10px;
  --count-column:1}

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

.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}
.sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}

.animation {transition-property: color, background-color, box-shadow; transition-duration: .15s; transition-timing-function: ease}
.animation--slow {transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1), opacity .3s ease}


/* 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 {
    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 CLASSIC
/* -------------------------- */
.topnav {
    display: flex;
    justify-content: center}
.btnNav { 
    position: absolute;
    color: black;
    right: 0;
    padding: 9px 14px}
.dropdown {overflow: hidden}
.dropbtn {
    font-size: .875rem;
    line-height: var(--header-height);   
    color: black}
.scroll .dropbtn {line-height: var(--header-height-scroll)}
.btnEntry:not(:last-child) {margin-right: var(--space-3xs)}    
.dropbtn span {
    position: relative;
    padding: .375rem .625rem;
    border-radius: var(--border-radius-xsmall)}     
.dropdown-content {
    display: none;
    overflow: hidden;
    position: absolute;
    background: linear-gradient(0deg,var(--color-grey-more-light) 0%, #FFF 100%);
    min-width: 160px;
    box-shadow: 2px 4px 10px 0px rgb(0,26,115,0.05);
    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(--main-color);
    padding: .325rem .5rem} 
.dropbtn.on {color: black}
.dropbtn.on span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: .625rem;
    height: 3px;
    width: calc(100% - 1.250rem);
    background-color:hsl(from var(--main-color) h s 85%)}
.dropdown-content a.on {color:black; background-color:hsl(from var(--main-color) h s 85%)}     
.btn--contact {
    display: none;
    margin-left: auto;
    text-align: right}
.btn--contact.mobile {margin-right:70px}

@media screen and (max-width: 63.9375rem) {
    .contentHeader:has( .responsive) {background-color: var(--secondary-color)}
    .topnav a, .btnEntry, .langue {display: none}
    .topnav.responsive {
        position: absolute;
        overflow: hidden;
        top: var(--header-height);
        width: 100%;
        display: block;
        padding-top: var(--space-s);
        padding-bottom: var(--space-s);
        border-radius: var(--border-radius);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: 0px 6px 6px rgb(0 0 0 / .05);
        background-color:var(--secondary-color)}
    .topnav.responsive a, .topnav.responsive .btnEntry, .topnav.responsive .langue {display: block}
    .topnav.responsive .dropbtn {
        width: 100%;
        margin: 0;
        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: hsl(from var(--main-color) h s 75%);
        color: black;
        border-radius:var(--border-radius-xsmall)}
    .topnav.responsive .dropbtn.on span::before {content:inherit}
    .topnav.responsive .subNav .btn--contact {display: none}
    .btn--contact.mobile,
    .topnav.responsive .stickyNav {display: block}      
    }

/* MENU SIDEBAR
/* -------------------------- */
.openBtn {
    align-items: center;
    background: black;
    padding: var(--space-s);
    color: white}
.openBtn span {display: none}      
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    background: var(--color-grey-light);
    overflow-x: hidden;
    transition: width 0.5s}
.sidebar.open {width: 50%}
@media only screen and (max-width: 63.9375rem) {.sidebar.open {width: 100%}}  
.closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--space-m);
    display: flex;
    align-items: center;
    color:white}
.closeBtn span {display: none}    
:is(.mainNav, .subNav) a {display:inline-block}    
.mainNav, .subNav, .socialNav {
    margin-top: var(--header-height);
    width: 500px;
    list-style: none}
.mainNav, .subNav, .socialNav,.langue, .search-content {margin-left: var(--space-l)}
.subNav, .search-content {margin-top: var(--space-s)}    
.mainNav a {
    text-decoration-line:underline;
    text-decoration-thickness: 4px;
    font-size: var(--size-step-3);
    text-transform: uppercase;
    line-height: 1.45em;
    color: white}
.subNav a {
    font-size: var(--size-step-0);
    line-height: var(--line-height-small);
    color: white} 
.socialNav a {
    display:inline-block;
    vertical-align: middle;
    padding:.625rem}    
.sidebar a.on {color:black}
.sidebar .btn--group {
    width: calc(100% - (2 * var(--space-l)));
    margin: var(--space-s) var(--space-l)}
@media only screen and (min-width: 30rem) {.sidebar .btn--group {max-width: 420px}}  
.sidebar .btn--primary {
    background-color: white;
    border-color: white;
    color: black}     
.sidebar .btn--secondary {
    border-color: white;
    color: white}

/* HEADER
/* -------------------------- */
.mainHeader {
    position: fixed;
    z-index: 20;
    top: 0;left: 0;right: 0;
    background-color: white}
.contentHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: var(--header-height)}    
.contentHeader .logo-main {
    mix-blend-mode: multiply;
    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)}

/* LANGUES
/* -------------------------- */
.dropDown--btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border:none}        
.languebtn {
    font-size: .75rem;
    color: white;
    line-height: var(--line-height);
    text-transform: uppercase;
    background: none;
    margin-top: .875rem;
    padding: .250rem .5rem}
.dropDown--btn.languebtn svg {margin-right: .5rem; margin-left: 0}          
.dropDown--content {display: none}
.langue .dropDown--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 .dropDown--content a {
    font-size:.975rem;
    color: black;
    padding: .375rem .5rem;
    display: block}   
.langue .dropDown--content a:hover {background-color: #ddd}
.dropDown--content.show {display: block}      

/* SEARCH
/* -------------------------- */
.page_search h1 i {
    display: block;
    background: none;
    font-size: var(--size-step-2);
    line-height: var(--line-height)}
.page_search p {grid-column:content; text-align: center}
.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    border: 1px solid white;
    background-color: transparent}
.search-input {
    padding: 0 0 0 .875rem;
    width: calc(100% - 40px);
    border: none;
    outline: none;
    font-size: .9375rem;
    color: black}  
.search-button {
    display: grid;
    place-content: center;
    width: 40px;
    padding: 0;
    transition: background-color 0.3s}
.search-input, .search-button {background: rgb(0,0,0,0.08)}
.search-form, .search-input, .search-button {height: 43px}      
.page_search .btn--primary {
    padding: .375rem .625rem;
    margin-bottom: var(--space-2xs);
    font-size: .750rem;
    letter-spacing: 3px}

/* CARROUSEL (scroll-snap natif, voir _carousel.html)
/* ---------------------------------------------------- */
.carousel {position: relative}
.carousel-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--carousel-gap, 0);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none}
.carousel-track::-webkit-scrollbar {display: none}
.carousel-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none}
.carousel-cell {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start}
.carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 6;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgb(255 255 255 / .8);
    color: var(--main-color);
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease, scale 160ms cubic-bezier(0.23, 1, 0.32, 1)}
.carousel-btn--prev {left: var(--space-xs)}
.carousel-btn--next {right: var(--space-xs)}
.carousel-btn:active {scale: .97}
.carousel-btn:disabled {opacity: .3; cursor: default}
.carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    margin-top: var(--space-s);
    padding-inline: var(--space-s)}
.carousel-dot {
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--main-color);
    opacity: .25;
    cursor: pointer;
    transition: opacity .2s ease}
.carousel-dot[aria-current="true"] {opacity: 1}
:is(.carousel-btn, .carousel-dot):focus-visible {outline: 2px solid magenta; outline-offset: 2px}
@media (hover: hover) and (pointer: fine) {
    .carousel-btn:not(:disabled):hover {background-color: white}
    }

/* Articles : cellules de 600px espacées, images de hauteur fixe ; pleine largeur sur mobile */
.article .carousel {--carousel-gap: var(--space-m)}
.article .carousel-cell {flex-basis: 600px}
.article .carousel-cell img {width: 100%; height: 395px}
.article > .carousel {margin: var(--space-xl) 0}
@media only screen and (max-width: 47.9375rem) {
    .article .carousel {--carousel-gap: 0}
    .article .carousel-cell {flex-basis: 100%}
    .article > .carousel {margin: var(--space-m) 0}
    }

/* Hero d'accueil (mobile et tablette) : le texte passe sous l'image, slides de même hauteur,
   l'image remplit l'espace laissé par un texte plus court. En desktop le texte est superposé en grille. */
@media only screen and (max-width: 63.9375rem) {
    .header--sommaire .carousel-track {align-items: stretch}
    .header--sommaire .carousel-cell > :is(a, .image-single) {
        display: flex;
        flex-direction: column;
        height: 100%}
    .header--sommaire .carousel-cell picture {flex: 1}
    .header--sommaire .carousel-cell img {height: 100%}
    }

/* ACCUEIL
/* ---------------------------------------------------- */
.header--sommaire {
    grid-column: full;
    padding-top:var(--header-height)}
.header--sommaire .carousel-cell {width:100%}
.background-video, .container-video {min-height: 35svh}
.container-video, .background-video {position: relative}
.carousel-cell picture,
.image-single picture,
.background-video {
    width: 100%;
    overflow: hidden;
    background-color: black}
.catchPhrase  {
    padding:var(--space-s) var(--space-xs);
    background-color: var(--secondary-color);
    text-align: center}
.catchPhrase p {
    font-size: var(--size-step-2);
    line-height: var(--line-height-medium);
    color: black}
.catchPhrase p i {color: hsl(from var(--main-color) h s 40%);background: none}   
.catchPhrase .buttons {margin-top: var(--space-xs)}

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

.intro--sommaire,
.slogan--sommaire {grid-column: full}
.intro--sommaire > * {grid-column: content}
.intro--sommaire h1 {
    margin-bottom: var(--space-xs);
    font-size: var(--size-step-1);
    font-weight: 600}
.intro--sommaire .supTitle {margin-bottom: var(--space-xs)}
.intro--sommaire p {color:var(--color-text)}
.intro--sommaire p + p {margin-top: var(--space-3xs)}
.intro--sommaire a {margin-top: var(--space-xs)}

.partners {
    --count-column:3;
    grid-column: content;
    padding-top: var(--space-m);
    border-radius: var(--border-radius-small);
    background: var(--color-grey-more-light)}
.partners h2 {grid-column: span 3; text-align: center}
.partners figure {margin-inline: auto}

.slogan--sommaire {
    background: var(--main-color);
    background: linear-gradient(0deg, var(--main-color) 0%, hsl(from var(--main-color) h s 20%) 100%)}
.slogan--sommaire p {
    max-width: 60rem;
    margin-inline: auto;
    padding:var(--space-m) var(--space-s);
    font-size: var(--size-step-2);
    line-height: var(--line-height-medium);
    text-align: center;
    color:var(--secondary-color)}

.presta--sommaire {grid-column: content}
.presta--sommaire .header p {margin: var(--space-s) 0 var(--space-m)}
.presta--sommaire .toggleBtn h3 {font-size: 1.125rem}
.presta--sommaire .block > .content {padding-left: var(--space-m)}
.presta--sommaire .number {
    margin-right: var(--space-2xs);
    color: hsl(from var(--main-color) h s 45%)}

.mission--sommaire {
    grid-column: full;
    padding: var(--space-m) 0;
    background: var(--secondary-color)}
.mission--sommaire .rub--list-entries .header {
    grid-column: span 1;
    display: flex;
    align-items: center;
    justify-content: space-between}
.mission--sommaire .rub--list-entries .header .button {
    margin-left: var(--space-2xs);
    min-width: fit-content}
.mission--sommaire .rub--list-entries .header h2 {
    max-width: inherit;
    margin-bottom: 0;
    font-size: var(--size-step-2);
    color: black}

.page_sommaire .banner-testimony h2 {
    font-size:var(--size-step-2);
    text-align: left;
    color:black}
.page_sommaire .banner-testimony .link {text-align: center}


.zoom {
    grid-column: content;
    background: white}
.zoom a {
    display: grid;
    grid-template-areas: "center";
    place-items:end}
.zoom a > * {grid-area: center}
.zoom-header {
    z-index: 2;
    display: flex;
    align-items: end;
    width: 100%;
    padding: var(--space-s)}       
.zoom h2 {
    margin-bottom:var(--space-2xs);
    color: white}
.zoom h3 {
    font-size: var(--size-step-1);
    line-height: var(--line-height-medium);
    color: white}   
.zoom picture {
    width: 100%;
    overflow: hidden;
    background: black}    
.zoom img {opacity: .7}  
.zoom-header .button {margin-left: auto}

.footer_actus {background: var(--secondary-color)}
.footer_actus section {
    --count-column: 2;
    grid-column-gap: var(--space-m);
    grid-column: content}
.footer_actus header {
    grid-column: span 2;
    text-align: center;
    padding: var(--space-m) 0}   
.footer_actus article {margin-bottom:var(--space-l)}                          
.footer_actus :is(h2,.h2) {margin-bottom: 0}
.footer_actus :is(h3, .h3) {
    display: block;
    font-size: var(--size-step-0);
    line-height: inherit}
.footer_actus :is(h3, .h3) a {line-height:var(--line-height-medium)}        
.footer_actus .date {margin-bottom: var(--space-2xs)}        
.footer_actus .logo {border-radius: var(--border-radius-xsmall)}        

footer {
    padding-top: var(--space-l);
    background: var(--main-color)}
footer .content {grid-column: content}
footer .contact {margin-bottom: var(--space-l)}   
footer .contact span {color: var(--color-grey-light)}
footer .contact .button {margin-top: var(--space-xs)}
footer .contact p {
    font-size: var(--size-step-5);
    line-height: var(--line-height-small);
    color: var(--secondary-color)}
footer .adress :is(p, strong) {color: var(--secondary-color)}
footer :is(ul, .infos) {margin-bottom: var(--space-m)}   
footer li a {
    line-height: 2.250em;
    color: white}
footer .phone a {margin-bottom: var(--space-2xs)}  
footer .smartphone a {color: white}      
footer .social a {
    display: flex;
    align-items: center}
footer .social svg {margin-right: var(--space-2xs)} 
.subFooter {
    margin-top: var(--space-l);
    padding: var(--space-2xs) 0;
    border-top: 1px solid rgb(255,255,255,.15);
    font-size: .750rem;
    color: var(--color-grey-light)}            
.subFooter a {color: var(--color-grey-light)}

/* TÉMOIGNAGES
/* -------------------------- */
.banner-testimony {
    grid-column: content;
    grid-gap: var(--space-s)}
.realisation .banner-testimony {margin: var(--space-m) 0}
.banner-testimony h2 {
    font-size: var(--size-step-1);
    text-align: center;
    line-height: var(--line-height-medium);
    color: var(--main-color)}
.card-testimony .container {padding: var(--space-s)}
.card-testimony {
    container: card / inline-size;
    border-radius: var(--border-radius-small);
    background-color: var(--secondary-color);
    color: white}
.prestation .card-testimony {
    grid-column: full;
    grid-row: 2;
    margin-top: var(--space-m)}
.card-testimony img {
    max-width:90px;
    overflow: hidden;
    margin-bottom: var(--space-s);
    border-radius: var(--border-radius-xsmall);
    background-color: white}
.card-testimony span {
    display: block;
    line-height: var(--line-height-medium)}
.card-testimony .title {
    font-size: var(--size-step-1);
    line-height: var(--line-height);
    color: var(--color-grey)}
.rub--list-entries:not(.news) .card-testimony h2,
.card-testimony h3 {
    font-size: 1.250rem;
    line-height: var(--line-height-small);
    color: var(--main-color)} 
.card-testimony .name {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-3xs);
    line-height: var(--line-height-small);
    text-transform: uppercase;
    font-weight: 600;
    color:black}
.card-testimony p {
    margin-bottom: 0;
    line-height: var(--line-height-medium);
    color: black}     
.card-testimony .work {
    margin-bottom:var(--space-3xs);
    font-weight: 600;
    color: black}    
.card-testimony a {
    margin-top: var(--space-2xs);
    font-size: .875rem;
    text-decoration: underline}    

@container card (width > 340px) {
    .card-testimony .container {
        display: flex;
        align-items: start;
        padding: var(--space-xs)}
    .card-testimony img {
        max-width: inherit;
        flex:1 0 90px;
        margin-right: var(--space-xs)}
    }

/* --- Témoignages de l'accueil : extrait coupé à 4 lignes avec « … » --- */
.card-testimony .testimony-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden}

/* --- Témoignages : Lire la suite (docs/temoignages-lire-la-suite.md) --- */
.card-testimony {--testimony-fade: var(--secondary-color); interpolate-size: allow-keywords}
.card-testimony .testimony-wrap {
    display: flex;
    flex-direction: column}
.card-testimony .readmore-toggle {
    order: 2;
    padding: var(--space-3xs) 0;
    margin-top: var(--space-3xs)}
.card-testimony .testimony-text {
    order: 1;
    position: relative;
    padding-bottom: 0;
    max-height: calc(var(--line-height-medium) * 1em * 7); /* ~7 lignes, ajustable */
    overflow: hidden;
    transition: max-height .25s cubic-bezier(0.23, 1, 0.32, 1)}
/* max-content : hauteur réelle du texte, animée là où interpolate-size existe ; 600px en repli */
.card-testimony .testimony-text.toggle {max-height: 600px; max-height: max-content}
.card-testimony .testimony-text:not(.toggle)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.6em;
    background: linear-gradient(to bottom, transparent, var(--testimony-fade))}
.card-testimony .btn-toggle {
    position: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    font-size: .875rem;
    font-weight: 600;
    line-height: var(--line-height-small);
    color: var(--main-color)}
.card-testimony .btn-toggle::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1)}
.card-testimony .btn-toggle.down::after {transform: rotate(-135deg)}
/* REDUCED MOTION : à garder après les transitions des témoignages, qu'il remplace */
@media (prefers-reduced-motion: reduce) {
    .card-testimony .testimony-text, .card-testimony .btn-toggle::after {transition: none}
    }

/* BOUTONS
/* -------------------------- */
.button {touch-action: manipulation; inline-size: fit-content; user-select: none;cursor: pointer;border: none}
.button:focus {outline: none}
button:focus-visible,
input:focus-visible,
select:focus-visible, 
.button:focus-visible {outline: 2px solid magenta; outline-offset: 2px}
:is(.btn--primary, .btn--secondary, .btn--outline):active {transform: scale(.97)}

.btn--primary,
.btn--secondary,
.btn--outline {
    display: inline-block;   
    vertical-align: middle;
    padding: .5rem .750rem;
    font-size: .875rem;
    text-align: center;
    color: white;	
    line-height: var(--line-height-small);
    background-color: var(--main-color);	
    border: 1px solid var(--main-color);
    border-radius: var(--border-radius-xsmall)}
.btn--secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: black}
.btn--outline {
    background: none;
    border-color: var(--color-grey-light);
    color: black}    
.btn--underline {
    font-size: 1.125rem;
    text-decoration: underline}

.white {
    border-color: white;
    color: white}
.smaller {padding: .375rem .5rem}

.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: hsl(from var(--main-color) h s 85%);	
  color:black}

@supports (animation-timeline: scroll(root)) {
    .progress {height: 2px;background: hsl(from var(--main-color) h s 60%);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)}}  
    }

.error_404 .return {
    grid-column: content;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25)}
.error_404 .art-header > * {
    margin-inline:auto;
    text-align: center}
 
.page_rub .rubrique, .page_art .article {
    background-color: white;
    padding-top: calc(var(--header-height) + var(--space-l));
    padding-bottom: var(--space-xl)}

.section--rub  {
    grid-column: content;
    padding: 0 var(--space-xs);
    border-radius: var(--border-radius-xsmall);
    background: var(--color-grey-more-light)}
.section--rub > * {
    max-width: 50rem;
    margin-inline:auto}   
.section--rub article {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-grey-light)}
.section--rub article:last-child {border-bottom: 0}    
.section--rub article a {
    display: flex;
    align-items: center;
    line-height: var(--line-height-medium)}
.section--rub h2 {
    padding-right: var(--space-s);
    font-size: var(--text-base-size)}
.section--rub .number {
    margin-right: var(--space-2xs);
    font-size: .750rem;
    color: var(--main-color)}
.section--rub .btn--next,
.prestation .btn--next {
    display: inline-block;
    flex: 0 0 45px;
    margin-left: auto;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--border-radius-xsmall);
    background-color:var(--color-grey-light);
    color: black} 

.rub--list-entries {
    --count-column:1;
    grid-column: content;
    grid-gap: var(--space-s)}
.rub--list-entries article a {
    display: grid;
    grid-template-areas: "center";
    place-items:end}
.rub--list-entries:not(.news) a {place-items: center}
.rub--list-entries article a > * {grid-area: center;}    
.rub--list-entries + .next-prev {margin-top: 0}
.rub--list-entries .title {
    z-index: 2;
    width:100%;
    padding: var(--space-s)}
.rub--list-entries img {opacity: .8}
.rub--list-entries :is(h2,h3)  {
    z-index:2;
    margin-bottom: var(--space-2xs);
    display: block;
    font-size: var(--size-step-0);
    line-height: var(--line-height-medium);
    color: white}
.rub--list-entries :is(h2,h3) a {line-height:var(--line-height-medium)}
.rub--list-entries picture {
    width:100%;
    background:black}
.rub--list-entries a.no-image {min-height: 12rem; background: var(--main-color)}
.rub-empty {grid-column: content; padding: var(--space-l) 0; color: var(--color-text)}
.rub--list-entries:not(.news) :is(h2,h3) {
    margin-bottom: 0;
    font-size: var(--size-step-2)}

.page_rub .mainHeader,
.page_art .mainHeader {border-bottom: 1px solid #e8e8e8}
.page_art .art-container {grid-column: content}

.rub-header,
.art-header, .art-content {grid-column: content}    
.art-header .date {
    margin-top: 0;
    margin-bottom: var(--space-xs)}
.rub-chapo {margin-bottom: var(--space-m)}

h1,.h1 {
    margin-bottom: var(--space-s);
    font-size: var(--size-step-3);
    line-height: var(--line-height-medium);
    color:var(--main-color)}
:is(h1,.h1):has(+ .rub-chapo) {margin-bottom: var(--space-s)}   
h2 {font-size: var(--size-step-2)}
h3 {font-size: calc(.85 * var(--size-step-1))} 
h4 {font-size: var(--size-step-0)} 
h2,h3,h4,h5 {line-height: var(--line-height-medium)}
:is(h2, h3, h4, h5) strong {font-weight:400}
p,li,blockquote,pre {
    font-size: var(--text-base-size);
    text-wrap: pretty;
    line-height: var(--line-height);
    color:var(--color-text)}
sup {font-size: .65em}
strong {font-weight:600;color:black}
i {background-color: var(--secondary-color);color: black;font-style:normal}  
/* Texte surligné dans les champs CKEditor (style « Surligner ») : couleur réglable par site via --color-highlight */
mark {padding-inline: .15em; border-radius: 2px; background-color: var(--color-highlight); color: var(--main-color); box-decoration-break: clone; -webkit-box-decoration-break: clone}
hr {width: 100%;border:none;border-top:1px solid var(--color-grey-light);margin: var(--space-m) 0}

.caps {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: .750rem;
    text-transform: uppercase;
    letter-spacing: .75px;
    line-height: var(--line-height-small);
    color: var(--color-text)}

.art-logo {
    grid-column: full;
    margin-bottom: var(--space-m)}
/* Arrivée du visuel d'article : l'image est visible dès le premier affichage, légèrement zoomée,
   puis se pose à sa taille (animation GSAP dans _scripts.html). Le clip garde le zoom dans le cadre. */
.art-logo {clip-path: inset(0)}
@media (prefers-reduced-motion: no-preference) {
    .art-logo img,
    :is(.page_sommaire, .page_real) .header--sommaire > .image-single img,
    .page_sommaire .zoom img {transform: scale(1.08); transform-origin: 50% 40%}
    } 
.date {
    display: inline-block;
    margin-top: var(--space-2xs);
    font-size: .750rem;
    line-height: var(--line-height-small);
    color:var(--color-grey)}

.art-content > * + * {margin-top:1em}
/* Variations de la règle de base (en em : elles suivent la taille de texte de l'élément) */
.art-content > h2 {margin-top: 1.25em}                                         
.art-content > h3 {margin-top: 1.4em}                                           
.art-content > h2 + h3 {margin-top: .25em}                                      
.art-content > h2 + :is(p, ul, ol) {margin-top: .75em}
.art-content > :is(h3, h4) + :is(p, ul, ol) {margin-top: .5em} 
.art-content > :is(.art-youtube, .art-img, .carousel, .art-frame, blockquote, .art-button, .download),
.art-content > :is(.art-youtube, .art-img, .carousel, .art-frame, blockquote, .art-button, .download) + * {margin-top: 1.5em}
.art-content > :is(.art-youtube, .art-img, .carousel, .art-frame, blockquote, .art-button, .download) + :is(h2, h3, h4) {margin-top: 1.9em}
.art-content > .art-chapo + * {margin-top: 2.25em}
.art-content > .art-chapo + h2 {margin-top: 1em}
.art-content li + li {margin-top: .35em}
.art-img picture + picture  {margin-top:var(--space-s)}
.art-youtube {margin-top: var(--space-s)}
.art-youtube + .art-youtube {padding-top: 0}

.art-chapo p {color: var(--main-color)}
.art-content .art-chapo p {font-size: var(--text-base-size); font-weight: 600}
.art-content h3 {color: var(--main-color)}
.art-content ul {padding-left: .375em}
.art-content ul > li {padding-left:.375em}
.art-content ul > ::marker {font-size:1.250em;color:black;content: "\2022"}

.art-button {text-align: center}
.art-button a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    border-radius: 8px;
    margin-bottom: var(--space-s);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-s);
    background-color:var(--main-color);
    text-align: left;
    transition: background-color .2s ease}
.art-button__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--main-color);
    transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1)}
@media (hover: hover) and (pointer: fine) {
    .art-button a:hover {background-color: hsl(from var(--main-color) h s 30%)}
    .art-button a:hover .art-button__arrow {transform: translateX(4px)}
    }     
.article .art-button p {
    margin-bottom: 0;
    line-height: var(--line-height-medium)}
.art-button a, .article .art-button p {color:var(--secondary-color)}  
.article .art-button p strong {color:white; font-weight: 400}    

.block .content > * + * {margin-top:.9375em}
.block + :is(h2,h3,h4) {margin-top: 1.375em} 
.toggleBtn {
    position: relative;
    display: flex;
    align-items:center;
    padding: var(--space-s) 2.5rem;
    padding-left: 0}
.block + .toggleBtn  {margin-top: 0}    
.toggleBtn :is(h2,h3,h4) {
    font-size: var(--size-step-1);
    line-height: var(--line-height-small)}
.block :is(h2,h3,h4) {font-size: var(--size-step-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: transform 200ms cubic-bezier(0.23, 1, 0.32, 1)}
.toggleBtn button.down svg {transform:rotate(45deg)}                 
.block {
    --count-column:12;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.23, 1, 0.32, 1);
    margin-top: 0;
    border-bottom: 1px solid rgb(0 0 0 / .15)}
.block > .content {overflow: hidden}
.block .content :is(h2,h3,h4) {font-size: var(--size-step-0)}          
.toggle {grid-template-rows: 1fr}
.block > * > :last-child {margin-bottom: var(--space-m)}
.block + :is(.art-img, .art-youtube) {margin-top:var(--space-xl)}

blockquote {
    padding: var(--space-s);
    background-color: var(--secondary-color);
    border-radius: var(--border-radius-small)}
blockquote p {color: black}
blockquote :is(h2,h3,h4,h5) {
    text-transform: uppercase;
    font-size: var(--size-step-1);
    font-weight: 600;
    line-height: var(--line-height-medium)}     

.article :is(p, ul, blockquote) a {text-decoration-line: underline}
a { text-underline-offset: 0.1em;
    text-decoration-thickness: 2px}      
a:is(:hover, :focus) {outline: none}

.art-frame {
    padding: var(--space-xs);
    margin-top: var(--space-s);
    border-radius: var(--border-radius);
    background-color: hsl(from var(--main-color) h s 90%)}
.art-frame span {
    display: block;
    padding: var(--space-s);
    border-radius: var(--border-radius);
    border:3px solid hsl(from var(--main-color) h s 80%)}    
.art-frame :is(h2,h3,h4,h5,p,ul,li),
.art-frame ul li::before {color: var(--main-color)}
.art-frame :is(h2,h3,h4,h5) {font-size:var(--size-step-0)}
.art-frame a { text-decoration-color: var(--main-color)}
.art-frame span > * + * {margin-top:.9375em}

.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: 500;
    font-size: .875rem;
    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 {
    overflow-x: auto;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    border-spacing: 0;
     width: 100%;
    font-size: .875rem;    
    line-height: 1.35em}
th {
    vertical-align: top;
    background-color: hsl(from var(--main-color) h s 85%);
    font-weight: 600}
th,td {
    padding:.575rem;
    text-align: center;
    line-height: 1.3em}
tr:nth-child(even) {background-color: #eee}

.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-more-light)}
.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-more-light);
    font-weight: 400;
    line-height: var(--line-height-medium);
    color: black}
.next-prev span {margin-bottom: var(--space-3xs)}
: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 {margin-top:var(--space-m)}   
.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-grey-more-light)}

.stickyNav {display: block}    
.stickyNav nav {
    margin-top: var(--space-m);
    padding: var(--space-2xs);
    padding-top: var(--space-xs);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color)} 
.stickyNav nav li::before {display: none}         
.stickyNav nav ul {margin: 0;padding: 0}        
.stickyNav nav li {
    padding: .175rem var(--space-2xs);
    margin-bottom: 3px;
    border-radius: var(--border-radius-xsmall);
    line-height: var(--line-height-small)}        
.stickyNav nav li a {
    display: block;
    line-height: var(--line-height);
    color:var(--main-color);
    text-decoration: none}   
.stickyNav nav li.current a {color: white}  
.stickyNav nav li.current {background-color:hsl(from var(--main-color) h s 22.5%)}
.stickyNav nav span {
    display: block;
    padding: var(--space-3xs) var(--space-2xs) var(--space-2xs);
    font-size: .875rem;
    font-weight: 600;
    line-height: var(--line-height-small);
    color: var(--main-color);
    text-transform: uppercase}
    
.sticky--shop {
    grid-column: content;
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: calc(var(--header-height-scroll) + var(--space-xs));
    z-index: 10;
    width: 100%;
    max-width: 54rem;
    margin-inline:auto;
    background-color:var(--secondary-color);
    border-radius: var(--border-radius-xsmall);
    overflow: hidden;
    font-size: 1.125rem;
    line-height: var(--line-height-small);
    transition: box-shadow .3s ease-out}
/* Ombre seulement quand le bandeau est collé sous l'en-tête (classe posée par ScrollTrigger, _scripts.html) */
.sticky--shop.is-stuck {box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.075)}
.sticky--shop + .art-chapo {margin-top: var(--space-l)}    
.sticky--shop .product {
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase}
.sticky--shop :is(.product, .price) {
    display: grid;
    place-content: center;
    text-align: center;
    padding: var(--space-2xs)}
.sticky--shop .price {
    width: 50%;
    font-weight: 600;
    background: var(--color-green)}
.sticky--shop .mention {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    text-transform: none}
.sticky--shop .buy {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 50%;
    padding: var(--space-2xs);
    background: var(--main-color);
    font-weight: 600;
    color: white;
    transition: background-color .2s ease}
.sticky--shop .buy:focus-visible {outline: 2px solid magenta; outline-offset: -4px}
.sticky--shop .buy svg {transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1)}
@media (hover: hover) and (pointer: fine) {
    .sticky--shop .buy:hover {background-color: hsl(from var(--main-color) h s 30%)}
    .sticky--shop .buy:hover svg {transform: translateX(3px)}
    }
.sticky--shop .buy span {
    display: inline-block;
    margin-left: var(--space-2xs);
    line-height: var(--line-height-small)}        
.sticky--shop strong {
    display: block;
    font-size: .750rem;
    font-weight: 400;
    color: var(--color-green)}
.sticky--shop svg {width:26px;height:26px}
/* Smartphone : une seule rangée pour moins masquer le texte. Produit et prix à gauche (vert), bouton à droite (bleu) */
@media only screen and (max-width: 39.9375rem) {
    .sticky--shop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) fit-content(45%)}
    .sticky--shop :is(.product, .price) {
        grid-column: 1;
        display: block;
        width: auto;
        text-align: left;
        background: var(--color-green)}
    .sticky--shop .product {grid-row: 1; padding-bottom: 0}
    .sticky--shop .product-name {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
    .sticky--shop .price {grid-row: 2; padding-top: 0}
    .sticky--shop .price .mention {display: inline; margin-left: .375em}
    .sticky--shop .buy {grid-column: 2; grid-row: 1 / span 2; width: auto}
    }

/* RÉALISATIONS
/* -------------------------- */
.categorie nav.btn--group {
    grid-column: content;
    padding: var(--space-2xs) 0;
    border-top: 3px solid var(--color-grey-light);
    border-bottom: 1px solid var(--color-grey-light);
    margin-top: 0;
    margin-bottom: var(--space-l)}
.categorie nav :is(.btn--primary, .btn--secondary, .btn--outline) {
    padding: 0 var(--space-xs);
    font-size: .750rem;
    line-height: 33px}
.categorie nav .btn--outline {
    flex: 0;
    border-color: hsl(from var(--color-grey) h s 78%)}
.categorie nav .btn--secondary.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: white}

.realisation {background-color: white}    
.realisation h1 {margin-bottom: 0}
.realisation .category {margin-bottom: var(--space-3xs)}
.real-plus {
    grid-column:full;
    background: var(--secondary-color);
    border-top: 1px solid white}
.real-plus .number {
    margin-right: var(--space-2xs);
    color: hsl(from var(--main-color) h s 45%)}
.real-plus h2 {
    grid-column: content;
    margin-bottom: 0;
    text-align: center;
    line-height: 50px}            
.real-plus p, .real-plus h2 span {margin: 0}            
.real-plus ul {
    grid-column: 2 / -2;
    --count-column:2;
    gap: var(--space-2xs);
    padding-bottom: var(--space-m);
    list-style: none}
.real-plus li {
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-2xs);
    border-radius: var(--border-radius-small);
    background-color: hsl(from var(--main-color) h s 85%);
    line-height: var(--line-height-small);
    color: var(--main-color)}   
.real-plus li:has(a) {
    padding: 0;
    background-color: var(--main-color)}
.real-plus li a {
    flex: 0 1 100%;
    display: flex;
    align-items: center;
    padding: var(--space-2xs);
    line-height: var(--line-height-small);
    color: white}              
.real-plus li svg {margin-right: var(--space-2xs)}
.sup--art-content {
    grid-column: content;
    margin-top: var(--space-l);
    margin-bottom: var(--space-s)}
.sup--art-content:has(+ .art-chapo) {margin-bottom: var(--space-m)}         
.realisation .article {grid-column: content; order:inherit}
.realisation .art-content {
    margin-inline: auto;
    margin-bottom: var(--space-m)}
.realisation .art-content:has(+ .banner-testimony) {margin-bottom: 0}
.real-media {
    grid-column: full;
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    background:var(--color-grey-more-light)}
.real-media + .video > * {margin-top: var(--space-s)}  
.real-media .mozaic {
    --count-column:2;
    grid-gap: var(--space-s);
    grid-column: content}
.real-media .link {
    grid-column: content;
    margin-top: var(--space-m);
    text-align: center}

.video {
    grid-column: full;
    background: var(--color-grey-more-light)}
.video > * {
    grid-column: content;
    margin-top: var(--space-l);
    margin-bottom: var(--space-l)}
.video picture {background-color: black}
.video img {opacity: .75}
.video .content {margin-left:5%;margin-right:5%;margin-bottom:5%}
.video svg {margin-bottom: -14px}
.video :is(h2,h3) {
    line-height: var(--line-height-medium);
    color:white}
.video h2  {
    font-size: 1.125rem;
    text-transform: uppercase}
.video h3  {
    margin: var(--space-2xs) 0;
    font-family: var(--font-google-primary);
    font-size: var(--size-step-3);
    line-height: var(--line-height-medium);
    text-transform: none;
    font-weight: 300}
.poster {
    display: grid;
    justify-content: left;
    align-items: end}
.poster :is(picture, svg, .content) {grid-row: 1; grid-column: 1} 
.video .poster picture {border-radius: var(--border-radius-small)} 
.poster :is(svg, .content) {z-index: 5} 
.poster svg {display: inline-block}
     


/* PRESTATIONS
/* -------------------------- */    
.prestation :is(.toggleBtn, .block, .chapo-suite) {grid-column: content}
.prestation .toggleBtn {padding-right: 3.5rem}
.prestation .toggleBtn :is(h2,h3,h4) {font-size: var(--size-step-1); font-weight: 400}
.prestation .toggleBtn button {text-align: right}  
.prestation .toggleBtn .btn--next svg {margin: 0}
.number {
    margin-right: var(--space-2xs);
    text-transform: uppercase;
    font-size: .875rem;
    font-weight: 600;
    color: var(--main-color) }
.prestation .supTitle {
    grid-column: content;
    margin: var(--space-m) 0 var(--space-xs)}
.prestation .block {--count-column:1}        
.prestation .subBlock {
    overflow: hidden;
    grid-column: 1}
.prestation .subBlock .content {grid-column: full}
.prestation p:has(+ .example) { margin-bottom: 0}   
.prestation .example {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px dashed rgb(0 0 0 / .3)}
.prestation .example span {
    display: block;
    margin-bottom: var(--space-3xs);
    line-height: var(--line-height-small);
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 600;
    color:var(--main-color)}
.prestation .example p {margin-bottom: 0}
.prestation .example li a {text-decoration: none}
.prestation .example svg {display: inline-block}
.chapo-suite .rub-chapo > * + * {margin-top:1em}
.contactToggle {
    display: block;
    margin-top: var(--space-m);
    padding: var(--space-s);
    background-color: var(--color-grey-more-light);
    border-radius: var(--border-radius-xsmall);
    text-align: center}
.contactToggle :is(.title,p) { line-height: var(--line-height-medium)}
.contactToggle .title { 
    font-size: var(--size-step-0);
    font-weight: 600;
    color: var(--main-color)}
.contactToggle p {margin-bottom: var(--space-xs)}


/* CONTACT
/* -------------------------- */
.page_form_success {padding-bottom: 0}
.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 .art-header > * {
    margin-inline:auto;
    text-align: center}
.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: #eee;
    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 .errors {margin-top: var(--space-2xs); padding-left: 0; list-style: none; line-height: var(--line-height-medium); color: var(--error)}
.page_form .errors :is(p, li) {font-size: .875rem; line-height: var(--line-height-medium); color: var(--error)}
/* Erreurs du formulaire : alerte en tête (#form-errors) */
#form-errors {
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
    padding: var(--space-s);
    border: 3px solid var(--error);
    border-radius: 5px;
    background-color: #fdecee;
    text-align: center;
    line-height: var(--line-height);
    color: var(--error)}
#form-errors:focus {outline: none}
#form-errors .title {font-size: var(--size-step-1); font-weight: 600}
#form-errors p {line-height: 1.5em; margin-bottom: 0;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}
.hide--mobile {display: none}