*,::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;scrollbar-gutter:stable}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 : #e9e9e9;
  --color-yellow : #feffd6; 
  --color-blue : #d6ecff; 
  --color-green : #d6ffde; 
  --color-text : black; 
  --success : green;
  --error : red;  

  --font-primary: system-ui, sans-serif;
  --font-secondary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-google-primary: 'Noto Serif', serif;
  --text-base-size: .875rem;
  --body-line-height: 1.5;
  
  --ratio: 1.4;
  --line-height-large: 1.7;
  --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:15px;
  --border-radius-medium:25px;
  --border-radius-large:40px;
  --border-radius-big:70px;
  --min-column-size:10px;
  --count-column:1}

body {
    min-block-size: 100svh;	
    background: black;
    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}   

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

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: black;
    right: 6px;
    padding: 14px}
.dropdown {overflow: hidden}
.dropbtn {
    font-size: .875rem;
    font-weight: 400;
    line-height: var(--header-height);   
    color: black;
    margin-right: var(--space-2xs)}
.dropbtn:last-child {margin-right: 0}    
.scroll .dropbtn {line-height: var(--header-height-scroll)}     
.dropbtn span {border-radius:var(--border-radius-medium)}     
.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-family: var(--font-google-secondary);
    font-size: .9375rem;
    text-align: left;
    color: var(--color-green-dark);
    padding: .325rem .5rem} 
.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-green-light)}
.dropdown-content a.on {color:white; background-color:var(--color-blue)}     
.btn--contact.mobile {
    display: none;
    padding: 0 var(--space-s) 0 var(--space-xs);
    margin-left: auto;
    margin-right: 70px} 
.topnav + .btn--contact {text-align: right}

@media screen and (max-width: 63.9375rem) {
    .topnav a, .dropbtn {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);
        padding-bottom: 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;
        box-shadow: 2px 2px 10px rgb(0 0 0 / .2);
        background-color: var(--color-yellow)}
    .topnav.responsive a, .dropbtn {display: block}
    .topnav.responsive .dropdown-content {position: relative;}
    .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: var(--color-green-dark);
        border-radius:6px}
    .topnav.responsive .dropbtn.on span::before {content:inherit}
    .topnav.responsive .subNav .btn--contact {display: none}
    .btn--contact.mobile {display: block}      
    }

    /* BOUTONS
/* -------------------------- */
.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} 

: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-m);
    font-size: .875rem;
    text-align: center;
    color: black;	
    line-height: 38px;
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: var(--border-radius-large)}
.btn--secondary{
    padding: 0 var(--space-l);
    font-size: 1.250rem;
    line-height: 78px;
    text-transform: lowercase;
    letter-spacing: 1.5px;
    background-color: white;
    border-color: white}
.btn--primary.green {
    background-color: var(--color-green);
    border-color: var(--color-green)}
.btn--primary.black {
    background-color: black;
    border-color: black;
    color: white}
.btn--primary.transparent {
    background-color: rgb(0 0 0 / .1);
    border-color: transparent}    
.btn--outline {
    background: none;
    border-color: hsl(from var(--color-grey) h s 85%);
    color:var(--main-color)}          
.btn--underline {
    font-size: .9375rem;
    text-decoration: underline;
    font-weight: 600;
    color:var(--color-green-dark)}
.btn--group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: var(--space-m) 0}
.btn--group > * {flex:1; min-width: fit-content}

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

.separator {
    position: relative;
    margin-bottom: var(--space-l);
    width: 100%;}
.line {
    width: 100%;
    height: 40px;
    display: block}
.logo-footer {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    background-color:var(--color-yellow);
    padding: 5px}

footer :is(.content, .subFooter) {
    width:min(100%,80rem);
    margin-inline: auto}
footer .title {
    display: inline-block;
    margin-bottom: var(--space-3xs);
    line-height: var(--line-height-large)}   
footer ul {margin-bottom: var(--space-xs)}   
footer li {margin-bottom: var(--space-3xs)}  
footer, footer li a {font-size: .875rem}
footer .tel {margin-top: var(--space-2xs)}          
footer .sub li a, .identity :is(i, .tel) {color: rgb(0 0 0 / .6)}         
.subFooter {
    padding: var(--space-l) 0 var(--space-s);
    font-size: .750rem;
    line-height: var(--line-height-medium)}
@media only screen and (max-width: 63.9375rem) {
    footer {text-align: center}
    footer li {line-height: var(--line-height-medium)}
    footer .button {margin-top: var(--space-m)}
    }


/* ACCUEIL
/* ---------------------------------------------------- */
.page_sommaire main {padding-top: var(--header-height)} 

.intro--sommaire {
    grid-column: content;
    margin-top: var(--space-m)}
.intro--sommaire :is(article,picture),
.intro--sommaire .content {
    display: grid;
    place-content: center;
    padding: var(--space-l);
    background: white}
.intro--sommaire :is(article,.content) > * {
    width:min(100%,70ch);
    margin-inline: auto;
    text-align: center}
.intro--sommaire picture {background: var(--color-blue)}  

.titre--mini-caps {
    margin-bottom: var(--space-s);
    font-family: var(--font-primary);
    font-size: .750rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:rgb(0 0 0 / .55)}
.intro--sommaire p {margin-bottom: var(--space-s)}

.pratiquer--sommaire {
    grid-column: content; 
    margin-top: var(--space-l);    
    margin-bottom: var(--space-m);
    text-align: center}    
.pratiquer--sommaire h3 {text-align: left}    
.pratiquer--sommaire .button {margin-top: var(--space-m)} 
.page_pratiquer .pratiquer--sommaire {margin-top: 0}

.block--content {
    --count-column:2;
    gap: var(--space-s)}
.block--item {
    position: relative;
    line-height: 0}
.block--item :is(h2,h3) {
    position: absolute;
    z-index: 5;
    left: 0; bottom: 0;
    width: min(100%, 345px);
    padding: var(--space-xs);
    padding-top: 0;
    font-size: 1.125rem;
    font-weight: 400;
    text-align: left;
    text-transform: lowercase}
.block--item-simple :is(h2,h3) {
    margin-top: var(--space-s);
    font-size: .875rem;
    font-weight: 400}
.arrow {
    display: inline-block;
    vertical-align: middle}    

.page_sommaire .citation--sommaire {grid-column: full}
.citation--sommaire {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    background-image:url("/IMG/top-left-line.gif"), url("/IMG/bottom-right-line.gif");
    background-repeat: no-repeat, no-repeat;
    background-position:top left, bottom right}     
.citation--sommaire > * {grid-column: content}    
.citation--sommaire blockquote {
    width: min(100%, 60rem);
    font-size: var(--size-step-1)} 
.citation--sommaire a {margin-top: var(--space-s)}

.agenda--sommaire {
    grid-column: content;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    text-align: center}
.agenda--sommaire article {
    margin-bottom: var(--space-m);
    background-color: var(--color-blue)}    
.agenda--sommaire article:nth-child(2n + 1) {background-color: var(--color-green)}
.agenda--sommaire article:nth-child(2n + 1) h3 {order:0}
.agenda--sommaire article:nth-child(2n + 1) picture {order:1}
.agenda--sommaire article .link {
    display: flex;
    align-items: end;
    justify-content: space-between}
.agenda--sommaire picture {max-width:40%}        
.agenda--sommaire :is(h3,.h3) {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
    font-size: 1.125rem;  
    text-align: left;
    font-weight: 400}    
.agenda--sommaire :is(h3,.h3) span {
    display: block;
    margin-top: var(--space-2xs);
    color: black}    
.agenda--sommaire .button {margin-inline: auto}

.page_pratiquer .rubrique h1,
.page_agenda .rubrique h1 {
    margin-bottom: var(--space-s);
    text-align: center}

.page_article--agenda {margin-top: var(--space-m)}
.page_article--agenda article {
    padding-top: var(--header-height);
    padding-bottom: var(--space-l);
    background-color: var(--color-yellow)}
.page_article--agenda h1 {
    font-size: var(--size-step-1);
    letter-spacing: 1.5px}
.page_article--agenda :is(h2,h3) {
    margin-bottom: var(--space-3xs);
    font-family: var(--font-primary);
    font-size: .750rem;
    text-transform: uppercase;
    letter-spacing: 1.75px;
    line-height: var(--line-height-medium);
    color: #666}
.page_article--agenda .chapo p {font-size: 1.0625rem}    

.actus--sommaire {
    grid-column: content;
    padding-top: var(--space-s);
    padding-bottom: var(--space-l);
    text-align: center}    
.actus--sommaire .link {place-items: center}
.actus--sommaire .link > * {grid-row: 1; grid-column: 1}    
.actus--sommaire .link span {
    z-index: 5;
    font-size: 1.250rem;
    letter-spacing: 1.5px}
    
   
/* RUBRIQUE ARTICLE
/* -------------------------- */
::selection {
  background: var(--color-blue);	
  color:black}

hr {width: 100%;border:none;border-top:1px solid hsl(from var(--color-grey) h s 85%);margin: var(--space-m) 0}

.error_404 .rub-chapo p {text-align: center}  

.rubrique, .article {
    padding-top:calc(var(--header-height) + var(--space-l));
    background-color: var(--color-yellow)}

.rubrique h1 {
    grid-column: span 2;
    font-weight: 400;
    font-size: 1.675rem;
    text-transform: lowercase;
    text-align: center;
    letter-spacing: 1.75px}   
.rub--list-entries {
    --count-column: 2;
    grid-column: content;
    grid-gap: var(--space-s);
    margin-bottom: var(--space-xl)}
.rub--list-entries,
.rub--list-entries article {background-color: transparent}
.rub--list-entries .logo {
    position: relative;
    overflow: hidden;
    background-color: black}
.rub--list-entries .logo img {opacity: .7}
.rub--list-entries .date {
    z-index:5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;right: 0;
    margin-bottom: 0;
    text-align: center;
    color: white;}
.rub--list-entries h2 {
    display: block;
    margin-top: var(--space-xs);
    font-size: .875rem;
    font-weight: 400;
    text-align: center}   

.art-content {
    grid-column: content;
    width: min(100%, 52.5rem);
    margin-inline:auto;
    padding: var(--space-m) 0;
    background: white}
.art-content > * {padding: 0 var(--space-m)}   
.art-content + .pratiquer--sommaire {
    grid-column: content;
    margin-bottom: var(--space-l)}    
.art-content :is(h1, h2, h3) {
    font-weight: 400;
    font-size: 1.250rem;
    text-transform: uppercase;
    letter-spacing: 1.75px;
    line-height: var(--line-height)}
.art-content :is(h1,.h1) {text-align: center}
.art-content :is(h2, h3, h4, h5) {
    font-weight: 400;
    line-height: var(--line-height)}
.art-content :is(h2,h3) {
    font-family: var(--font-primary);
    font-size: .750rem;
    color: #666}       
   
.art-content .chapo {padding: 0}
.art-content h1 + .chapo,
.art-content .content {margin-top: var(--space-m)}  
.art-content:has(.logo) h1 {padding-top: var(--space-l)} 
.article .logo {
    grid-column: content;
    width: min(100%, 75rem);
    margin-inline:auto;
    border-bottom: var(--space-l) solid var(--color-yellow)}

.art-content .chapo p {
    padding: var(--space-m);
    margin-bottom: 0;
    background-color: var(--color-blue)}
p,li,blockquote,pre {
    font-size: var(--text-base-size);
    text-wrap: pretty;
    line-height: var(--line-height-large)}
.art-content :is(p, ul, li) {font-size: 1.0625rem}   
.art-content  strong {background: var(--color-blue)}
i {font-style:normal}
.art-content  i {background: var(--color-green)}
.art-content :is(p, ul, li, .texteencadre-spip) a {
    text-decoration-line: underline;
    text-decoration-color:black}
.article .content a { 
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.11250em}          
a:is(:hover, :focus) {outline: none}

.art-content :is(p, ul, .texteencadre-spip, .video-container, .table) + :is(h2, h3, h4, h5) {margin-top: var(--space-xl)}
.art-content :is(p, ul, ol, h2, h3, h4, h5, .table) {margin-bottom:var(--space-s)}
.art-content p:has(+ :is(ul, ol)) {margin-bottom:var(--space-3xs) !important}
.art-content :is(h2, h3, h4, h5) strong {font-weight:400}

.art-content ol {padding-left: 1.065em}
.art-content ul > li {
    position: relative;
    list-style: none;
    padding-left:1.125rem}
.art-content ul > li:not(:last-child) {margin-bottom: .250em}
.art-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: .9rem;
    color: black;
    font-size: 1.250rem;
    line-height: 0}
.art-content ol li::marker {color: var(--main-color)}

.art-content .texteencadre-spip {
    color: black;
    background: var(--color-blue);
    border:none;
    border-radius: 3px;
    margin:  var(--space-s) 0;
    padding: .875rem 1.0625rem;
    font-size: .875rem}
    
.plan .art-content {margin-bottom: var(--space-2xl)}
.plan .art-content h1 {
    font-size: 1.675rem;
    text-transform: lowercase} 
.plan .art-content h2 {
    font-family: var(--font-google-primary);
    font-size: 1.0625rem;
    color: black}    

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin: var(--space-s) 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: hsl(from var(--main-color) h s 85%)}
.video-container iframe {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%}

table {
    margin: 0;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    width: 100%;
    font-size: .9375rem;
    font-weight: 400;    
    line-height: 1.35em}
th,td {
    padding:.575rem;
    text-align: left;
    line-height: 1.3em}
th {
    vertical-align: top;
    background-color: var(--color-green-dark);
    border: 1px solid  hsl(from var(--color-green-dark)h s 25%);
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-green-light)}
tr {background-color: white}
tr:nth-child(even) {background-color: var(--color-grey)}
td {border: 1px solid  hsl(from var(--color-grey) h s 85%)}
.art-items td strong {
    background: none;
    font-weight: 600}
@media only screen and (max-width: 39.9375rem) {
    .table {
        max-width: 88dvw;
        width: 100%;
        margin-inline: auto;
        overflow-x: scroll;
        scrollbar-color: var(--color-green-dark) var(--color-green-light)}
    th,td {padding:.375rem}}


/* FORMULAIRE
/* -------------------------- */  
.formulaire_spip form .form-hidden + div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-bottom: var(--space-l)} 
.formulaire_spip form :is(.saisie_input, .saisie_email, .saisie_textarea) {width: 100%}       
.formulaire_spip form label {
    display: inline-block;
    margin-bottom: var(--space-3xs);
    font-size: 1rem}       
.formulaire_spip :is(input[type=email],
input[type=text],
select,textarea) {
    width: 100%;
    padding: .5rem;
    background-color:var(--color-grey);
    height: 60px;
    border: none;
    border-radius: 5px;
    font-family: var(--font-google-secondary);
    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)}
.formulaire_spip textarea {min-height: 300px}
.formulaire_spip .explication {margin-top: calc(-1 * var(--space-s))}
.formulaire_spip .explication p {
    margin-bottom: 0;
    font-size: .750rem}
.formulaire_spip button[type="submit"] {
    cursor: pointer;
    width: 100%;
    height: 80px;
    line-height: 80px;
    border: none;
    border-radius: 40px;
    background: var(--color-green);
    font-size: 1.250rem;
    letter-spacing: 1.5px;
    text-transform: lowercase;
    color: black}
.hide--mobile {display: none}