@charset "utf-8";
/* CSS Document */

html {scroll-behavior:smooth;}

*, *:before, *:after {box-sizing:border-box !important;}
* {box-sizing:border-box;}

:root {
  --screen-min: 320;
  --screen-max: 1920;
  --screen-range: calc(var(--screen-max) - var(--screen-min));
}

a {text-decoration:none; color:inherit;}
.underline {text-decoration:underline;}

body {background-color:white; height:100%; width:100%; margin:0; padding:0; color:#333; font-family: "Barlow Condensed", sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal; line-height:1.4; font-size:18px;}
.montserrat {font-family: "Montserrat", sans-serif;}

.tab {display:none;}
.mob  {display:none;}

.bgyellow {background-color:#f5e72f;}
.bgwhite {background-color:white;}
.bgwhite2 {background-color:#f5f5f5;}
.bggrey {background-color:#aaa;}
.bggrey2 {background-color:#bbb;}
.bggrey3 {background-color:#ccc;}
.bgblack {background-color:#333;}

.borderyellow {border-color:#f5e72f;}
.borderwhite {border-color:white;}
.borderwhite2 {border-color:#f5f5f5;}
.bordergrey {border-color:#aaa;}
.bordergrey2 {border-color:#bbb;}
.bordergrey3 {border-color:#ccc;}
.borderblack {border-color:#333;}
.borderyellow, .borderwhite, .bordergrey, .bordergrey2, .bordergrey3, .borderblack, .borderwhite2 {border-width:3px; border-style:solid;}

.colorwhite {color:white;}
.coloryellow {color:#f5e72f;}
.colorgrey {color:#aaa;}
.colorgrey2 {color:#bbb;}
.colorgrey3 {color:#ccc;}

.aligncenter {align-items:center;}
.alignstart {align-items:start;}
.center {text-align:center;}
.columns2 {columns: 2;}
.flex {display:flex;}
.flexcolumn {flex-direction:column;}
.floatright {float:right;}
.floatleft {float:left;}
.fontsize08 {font-size:0.8em;}
.fontsize3 {font-size: 3em;}
.fontsize15 {font-size:clamp(1.2em, 3vw, 1.5em);}
.gap {gap: clamp(40px, calc(40px + (60 - 40) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 60px);}
.gap10 {gap:10px;}
.gap20 {gap:20px;}
.gap30 {gap:30px;}
.gap40 {gap:40px;}
.gap3w {gap:3vw;}
.gap3h {gap:3vh;}
.grid {display:grid;}
.inlineblock {display:inline-block;}
.img {width:100%; height:auto; display:block;}
.justify {text-align:justify;}
.justifyspacebtw {justify-content:space-between;}
.justifycenter {justify-content:center;}
.justifyend {justify-content: end;}
.lineheight {line-height:1.6;}
.luminosity {mix-blend-mode:luminosity;}
.martop0 {margin-top:0;}
.martom {margin-bottom: clamp(30px, calc(30px + (80 - 30) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 80px); }
.martom10 {margin-bottom:10px;}
.martom20 {margin-bottom:20px;}
.martom40 {margin-bottom:40px;}
.marginauto {margin:auto;}
.margin0 {margin:0;}
.marginright20 {margin-right:20px;}
.maxwidth500 {max-width: 500px;}
.maxwidth300 {max-width: 300px;}
.maxwidth200 {max-width: 200px;}
.nospace {white-space:nowrap;}
.nowrap {flex-wrap:nowrap;}
.overden {overflow:hidden;}
.padding0 {padding:0;}
.paddingtop0 {padding-top:0;}
.padding10 {padding:10px;}
.padding20 {padding:20px;}
.padding30 {padding:30px;}
.padding40 {padding:40px;}
.paddingright10 {padding-right:10px;}
.paddingright20 {padding-right:20px;}
.radius {border-radius:8px;}
.radiusbottom {border-radius:0 0 16px 16px;}
.relative {position:relative;}
.shadow {box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
.text {font-size:clamp(1em, 2.5vw, 22px);}
.textright {text-align:right;}
.uppercase {text-transform:uppercase;}
.weight400 {font-weight:400;}
.weight500 {font-weight:500;}
.width100 {width:100%;}
.width75 {width:75%;}
.width50 {width:50%;}
.width30 {width:33%;}
.width25 {width:25%;}
.wrap {flex-wrap:wrap;}
strong, .strong {font-weight:500;}
.stronger {font-weight: 700;}
sup {font-size:0.5em;}
ul {list-style:none; padding:0; margin:0}

.zoom {z-index:10; -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; -webkit-backface-visibility:hidden; -webkit-perspective:1000;}
.zoom:hover {-moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); -ms-transform:scale(1.1); filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2);}

.blink {animation: clignoter 2.5s infinite;}
@keyframes clignoter {
    0%, 70% {opacity: 1;}
    100% {opacity: 0;}
	}

.toggle-checkbox {display:none;}
.menu-button {position:absolute; top:12px; left:20px; transform:translateX(250px); z-index:10; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.6s ease; background:#fff; padding:12px; border-radius:50%;}

/* Icone du burger */
.menu-icon {position:relative; width:100%; height:3px;}
.menu-icon::before, .menu-icon::after {content:''; position:absolute; width:100%; height:3px; background:#333; transition:all 0.6s ease;}
.menu-icon::before {top:-8px;}
.menu-icon {transition:opacity 0.6s ease;}
.menu-icon::after {bottom:-8px;}

/* Animation du burger pour l'état fermé */
.toggle-checkbox:not(:checked) ~ .menu-button .menu-icon::before {transform:rotate(0deg); top:-8px;}
.toggle-checkbox:not(:checked) ~ .menu-button .menu-icon::after {transform:rotate(0deg); bottom:-8px;}
.toggle-checkbox:not(:checked) ~ .menu-button .menu-icon {background:#333;}

/* Animation du burger pour l'état ouvert */
.toggle-checkbox:checked ~ .menu-button {background:#f5e72f;}
.toggle-checkbox:checked ~ .menu-button .menu-icon::before {transform:rotate(90deg); top:0; background:#aaa; left:4px; height:5px; width:22px;}
.toggle-checkbox:checked ~ .menu-button .menu-icon::after {transform:rotate(-90deg); top:0; background:#aaa; right:4px; height:5px; width:22px;}
.toggle-checkbox:checked ~ .menu-button .menu-icon {background:#aaa; height: 5px;}

/* État :menu ouvert */
.toggle-checkbox:checked ~ .menu-sidebar {width:250px; min-width:250px;}
.toggle-checkbox:checked ~ .menu-sidebar .menu-content {transform:translateX(0);}
.toggle-checkbox:checked ~ .content {margin:0;}
.toggle-checkbox:checked ~ .menu-button {left:102px; transform:translateX(10px);}

/* État :menu fermé */
.toggle-checkbox:not(:checked) ~ .menu-sidebar {width:0; min-width:0; box-shadow:none;}
.toggle-checkbox:not(:checked) ~ .menu-sidebar .menu-content {transform:translateX(-500px);}
.toggle-checkbox:not(:checked) ~ .content {margin-left:0;}
.toggle-checkbox:not(:checked) ~ .menu-button {left:0px; top:0.6%; transform:translateX(0); opacity:0.75; border-radius:0 8px 8px 0; background:#eee; width:47px;}

/* Colonne menu */
.menu-sidebar {height:100vh; overflow:hidden; box-shadow:2px 0 5px rgba(0, 0, 0, 0.5); position:relative; overflow-y:auto; scrollbar-width:none; transition:all 0.6s ease; z-index: 1;}
.menu-content {position:relative; transform:translateX(-250px); transition:transform 0.6s ease; padding:60px 20px 20px; margin:auto;}
.nav-admission {font-size: 30px; padding: 10px; font-weight: 600;}
.nav-admission span {font-size: 0.7em;}
.menu-nav {font-size:1.2em;}
.menu-nav a {text-decoration:none; transform:translatex(0); transition:transform 0.4s ease-in-out; height: 40px; display: flex; align-items: center;}
.menu-nav a::before {content:""; height:2px; background:#f5e72f; width:100%; position:absolute; bottom:-2px; left:0; transform:translatex(-50%); opacity:0; transition:transform 0.4s ease-in-out, opacity 0.4s linear;}
.menu-nav a:hover::before {transform:translatex(0);  opacity:1;}
.nav-titre {padding:4px 5px 6px; margin:15px 0 5px; font-size: 30px; font-weight:500;}
.nav-right {text-align:right;}
.nav-lineheight {}

/* Contenu principal */
.container {}
.content {flex:1; transition:margin-left 0.6s ease; width:100%; min-width:320px; height:100vh; overflow-y:auto; scrollbar-width:none;}
#wrapper, .wrapper {max-width:1670px; padding: 0 clamp(10px, calc(10px + (70 - 10) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 70px); margin:auto;}

header {}
.header-white {padding: 20px 0; background-color:white; margin-bottom: clamp(20px, 3vw, 40px);}
.header-index {padding: 20px 0;}
.logo {flex:1; width:100%; max-width:300px;}
.ctah1 {flex: 1;}
.cta-top {align-items:center; justify-content:flex-end; flex-flow:row;}
.telechargement, .inscription {padding: 4px 20px 5px; font-weight: 500; white-space: nowrap; font-size: clamp(0.9em, 2vw, 1.1em); transition: all 0.4s; border-radius: 8px;}
.telechargement:hover, .inscription:hover {transform: translateY(-2px);}
h1 {font-size:clamp(20px, calc(20px + (40 - 20) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 40px); font-weight:700; flex: 1; gap:5px;}

/* #### BREADCRUMB #### */
ul.breadcrumb {list-style-type:none; display:flex; flex-direction:row; margin:40px 0 0; }
.breadcrumb li {height:30px; font-weight:500; display:flex; white-space:nowrap;}
.clip1 {clip-path:polygon(85% 0, 100% 50%, 85% 100%, 0% 100%, 0 50%, 0% 0%); padding: 0 20px 3px 10px; border-radius:6px 0 0 6px;}
.clip2 {clip-path:polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 11px 50%, 0 0); padding-left:20px; margin-left:-5px; z-index:1;}
.clip3 {clip-path:polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%); width:25px; margin-left:-5px; z-index:0;}

.section-top {padding: clamp(40px, 4vh, 60px) clamp(10px, calc(10px + (40 - 10) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 40px);}
.section-top h2 {font-size: clamp(20px, calc(20px + (35 - 20) * ((100vw - var(--screen-min) * 1px) / var(--screen-range))), 35px); transition: all 0.4s; text-align: center;}
.section-top h2 a {transition: all 0.4s; text-decoration:none;}
.section-top h2 a:hover {background-color:#858585; border-radius: 8px; padding: 6px 12px; box-shadow:0 2px 20px rgba(0, 0, 0, 0.2);}

main {}
section {}
#order > .order1 {order:1;}
#order > .order2 {order:2;}
#order > .order3 {order:3;}
#order > .order4 {order:4;}
#order > .order5 {order:5;}

h2, h3, h4 {font-weight:600;}

/* #### BLOC JPO ### */
.rdv {font-size: clamp(0.9em, 2.5vw, 1.1em);
padding:0 clamp(10px, calc(10px + (40 - 10) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 40px) clamp(10px, calc(10px + (40 - 10) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 40px);
--border-size:3px; /*--border-angle: 0turn;*/ width:100%; height:auto; background-image: conic-gradient(from var(--border-angle), #aaa, #aaa 50%, #aaa), conic-gradient(from var(--border-angle), transparent 20%, #fff, #f5e72f);
  background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover; 
  background-position: center center; background-repeat: no-repeat; -webkit-animation: bg-spin 3s linear infinite; animation: bg-spin 3s linear infinite;}
	@-webkit-keyframes bg-spin {
	  to {--border-angle: 1turn;}
	}
	@keyframes bg-spin {
	  to {--border-angle: 1turn;}
	}
	@property --border-angle {syntax: "<angle>"; inherits: true; initial-value: 0turn;}
.rdv-titre {font-size:2em; font-weight:600; padding:0 10px; display:table; margin: clamp(-29px, -3vw, -22px) auto 22px;}
.rdv-image {margin:0 20px 10px 0; float:left; width:100%; max-width:200px;}
.rdv li {padding: 5px 0;}

video {float:left; width:50%; height:auto; aspect-ratio:16 / 9; margin:0 40px 10px 0;}

.block {position:relative; padding:
	clamp(30px, calc(30px + (60 - 30) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 60px)
	clamp(10px,  calc(10px + (60 - 10)  * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 60px)
	clamp(20px, calc(20px + (50 - 20) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 50px)
	clamp(10px,  calc(10px + (60 - 10)  * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 60px);
}

.block h2, .groupe h2 {position:absolute; top: 0; left:clamp(10px, 2vw, 40px); transform:translate(0%, -60%); padding:0 clamp(10px, 2vw, 20px); font-size:clamp(22px, 3vw, 30px);}

.imgillu {width:100%; max-width:250px; margin: 0 clamp(20px, 2.5vw, 40px) 0 0;}
.block h3, .block-accroche {font-size:clamp(21px, calc(21px + (28 - 21) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 28px);}
.bouton-plus {font-weight:500; padding: 4px 40px 8px 20px; margin:20px 0 0; transition: all 0.4s; border-radius: 8px; font-size: 1.2em; display: inline-block;}
.bouton-plus:hover {background-color: #9b9b9b; color:#f5e72f;}
.bouton-plus-mob {position:absolute; right:0;  bottom:20px;  font-weight:500;  padding:4px 15px 5px 25px;}

.block p {margin: 1em 0 0;}

/* #### BLOC % #### */
.market {font-size: clamp(20px, calc(20px + (60 - 20) * ((100vw - var(--screen-min)*1px) / var(--screen-range))), 60px);}
.market .market-wrapper {padding: 1em clamp(20px, 8vw, 150px);}
.market h3 {font-size:clamp(1.1em, 4.5vw, 1.5em); margin:0;}
.market .market-block {justify-content:center; align-items:center; gap:clamp(10px, 3vw, 20px); font-size:clamp(0.8em, 3vw, 1em);}
.market span {font-size: 3em; font-weight:600;}

.pourcent {display:flex; margin:20px auto 10px; font-weight:500; text-transform:uppercase; width:100%; max-width:450px; max-width:450px; padding:5px clamp(10px, 3vw, 40px);}
.pourcent span {font-size:clamp(13px, 1.8vw, 17px); flex-grow:1; flex-basis:75%; text-align:right; padding-right:10px; border-right:2px solid; margin:auto 10px auto 0;}
.pourcent-titre {font-size:2.6em; margin:auto; padding-bottom:5px; flex-grow:1; flex-basis:25%; text-align:left;}

/* #### GROUPE HOURDE #### */
.groupe {}
.groupe-titre {font-size:2em; font-weight:600; display:table; padding:0 20px; margin:-33px auto 0;   }
.groupe-grid {grid-template-columns: 1fr 1fr 1fr;}
.groupe-bouton {position: absolute; display: flex; align-items: center; justify-content: center; padding: 3px 20px 5px 30px; bottom: 20px; right: 0; font-size: 22px; font-weight: 500;}

.contact {font-size:50px; font-weight:500;}
.contact span {display: block; font-size: 22px;}

/* #### TOGGLE CSS #### */
input[type="checkbox"] {display: none;}
.toggle {}
.toggleable_content {max-height:3000px; overflow:hidden; transition:max-height .8s cubic-bezier(1,0,1,0); margin-top:-23px;}
.toggleable_control:checked ~ .toggleable_content {transition-timing-function:ease-in-out; max-height:1px;}
.toggleable_label {width:95%; transition:width .8s; display:block; display:flex; justify-content:space-between; align-items:center; padding:0.3rem 1rem; cursor:pointer; position:relative; z-index:10; margin:auto;}
.toggleable_control:checked ~ .toggleable_label {transition-timing-function:ease-in-out; width:100%;}
.toggleable_label h2, .toggleable_label h3 {text-transform:uppercase; margin:0; text-align:initial; padding:0; font-weight:600; font-size:clamp(1.1em, 3vw, 1.45em);}
/*.toggleable_control:checked ~ .toggleable_content {margin-bottom:0;}*/
.toggleable_label::after {content:"▲"; font-size:0.8rem;}
.toggleable_control:checked ~ .toggleable_label::after {content:"▼";}

.box-illu {font-size:1.3em; margin:0 auto 20px; position:relative;}
.box-illu-int {margin:0 30px 40px 0; position:relative; width:100%; max-width:450px;}
.box-illu-img {padding:0 14px 14px 0; width:90%; position:relative; z-index:5;}
.box-illu-border {position:absolute; top:20%; right:0; z-index:1; width:80%; height:87%; border-width:4px;}
.box-illu-name {font-weight:500; text-align:right; padding-right:30px; font-size:0.8em;}

.flexbox, .flexbox2 {display:flex; flex-wrap:wrap; gap:clamp(10px, 3vw, 40px);}
.flexbox article {flex-grow:1; flex-basis:270px;}
.flexbox2 article {flex-grow:1; flex-basis:500px;}

article {}

.swiper {width:100%; height:auto;}
.swiper-pagination {position:relative !important; padding-top:25px;}
.swiper-button-next, .swiper-button-prev {background:rgb(239, 239, 239, .7); border-radius:6px; padding:30px 20px; color:#464866!important; top:30% !important;}
.swiper-pagination-bullet-active {background:#384c64!important;}

.block-tarifs {margin: 0 auto clamp(20px, 3vw, 40px); max-width:800px;}


/* #### BLOC FOOTER ### */
footer {}
.footer-content {grid-template-columns: repeat(4, 1fr)}
.footer-logo {font-size: 0.85em;}
.footer-logo img {max-width:150px;}
.footer-block {}
.footer-block img {max-width:250px;}
.footer-partenaires {grid-template-columns:1fr 1fr}
.footer-info {}
.footer-info-adress {font-size:35px; padding: 0px 20px 5px 0; border-right:3px solid; font-weight:600;}
.footer-info-adress span {display: block; font-size: 0.5em; margin-top: -5px;}
.footer-info-access {padding:11px 20px 13px 0; border-right:3px solid;}
.footer-info-rs {}
.footer-info-rs svg {width: 50px; height: 50px;}
.scroll-to-top {z-index:100; position:fixed; bottom:15px; right:15px; width:50px; height:50px; font-size:2em; background:rgba(245, 245, 245, 0.7); padding:5px; text-align:center; transition:background 0.3s, opacity 0.3s; opacity:0; visibility:hidden;}
.scroll-to-top:hover {background:rgba(255, 255, 255, 1);}
.scroll-to-top.show {opacity:1; visibility:visible;}

#cookieConsent {display:none; position:fixed; bottom:20px; left:20px; background-color:#333; color:#fff;  font-size:0.8em; padding:10px; max-width:210px; border-radius:12px; z-index:9999;}
#cookieConsent span {font-weight:600; text-transform:uppercase; font-size:2em; color:#f5e72f; display:block; margin-bottom:10px; text-align: center; line-height: 1.1em;}
#acceptCookie, #declineCookie {display:block; width:100%; margin-top:20px; padding:10px 10px 12px; border-radius:6px; font-size:1.3em; font-weight:700; border:none; cursor:pointer;}
#acceptCookie {background-color:#aaa; color:#f5e72f;}
#declineCookie {background-color:#fff; color:#aaa;}

@media (max-width:1024px) {
	video {width:100%; margin:0 0 20px 0;}
	#order {display: grid;}
	.columns2 {columns: 1;}
	.groupe-grid {grid-template-columns: 1fr;}
	.footer-content {grid-template-columns:1fr 1fr; padding:20px;}
	.footer-info-access {border:none; padding:0 10px;}
}

@media (max-width:768px) {
	.desk {display:none;}
	.tab {display:block;}
	.gap3w {gap: 10vw;}
	.telechargement {padding: 8px 20px 9px;}
	h1 {padding: 0 10px;}
	.block h2, .groupe h2 {margin-right:10px;}
	.block .bouton-plus {display:none;}
	/*.toggleable_content {max-height:0; overflow:hidden; transition:max-height .8s cubic-bezier(0,1,0,1)}
	.toggleable_content .block {padding-top:20px;}
	.toggleable_control:checked ~ .toggleable_content {transition-timing-function:ease-in-out; max-height:3000px;}
	.toggleable_content {margin-top:0; margin-bottom:2rem;}
	.toggleable_label::after {content:"▼"; font-size:0.8rem;}
	.toggleable_control:checked ~ .toggleable_label::after {content:"▲";}*/
	.noborder {border-width:0;}
	.imgtab100{max-width:100%;}
	.box-illu-int {max-width: 100%; float: none; margin: 0 0 40px 0;} 
	.imgillu {max-width:100%; margin:20px 0; float:none;}
	.footer-content {grid-template-columns:1fr;}
	.footer-logo img {max-width: 100%; margin: 0 0 20px;}
	.footer-info-adress {border:none; padding:0 10px;}
}

@media (max-width:580px) {
	.tab {display:none;}
	.mob {display:block;}
	.imgmob100 {max-width:100%;}
}