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

html {scroll-behavior:smooth;}

*, *:before, *:after {box-sizing:border-box !important;}
* {box-sizing:border-box;}
a {text-decoration:none; color:inherit;}
.underline {text-decoration:underline;}

body {background-color:#ccc; height:100%; width:100%; margin:0; padding:0; font-size:16px; font-family:'Barlow Condensed', sans-serif; color:#333;}
.tab, .mob  {display:none;} .desk {display:block;}

.bgyellow {background-color:#fff12a;}
.bgwhite {background-color:#fff;}
.bggrey {background-color:#ccc;}
.bggrey2 {background-color:#9c9c9c;}
.bgblack {background-color:#333;}

.borderyellow {border-color:#fff12a;}
.borderwhite {border-color:#fff;}
.bordergrey {border-color:#9c9c9c;}
.bordergrey2 {border-color:#ddd;}
.borderblack {border-color:#333;}
.borderyellow, .borderwhite, .bordergrey2,.bordergrey, .borderblack {border-width:2px; border-style:solid;}

.gap40 {gap:5%;}
.gap20 {gap:20px;}

.colorwhite {color:white;}
.coloryellow {color:#fff12a;}
.colorgrey {color:#ccc;}
.colorgrey2 {color:#9c9c9c;}

.artflex {flex-grow:1; flex-basis:100%;}
.center {text-align:center;}
.flex {display:flex;}
.floatright {float:right;}
.floatleft {float:left;}
.fontsize08 {font-size:0.8em;}
.fontsize12 {font-size:1.2em;}
.fontsize13 {font-size:1.3em;}
.fontsize15 {font-size:1.5em;}
.fontsize3 {font-size:3em;}
.grid {columns:2;}
.inlineblock {display:inline-block;}
.img {width:100%; height:auto; display:block;}
.italic {font-style:italic;}
.justify {text-align:justify;}
.lineheight {line-height: clamp(1.2em, 2vw, 1.5em);}
.listnone {list-style:none;}
.nowrap {white-space: nowrap;}
.martom20 {margin-bottom:20px;}
.martom40 {margin-bottom:40px;}
.martom60 {margin-bottom:60px !important;}
.marginauto {margin:auto;}
.margin0 {margin:0;}
.radius {border-radius:6px;}
.overden {overflow:hidden;}
.paddingall {padding:clamp(15px, 2vw, 30px);}
/*.paddingnul {padding:0;}*/
.padding10 {padding:10px;}
.paddingleft10 {padding-left:10px;}
.paddingul20 {padding-inline-start:6%;}
.textright {text-align:right;}
.uppercase {text-transform:uppercase;}
.width100 {width:100%;}
.width50 {width:50%;}
.width30 {width:33%;}
.width25 {width:25%;}
.wrap {flex-wrap:wrap;}
strong, .strong {font-weight:500;}
.stronger {font-weight:700;}
sup {vertical-align:top;}
hr {margin:8px 0; height:1px; border:0; background-color:#ddd;}

.zoom {z-index:3; -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; max-height:310px;}
.zoom:hover {-moz-transform:scale(1.5); -webkit-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -ms-transform:scale(1.5); filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=2, M12=-0, M21=0, M22=2);}

@keyframes clignoter {
    0%, 70% {opacity: 1;}
    100% {opacity: 0;}
	}

.blink {animation: clignoter 2.5s infinite;}

/* POPUP */
.popup-overlay {position: fixed; z-index: 100; top: 0;left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease;}
.popup-content {max-width: 90%; max-height: 90%;}
.popup-content img {width: 100%; height: auto; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);}
.popup-overlay.hidden {opacity: 0; visibility: hidden;}

#page {width:100%; max-width:1400px; height:100%; margin:auto; padding:10px 10px 0; row-gap:40px; column-gap:2%;}
#wrapper {width:74%;}

header {}
h1 {font-weight:600; font-size:20px; text-transform:uppercase; margin:auto 0; width:50%;}
.h1mobile {font-size:clamp(3rem, 0.0658rem + 16.4211vw, 12.5rem); white-space:nowrap; width:100%; text-align:center; font-weight:600; text-transform:uppercase;}
.cta-top {margin:10px auto; display:inline-flex; flex-wrap:nowrap; gap:2vw; justify-content:flex-end; width:50%;}
.telechargement, .inscription {padding:4px 10px 6px; font-weight:500; text-transform:uppercase; white-space:nowrap;}
.telechargement {}
.inscription {}
.inscription-mob {padding: 15px 25px; font-size: 1.3em; font-weight: 500; margin: 20px auto;}
.box-illu {font-size:1.3em; margin:0 auto 20px; position:relative;}
.box-illu-int {margin:0 30px 40px 0; position:relative;}
.box-illu-img {padding:0 14px 14px 0; width:88%; background:#ccc;}
.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;}
.nav {margin:55px 0 0 10px; white-space:nowrap;}
.nav ul {list-style:none; line-height:148%; font-size:clamp(14px, 1.7vw, 24px); font-weight:600; margin:0 20px 0 0; padding:0; color:#fff;}
.nav li.expo {line-height:25px;}
.nav a:hover {color:#fff12a;}

/* #### MENU MOBILE ### */
.bar {display:block; background-color:#fff; width:30px; height:3px; border-radius:5px; margin:5px auto; transition:background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;}
.burger {position:relative;}
input[type="checkbox"] {display:none;}
input[type="checkbox"]:checked ~ .sidebar {transform:translateX(0);}
input[type="checkbox"]:checked ~ .sidebar .sidebar-menu a {transform:translateX(0);}
input[type="checkbox"]:checked ~ label .bar {background-color:#333;}
input[type="checkbox"]:checked ~ label .top {-webkit-transform:translateY(8px) rotateZ(45deg); -moz-transform:translateY(8px) rotateZ(45deg); -ms-transform:translateY(8px) rotateZ(45deg); -o-transform:translateY(8px) rotateZ(45deg); transform:translateY(8px) rotateZ(45deg);}
input[type="checkbox"]:checked ~ label .bottom {-webkit-transform:translateY(-8px) rotateZ(-45deg); -moz-transform:translateY(-8px) rotateZ(-45deg); -ms-transform:translateY(-8px) rotateZ(-45deg); -o-transform:translateY(-8px) rotateZ(-45deg); transform:translateY(-8px) rotateZ(-45deg);}
input[type="checkbox"]:checked ~ label .middle {width:0;}
.middle {margin:0 auto;}

.sidebar {position: fixed; top: 0; left: 0; height: 100vh; width: 250px; overflow-y: auto; scrollbar-width: none; /*Firefox*/ -ms-overflow-style: none;/*IE & Edge*/ z-index:100; padding:30px; flex-direction:column; transform:translatex(-100%);  transition:transform 0.4s ease-in-out;}
.sidebar::-webkit-scrollbar {display: none; /*Chrome Safari Edge */}
.sidebar-menu {line-height:50px; flex-direction:column; justify-content:space-around; font-size:20px; margin:20px 0; position:sticky; top:0;}
.sidebar-menu a {text-decoration:none; transform:translatex(-80%); transition:transform 0.4s ease-in-out;}
.sidebar-menu a::before {content:""; height:2px; background:#fff12a; width:100%; position:absolute; bottom:-2px; left:0; transform:translatex(-50%); opacity:0; transition:transform 0.4s ease-in-out, opacity 0.4s linear;}
.sidebar-menu a:hover::before {transform:translatex(0);  opacity:1;}
.nav-titre {padding:4px 15px 6px; text-transform:uppercase; margin: 15px 0 5px;}
.nav-right {text-align:right;}
.nav-lineheight {}

main {}
section {}
video {float:left; padding:0 20px 12px 0; width:50%; height:auto; aspect-ratio:16 / 9;}
article {display:inline-block;}
#order > .order1 {order:1;}
#order > .order2 {order:2;}
#order > .order3 {order:3;}

ul.breadcrumb {list-style-type:none; display:flex; padding:0;}
.breadcrumb li {height:30px; display:flex; white-space:nowrap;}
.clip1 {clip-path: polygon(83% 0, 100% 50%, 83% 100%, 0% 100%, 0 50%, 0% 0%); padding:4px 15px 0 10px;}
.clip2 {clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 11px 50%, 0 0); padding:4px 0 4px 20px; margin-left:-5px; z-index:10;}
.clip3 {clip-path: polygon(0% 0%, 60% 0%, 100% 50%, 60% 100%, 0% 100%); width:25px; margin-left:-5px; z-index:0;}

.block {width:100%; position:sticky;}
.block1 {padding:0 30px 30px 0;}
.imgillu {width:50%; display:block; margin:0 20px 20px 0;}
.pourcent {display:flex; margin:20px auto 0; font-weight:500; text-transform:uppercase; width:100%; max-width:370px;}
.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;}
h2, h3 {margin:0 0 10px; font-weight:500;}
/*h2.titre-block {display:table; background-color:#9c9c9c; color:#fff12a;  padding:5px 15px 8px; font-weight:500; text-transform:uppercase; white-space:nowrap; margin:-5.5% 0 30px 0; font-size:1.6em;}*/
.titre0 {font-size:clamp(19px, 2vw, 23px); font-weight:500;}
.titre1 {text-transform:uppercase; font-size:clamp(23px, 3vw, 28px); font-weight:600; background:#ccc; display:table; padding:0 10px; margin-top:clamp(-12%, -4.3vw, -10%); margin-left:auto; margin-right:auto; margin-bottom:6%;}
.titre2 {font-size:clamp(20px, 2.6vw, 27px); margin-top:-7px;} 
.plus {display:inline-block; padding:4px 3px 6px 13px; border-radius:6px; font-size:14px; font-weight:500; margin-top:20px;}
.plus span {margin-left:5px; padding:1px 6px 3px; font-weight:600; border-left:2px solid #ccc;}

.toggleable_content {max-height:3000px; overflow:hidden; transition:max-height .8s cubic-bezier(1,0,1,0)}
.toggleable_content .block {padding-top: 40px; overflow:hidden;}
.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; /*white-space:nowrap;*/ margin:0; text-align:initial; padding:0; font-weight:600; font-size:clamp(1.3em, 3.5vw, 1.6em);}
.toggleable_content {margin-top:-23px; margin-bottom:2rem;}
/*.toggleable_control:checked ~ .toggleable_content {margin-bottom:0;}*/
.toggleable_label::after {content:"▲"; font-size:0.8rem;}
.toggleable_control:checked ~ .toggleable_label::after {content:"▼";}

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

/* #### PAGE CONTACT ### */
.contact {font-size:50px; font-weight:500;}
.contact span {display: block; font-size: 22px;}

/* #### BLOC JPO ### */

.rdv {font-size: clamp(1.1em, 2.5vw, 1.3em); margin:5px auto 20px; padding:20px; --border-size:4px; /*--border-angle: 0turn;*/ width:100%; height:auto; text-align: center;
  background-image: conic-gradient(from var(--border-angle), #ccc, #ccc 50%, #ccc), conic-gradient(from var(--border-angle), transparent 20%, #fff, #fff12a);
  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:1.5em; text-transform:uppercase; padding:0 10px; margin:-36px auto 10px; display:table; font-weight:600;}

/* #### BLOC % ### */
.market-wrapper {width:100%; max-width:640px; margin:-20px auto 0; padding:10px 20px;}
.market-title {font-size:clamp(25px, 6.3vw, 50px); font-weight:500;}
.market {font-size:clamp(14px, 4vw, 30px); margin:0 auto; display: inline-block;}
.market span {float:left; font-size:clamp(40px, 9vw, 80px); font-weight:600; margin:-8px 5px 0 0;}

/* #### ASIDE ### */
aside {width:24%; margin:10px 0 60px; position:relative;}
.sticky {position:sticky; top:20px;}
.aside-block-jpo {margin-top:20px;}
.block-jpo {padding:10px; font-size:0.9em;}
.titrenews {font-size:1.5em; font-weight:500; text-transform:uppercase; text-align:center;}
.titrenewstop {text-align: center; font-size: 2em; text-transform: uppercase; font-weight: 500; margin: -33px auto 0; padding: 5px 10px; display: table;}
.aside-titlecontainer {position:relative; margin:30px 0 40px; padding:0 30px;}
.aside-title {font-size:1.8em; text-transform:uppercase; line-height:35px; font-weight:600; text-align:center;}
.aside-titleback {height:30px; position:absolute; z-index:-1;}
.aside-titleback01 {width:40%; top:50%; margin-left:10%;}
.aside-titleback02 {width:40%; bottom:40%; right:10px; margin-right:10%;}
.aside-titleback03 {width:52%; top:30%;}
.aside-admission {text-align:center; padding:20px 15px; font-size:2.5em; font-weight:600; line-height:35px;}
.aside-admission span {font-size:0.8em;}

.box-actu {border-bottom:2px solid #ddd; font-size:0.9em; text-align:justify; padding-bottom:10px; margin-bottom:20px; position:relative; overflow:hidden;}
.box-actu img {margin-right:10px; width:100%; max-width:90px; height:auto;}
.box-actu span {font-weight:600; font-size:1.2em; text-align:right; display:block; margin-bottom:10px; margin-top:-5px;}
.box-arrow {position:absolute; right:-12px; bottom:11px;}
.arrow {border-style:solid; border-width:6px 12px 6px; border-color:transparent transparent transparent #fff12a;}
.lien-actu {font-weight:600; font-size:1.1em; text-align:center; padding:10px 15px 12px; display:table;  margin:0 auto 40px;}
hr {margin:8px 0; height:1px; border:0; background-color:#ddd;}

/* #### BLOC FOOTER ### */
footer {width:100%;}
.footer-content {flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start; column-gap:1%;}
.phare {width:32%; height:auto; margin:-5px 5% 0 0; float:left;}
.footer-block {flex-grow:1; flex-basis:24%;}
.footer-block-ecole, .footer-block-rncp, .footer-block-cfai {padding-right:40px; border-right:2px solid #dddddd;}
.footer-block-cfai img, .footer-block-rncp img {max-width:300px; margin:20px auto 0;}
.footer-block p {padding:0 0 0 20px; font-weight:500; margin:0; text-align:center; font-size:1.1em;}
.footer-bloc-partenaires-titre {text-align:center; text-transform:uppercase; font-weight:500; font-size:1.2em; padding:0 10px 30px;}
.footer-bloc-logo {gap:20px;}
.partenaire {flex-grow:1; flex-basis:40%; padding:0 7%;}
.footer-copy {position:relative; padding-bottom:20px;}
.adresse {width:41%; text-align:right; font-size:clamp(30px, 4vw, 35px); margin:auto 0; font-weight:500; padding-right:20px; border-right:2px solid;}
.acces {font-size:1.2em; padding-right:20px; border-right:2px solid;}
.icone-rs img {margin-right:20px;}

.scroll-to-top {z-index:100; position:fixed; bottom:10px; right:10px; width:50px; height:50px; font-size: 2.2em; background:rgba(255, 255, 255, 0.5); 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;}
.pub {width:24%;}

#cookieConsent {display:none; position:fixed; bottom:20px; left:20px; background-color:rgba(22, 22, 22, 0.9); color:#fff; font-size:0.8em; padding:20px;  max-width:230px; border-radius:20px; z-index:9999;}
#cookieConsent span {font-weight:600; text-transform:uppercase; font-size:1.3em; display:block; margin-bottom:10px;}
#acceptCookie, #declineCookie {display:block; width:100%; margin-top:20px; padding:10px 10px 12px; border-radius:6px; font-weight:600; border:none; cursor:pointer;}
#acceptCookie {background-color:#fff12a; color:#9c9c9c;}
#declineCookie {background-color:#9c9c9c; color:#fff12a;}

@media screen and (max-width:1080px) {
	.desk {display:none;}
	.tab {display:block;}
	h1 {width:100%; text-align:center; padding-bottom:10px;}
	section.gap40 {column-gap:20px;}
	#wrapper, footer {width:100%;}
	.cta-top {justify-content:center; width:100%;}
	.rdv {float: none; margin: 0 0 20px; text-align:left;}
	.footer-block {flex-basis:49%; font-size:0.8em;}
	.footer-block p {padding:0;}
	.footer-block-rncp {padding-right:0; border-right:none;}
	.footer-block-ecole, .footer-block-rncp {padding-bottom:20px; border-bottom:2px solid #dddddd;}
}

@media screen and (max-width:640px) {
	.tab {display:none;}
	.mob {display:block;}
	.titre1 {margin-top:-33px;}
	.header-top {display:block;}
	.inscription-mob {display: table !important;}
	.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:"▲";}
	.fullmob {flex-wrap:wrap;}
	.bordertop {border-width:2px 0 0;}
	.noborder {border-width:0;}
	.grid {columns:1;}
	#order {display:grid;}
	.paddingall {padding-left: 0; padding-right: 0;}
	.imgmax150right20 {max-width:100%; margin:0 0 20px;}
	video {float:none; padding:0; margin-bottom:20px; width:100%;}
	.box-illu-int {width:100%}
	.footer-block {flex-basis:100%; font-size:1em;}
	.footer-bloc-logo {padding-bottom:20px;}
	.footer-block-ecole, .footer-block-cfai {padding-right:0; border-right:none;}
	.footer-block-cfai {padding-bottom:20px; border-bottom:2px solid #dddddd;}
	.adresse, .acces {width:100%; text-align:center; padding-right:0; border-right:none;}
	.icone-rs {margin:20px auto;}
}