/*-----------------------------------------------------------------------------------
	NOCENTI
	About: Un site Hellomaker.dev
	Author: Matthieu Guegan
	Version: 1.0
	Built with Blocs
-----------------------------------------------------------------------------------*/
body{
	margin:0;
	padding:0;
    background:#FFFFFF;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-container{overflow: hidden;} /* Prevents unwanted scroll space when scroll FX used. */
a,button{transition: background .3s ease-in-out;outline: none!important;} /* Prevent blue selection glow on Chrome and Safari */
a:hover{text-decoration: none; cursor:pointer;}
.scroll-fx-lock-init{position:fixed!important;top: 0;bottom: 0;left: 0;right: 0;z-index:99999;} /* ScrollFX Lock */
.blocs-grid-container{display: grid!important;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;column-gap: 1.5rem;row-gap: 1.5rem;} /* CSS Grid */

/* = Web Fonts
-------------------------------------------------------------- */

@font-face {
	font-family:'OpenSans-Regular';
	src: url('./fonts/OpenSans-Regular/open-sans-regular.woff2');
	src: url('./fonts/OpenSans-Regular/open-sans-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'BebasNeue-Regular';
	src: url('./fonts/BebasNeue-Regular/BebasNeue-Regular-latin.woff2');
	src: url('./fonts/BebasNeue-Regular/BebasNeue-Regular-latin.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'OpenSans-Bold';
	src: url('./fonts/OpenSans-Bold/open-sans-700.woff2');
	src: url('./fonts/OpenSans-Bold/open-sans-700.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'OpenSans-Medium';
	src: url('./fonts/OpenSans-Medium/open-sans-500.woff2');
	src: url('./fonts/OpenSans-Medium/open-sans-500.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'OpenSans-SemiBold';
	src: url('./fonts/OpenSans-SemiBold/open-sans-600.woff2');
	src: url('./fonts/OpenSans-SemiBold/open-sans-600.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

/* = Blocs
-------------------------------------------------------------- */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding:0 20px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:relative;
	display:flex;
}
.bloc .container{
	padding-left:0;
	padding-right:0;
	position:relative;
}


/* Sizes */

.bloc-xxl{
	padding:200px 20px;
}
.bloc-xl{
	padding:150px 20px;
}
.bloc-lg{
	padding:100px 20px;
}
.bloc-md{
	padding:50px 20px;
}
.bloc-sm{
	padding:20px;
}

/* = Full Screen Blocs 
-------------------------------------------------------------- */

.bloc-fill-screen{
	min-height:100vh;
	display: flex;
	flex-direction: column;
	padding-top:20px;
	padding-bottom:20px;
}
.bloc-fill-screen > .container{
	align-self: flex-middle;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
}
.bloc-fill-screen > .container > .row{
	flex-grow: 1;
	align-self: center;
	width:100%;
}
.bloc-fill-screen .fill-bloc-top-edge, .bloc-fill-screen .fill-bloc-bottom-edge{
	flex-grow: 0;
}
.bloc-fill-screen .fill-bloc-top-edge{
	align-self: flex-start;
}
.bloc-fill-screen .fill-bloc-bottom-edge{
	align-self: flex-end;
}


/* Background Styles */

.bg-center,.bg-l-edge,.bg-r-edge,.bg-t-edge,.bg-b-edge,.bg-tl-edge,.bg-bl-edge,.bg-tr-edge,.bg-br-edge,.bg-repeat{
	-webkit-background-size: auto!important;
	-moz-background-size: auto!important;
	-o-background-size: auto!important;
	background-size: auto!important;
}
.bg-center{
	-webkit-background-size: auto;
}


/* Video Background Styles */

.video-bg-container, .bloc-video{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	right: -50%;
	overflow: hidden;
	transform: translateX(-50%);
	-webkit-transform:translateX(-50%);
}
.bloc-video, .video-bg-container iframe{
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: 0;
}


/* Background Textures */

.bloc-bg-texture::before{
	content:"";
	background-size: 2px 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
}
.texture-darken::before{
	background: rgba(0,0,0,0.5);
}
.texture-darken-strong::before{
	background: rgba(0,0,0,0.8);
}


/* Background Effects */

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:-1;
}
.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


/* Dark theme */

.d-bloc{
	color:rgba(255,255,255,.7);
}
.d-bloc button:hover{
	color:rgba(255,255,255,.9);
}
.d-bloc .icon-round,.d-bloc .icon-square,.d-bloc .icon-rounded,.d-bloc .icon-semi-rounded-a,.d-bloc .icon-semi-rounded-b{
	border-color:rgba(255,255,255,.9);
}
.d-bloc .divider-h span{
	border-color:rgba(255,255,255,.2);
}
.d-bloc .a-btn,.d-bloc .navbar a, .d-bloc a .icon-sm, .d-bloc a .icon-md, .d-bloc a .icon-lg, .d-bloc a .icon-xl, .d-bloc h1 a, .d-bloc h2 a, .d-bloc h3 a, .d-bloc h4 a, .d-bloc h5 a, .d-bloc h6 a, .d-bloc p a{
	color:rgba(255,255,255,.6);
}
:where(.d-bloc) .bloc-link{
	fill:rgba(255,255,255,.6);
}
.d-bloc .a-btn:hover,.d-bloc .navbar a:hover,.d-bloc a:hover .icon-sm, .d-bloc a:hover .icon-md, .d-bloc a:hover .icon-lg, .d-bloc a:hover .icon-xl, .d-bloc h1 a:hover, .d-bloc h2 a:hover, .d-bloc h3 a:hover, .d-bloc h4 a:hover, .d-bloc h5 a:hover, .d-bloc h6 a:hover, .d-bloc p a:hover{
	color:rgba(255,255,255,1);
}
.d-bloc .navbar-toggle .icon-bar{
	background:rgba(255,255,255,1);
}
.d-bloc .btn-wire,.d-bloc .btn-wire:hover{
	color:rgba(255,255,255,1);
	border-color:rgba(255,255,255,1);
}
.d-bloc .card{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover{
	color:rgba(0,0,0,.7);
}
.d-bloc .card icon{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover{
	color:rgba(0,0,0,1);
}
.d-bloc .card .btn-wire, .d-bloc .card .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* Light theme */

.d-bloc .card,.l-bloc{
	color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover,.l-bloc button:hover{
	color:rgba(0,0,0,.7);
}
.l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{
	border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span,.l-bloc .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{
	color:rgba(0,0,0,.6);
}
:where(.l-bloc) .bloc-link{
	fill:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{
	color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
	color:rgba(0,0,0,.6);
}
.d-bloc .card .btn-wire,.d-bloc .card .btn-wire:hover,.l-bloc .btn-wire,.l-bloc .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* Correct Dropdown Links */

.d-bloc .dropdown-menu a, .l-bloc .dropdown-menu a,.d-bloc .dropdown-menu a:hover, .l-bloc .dropdown-menu a:hover{
	color:var(--bs-nav-link-hover-color);
}


/* = NavBar
-------------------------------------------------------------- */

/* Navbar Icon */
.svg-menu-icon{
	fill: none;
	stroke: rgba(0,0,0,0.5);
	stroke-width: 2px;
	fill-rule: evenodd;
}
.navbar-dark .svg-menu-icon{
	stroke: rgba(255,255,255,0.5);
}
.menu-icon-thin-bars{
	stroke-width: 1px;
}
.menu-icon-thick-bars{
	stroke-width: 5px;
}
.menu-icon-rounded-bars{
	stroke-width: 3px;
	stroke-linecap: round;
}
.menu-icon-filled{
	fill: rgba(0,0,0,0.5);
	stroke-width: 0px;
}
.navbar-dark .menu-icon-filled{
	fill: rgba(255,255,255,0.5);
}
.navbar-toggler-icon{
	background: none!important;
	pointer-events: none;
	width: 33px;
	height: 33px;
}
/* Handle Multi Level Navigation */
.dropdown-menu .dropdown-menu{
	border:none}
@media (min-width:576px){
	
.navbar-expand-sm .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-sm .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:768px){
	.navbar-expand-md .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-md .dropdown-menu .submenu-left{
	right:100%;
	left:auto}}@media (min-width:992px){
	.navbar-expand-lg .dropdown-menu .dropdown-menu{
	border:1px solid rgba(0,0,0,.15);
	position:absolute;
	left:100%;
	top:-7px}.navbar-expand-lg .dropdown-menu .submenu-left{
	right:100%;
	left:auto}
}

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
	color:#FFF;
	fill:#FFF;
	background:rgba(0,0,0,.3);
}

.btn-sq{
	border-radius: 0px;
}
.btn-xl{
	padding: 16px 40px;
	font-size: 28px;
}
.a-block{
	width:100%;
	text-align:left;
	display: inline-block;
}
.text-center .a-block{
	text-align:center;
}
.btn-with-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.icon-spacer{
	margin-right:5px;
}
.dropdown a .caret{
	margin:0 0 0 5px}.btn-dropdown .dropdown-menu .dropdown{
	padding: 3px 20px;
}

/* = Icons
-------------------------------------------------------------- */
blocsicon{
	display:inline-block;
	width:100%;
}
blocsicon svg {
	width: 100%;
	 height: auto;
	 display: block;
}
.link-nested-icon, .text-nested-icon{
	width:20px;
	position:relative;
	top:-0.05em;
}
.text-nested-icon svg{
	display:inline-block;
}

/* Image Protection */
.img-protected{
	-webkit-touch-callout: none;
}

/* = Text & Icon Styles
-------------------------------------------------------------- */
.blockquote{
	padding:0 20px;
	border-left:2px solid;
}
.blockquote.text-end{
	border-left:0;
	border-right:2px solid;
}
/* = Text Widths
-------------------------------------------------------------- */
.text-w-70{
	max-width:70%;
}
.text-center.text-w-sm, .text-center.text-w-md, .text-center.text-w-lg, .text-center.text-w-90, .text-center.text-w-80, .text-center.text-w-70, .text-center.text-w-60, .text-center.text-w-50{
	margin-left: auto;
	margin-right: auto;
}


/*
    Lists
*/

.list-horizontal-layout{
	padding-left:0px;
}

.list-horizontal-layout li{
	display:inline-block;
	margin:0 .5rem;
}

.list-is-0:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:0px!important;
}

.list-is-1:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:.25rem!important;
}

.list-is-2:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:.5rem!important;
}

.list-is-3:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:1rem!important;
}

.list-is-4:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:1.5rem!important;
}

.list-is-5:not(.list-horizontal-layout):not(.navbar-nav) li{
	margin-bottom:3rem!important;
}


/* --- Small (sm) --- */
@media (min-width: 576px) {
	
  .list-is-sm-0:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 0rem!important;
	 }
  .list-is-sm-1:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .25rem!important;
	 }
  .list-is-sm-2:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .5rem!important;
	 }
  .list-is-sm-3:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1rem!important;
	 }
  .list-is-sm-4:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1.5rem!important;
	 }
  .list-is-sm-5:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 3rem!important;
	 }
}

/* --- Medium (md) --- */
@media (min-width: 768px) {
	
  .list-is-md-0:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 0rem!important;
	 }
  .list-is-md-1:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .25rem!important;
	 }
  .list-is-md-2:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .5rem!important;
	 }
  .list-is-md-3:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1rem!important;
	 }
  .list-is-md-4:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1.5rem!important;
	 }
  .list-is-md-5:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 3rem!important;
	 }
}

/* --- Large (lg) --- */
@media (min-width: 992px) {
	
  .list-is-lg-0:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 0rem!important;
	 }
  .list-is-lg-1:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .25rem!important;
	 }
  .list-is-lg-2:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: .5rem!important;
	 }
  .list-is-lg-3:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1rem!important;
	 }
  .list-is-lg-4:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 1.5rem!important;
	 }
  .list-is-lg-5:not(.list-horizontal-layout):not(.navbar-nav) li {
	 margin-bottom: 3rem!important;
	 }
}

/* --- Clear Botton Margin on Last List Item --- */
[class*="list-is-"]:not(.list-horizontal-layout):not(.navbar-nav) li:last-child {
	margin-bottom: 0 !important;
}



/* --- Small (sm) --- */
@media (min-width: 576px) {
	
  .list-horizontal-layout.list-is-sm-0 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-0 li {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}

  .list-horizontal-layout.list-is-sm-1 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-1 li {
	margin-left: .25rem !important;
	margin-right: .25rem !important;
}

  .list-horizontal-layout.list-is-sm-2 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-2 li {
	margin-left: .5rem !important;
	margin-right: .5rem !important;
}

  .list-horizontal-layout.list-is-sm-3 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-3 li {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

  .list-horizontal-layout.list-is-sm-4 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-4 li {
	margin-left: 1.5rem !important;
	margin-right: 1.5rem !important;
}

  .list-horizontal-layout.list-is-sm-5 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-sm-5 li {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}

}

/* --- Medium (md) --- */
@media (min-width: 768px) {
	
  .list-horizontal-layout.list-is-md-0 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-0 li {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}

  .list-horizontal-layout.list-is-md-1 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-1 li {
	margin-left: .25rem !important;
	margin-right: .25rem !important;
}

  .list-horizontal-layout.list-is-md-2 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-2 li {
	margin-left: .5rem !important;
	margin-right: .5rem !important;
}

  .list-horizontal-layout.list-is-md-3 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-3 li {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

  .list-horizontal-layout.list-is-md-4 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-4 li {
	margin-left: 1.5rem !important;
	margin-right: 1.5rem !important;
}

  .list-horizontal-layout.list-is-md-5 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-md-5 li {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}

}

/* --- Large (lg) --- */
@media (min-width: 992px) {
	
  .list-horizontal-layout.list-is-lg-0 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-0 li {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}

  .list-horizontal-layout.list-is-lg-1 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-1 li {
	margin-left: .25rem !important;
	margin-right: .25rem !important;
}

  .list-horizontal-layout.list-is-lg-2 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-2 li {
	margin-left: .5rem !important;
	margin-right: .5rem !important;
}

  .list-horizontal-layout.list-is-lg-3 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-3 li {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

  .list-horizontal-layout.list-is-lg-4 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-4 li {
	margin-left: 1.5rem !important;
	margin-right: 1.5rem !important;
}

  .list-horizontal-layout.list-is-lg-5 li,div:not(.blocsapp-special-menu) .navbar-nav.list-is-lg-5 li {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}

}

.list-horizontal-layout.list-is-0 li,.navbar-nav.list-is-0 li{
	margin-left:0px;
	margin-right:0px;
}

.list-horizontal-layout.list-is-1 li,.navbar-nav.list-is-1 li{
	margin-left:.25rem;
	margin-right:.25rem;
}

.list-horizontal-layout.list-is-2 li,.navbar-nav.list-is-2 li{
	margin-left:.5rem;
	margin-right:.5rem;
}

.list-horizontal-layout.list-is-3 li,.navbar-nav.list-is-3 li{
	margin-left:1rem;
	margin-right:1rem;
}

.list-horizontal-layout.list-is-4 li,.navbar-nav.list-is-4 li{
	margin-left:1.5rem;
	margin-right:1.5rem;
}

.list-horizontal-layout.list-is-5 li,.navbar-nav.list-is-5 li{
	margin-left:3rem;
	margin-right:3rem;
}


/* --- Clear Left and Right Margin on First and Horizontal Last List Item --- */
.list-horizontal-layout[class*="list-is-"] li:first-child,div:not(.blocsapp-special-menu) .navbar-nav[class*="list-is-"] li:first-child {
	margin-left: 0!important;
}

.list-horizontal-layout[class*="list-is-"] li:last-child,div:not(.blocsapp-special-menu) .navbar-nav[class*="list-is-"] li:last-child {
	margin-right: 0!important;
}


/* --- Prevent Spacing on Collapsed Menu and Special Menu Items --- */
.navbar:not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl):not(.navbar-expand-xxl) [class*="list-is-"] li, blocsnav [class*="list-is-"] li{
	margin-left: 0;
	margin-right: 0;
}


@media (max-width: 991.98px) {
	
  .navbar-expand-lg [class*="list-is-"] li {
	margin-left: 0!important;
	margin-right: 0!important;
}

}

@media (max-width: 767.98px) {
	
  .navbar-expand-md [class*="list-is-"] li {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

}

@media (max-width: 575.98px) {
	
  .navbar-expand-sm [class*="list-is-"] li {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

}
	
/* = Cards
-------------------------------------------------------------- */
.card-sq, .card-sq .card-header, .card-sq .card-footer{
	border-radius:0;
}
.card-rd{
	border-radius:30px;
}
.card-rd .card-header{
	border-radius:29px 29px 0 0;
}
.card-rd .card-footer{
	border-radius:0 0 29px 29px;
}
/* = Masonary
-------------------------------------------------------------- */
.card-columns .card {
	margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
	.card-columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 1.25rem;
	-moz-column-gap: 1.25rem;
	column-gap: 1.25rem;
	orphans: 1;
	widows: 1;
}
.card-columns .card {
	display: inline-block;
	width: 100%;
}
.card-columns > * {
	-webkit-column-break-inside: avoid;
}
}
/* = Classic Dividers
-------------------------------------------------------------- */
.divider-h{
	min-height: 1px;
	background-color:rgba(0,0,0,.2);
	margin: 20px 0;
}
.divider-half{
	width: 50%;
}
.dropdown-menu .divider-h{
	margin:0;
}

/* Additional Aspect Ratios */

.ratio-4x4::before{
	padding-top:100%}.ratio-9x16::before{
	padding-top:106.25%}

/* ScrollToTop button */

.scrollToTop{
	width:36px;
	height:36px;
	padding:5px;
	position:fixed;
	bottom:1rem;
	right:1rem;
	opacity:0;
	z-index:999999;
	transition: all .3s ease-in-out;
	pointer-events:none;
}
.showScrollTop{
	opacity: 1;
	pointer-events:all;
}
.scroll-to-top-btn-icon{
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
	fill-rule: evenodd;
	stroke-linecap:round;
}

/* = Custom Styling
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,p,label,.btn,a{
	font-family:"BebasNeue-Regular";
}
.container{
	max-width:1140px;
}
.hero-display{
	font-size:6.5rem!important;
	line-height:100px!important;
	text-transform:uppercase;
}
.hero-container{
	margin:-88px -0px -0px -0px;
	align-items:center;
}
.navbar-container{
	z-index:1000;
	background-color:var(--swatch-var-280);
}
.navbar-brand img{
	height:80px;
	width:80px;
}
.bg_video{
	object-fit:cover!important;
	width:100%!important;
	height:100%!important;
}
.accordeon-container{
	display:flex;
	flex-direction:column;
	align-items:center;
}
h1{
	font-size:6rem;
	text-transform:none;
	font-weight:bold;
	line-height:90px;
}
h2{
	font-size:64px;
	text-transform:none;
	line-height:58px;
}
h3{
	font-size:26px;
	line-height:30px;
	font-family:"BebasNeue-Regular";
}
.display-number{
	font-family:"BebasNeue-Regular";
	font-size:72px;
	line-height:80px;
	margin-bottom:0px!important;
	letter-spacing:-2px;
}
.display-number-subtext{
	font-family:"OpenSans-Regular";
	font-size:18px;
}
.headline-tag-green{
	font-size:19px;
	text-transform:uppercase;
	fill:var(--swatch-var-6003);
	color:var(--swatch-var-6003)!important;
	font-family:"BebasNeue-Regular";
	letter-spacing:2px;
}
.button-green{
	background-color:var(--swatch-var-6003)!important;
	text-transform:none;
	color:var(--swatch-var-280)!important;
	font-size:22px!important;
	transition:all 0.2s ease-in-out 0s;
	letter-spacing:1px;
	fill:var(--swatch-var-280);
}
.over-heading{
	font-size:26px;
	line-height:34px;
	font-family:"BebasNeue-Regular";
	letter-spacing:1px;
}
.button-green:hover{
	transform:translateY(-2px) scale(0.98);
	background-color:var(--swatch-var-280);
	color:var(--swatch-var-7583)!important;
	fill:var(--swatch-var-280);
}
p{
	font-size:16px;
	line-height:24px;
	font-family:"OpenSans-Regular";
}
.background-camera-image{
	background-image:url("img/montage_video-1280.webp");
	background-size:cover;
	background-position:center top;
	height:550px;
}
.service-card-container{
	padding:16px 16px 16px 16px;
	color:var(--swatch-var-6780)!important;
	transition:all 0.5s ease-in-out 0s;
	height:100%;
	background-color:var(--swatch-var-7583);
	border-style:solid;
	border-width:1px 1px 1px 1px;
	border-color:var(--swatch-var-6840)!important;
}
.service-card-icon{
	width:48px;
	height:48px;
	fill:var(--swatch-var-6003);
	border-width:1px 1px 1px 1px;
	border-color:var(--swatch-var-1792)!important;
	border-style:solid;
	padding:12px 12px 12px 12px;
	background-color:var(--swatch-var-7583);
	margin-bottom:16px;
}
.service-card-container:hover{
	background-color:var(--swatch-var-6003)!important;
	color:var(--swatch-var-280)!important;
	cursor:pointer;
}
.port-card-container{
	padding:16px 16px 16px 16px;
	background-size:cover;
	align-content:flex-end;
	position:relative;
	transition:all 0.5s ease-in-out 0s;
}
.port-card-1{
	background-image:url("img/portfolio-1.webp");
	background-size:cover;
	height:690px;
}
.port-card-2{
	background-image:url("img/porfolio-2.webp");
	background-size:cover;
	background-position:center center;
	height:100%;
}
.port-card-3{
	background-image:url("img/portfolio-3.webp");
	height:100%;
	background-size:cover;
	background-position:center center;
}
.port-alt-row{
	height:100%;
}
.port-card-4{
	height:100%;
	background-image:url("img/portfolio-4.webp");
	background-size:cover;
	background-position:center center;
}
.port-card-title{
	color:var(--swatch-var-6003)!important;
	margin-bottom:0px!important;
}
.port-card-icon{
	width:58px;
	height:58px;
	fill:var(--swatch-var-6003);
}
.middle{
	position:absolute;
	transform:translateX(-50%) translateY(-50%);
	left:50%;
	top:40%;
}
.port-card-container:hover{
	transform:scale(1.02);
}
.overflow-hidden{
	overflow:hidden!important;
}
.blocsapp-special-menu blocsnav li a{
	color:var(--swatch-var-6780)!important;
}
.navbar-nav li a{
	color:var(--swatch-var-6780)!important;
	font-size:22px;
	font-family:"BebasNeue-Regular";
}
.contact-item-container{
	margin-bottom:32px;
}
.icon-green{
	fill:var(--swatch-var-6003)!important;
	margin-right:16px!important;
}
.contact-item{
	font-size:16px;
}
.form-control{
	border-radius:0px 0px 0px 0px;
}
.footer-container{
	flex-direction:row;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.p-s{
	font-size:16px;
	line-height:16px;
}
.quote-card-container{
	padding:32px 32px 32px 32px;
	transition:all 0.5s ease-in-out 0s;
	color:var(--swatch-var-6780)!important;
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
}
.stars-container{
	display:flex;
	align-items:center;
}
.svg-icon-bloc-10-fill{
	fill:var(--swatch-var-2715)!important;
	width:16px!important;
	height:16px!important;
}
.quote-author-container{
	flex-direction:row;
	display:flex;
	align-items:center;
}
.quote-author-image{
	width:40px;
	height:40px;
	margin-right:16px;
}
.p-xs{
	font-size:12px;
	line-height:18px;
}
.p-bold{
	font-weight:bold;
}
.quote-card-container:hover{
	background-color:var(--swatch-var-6003);
	color:var(--swatch-var-280)!important;
}
.google-rating{
	align-items:flex-start;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}
.temoignage-header{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
}
.border-top{
	border-width:3px 0px 0px 0px!important;
	border-style:solid;
	border-color:var(--swatch-var-6003)!important;
}
.align-end-hero{
	display:flex!important;
	align-items:flex-end!important;
	margin-bottom:0px!important;
	padding-bottom:0px;
	position:relative;
}
.button-off-dark{
	font-size:22px!important;
	background-color:rgba(0,0,0,0.32);
	transition:all 0.2s ease-in-out 0s;
	text-transform:none;
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
	letter-spacing:1px;
}
.button-off-dark:hover{
	background-color:rgba(46,46,46,0.16);
	transform:translateY(-2px) scale(0.98);
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:var(--swatch-var-2359)!important;
}
.icon-bk{
	fill:var(--swatch-var-280)!important;
	width:16px;
	margin-right:16px;
}
.tag-icon{
	height:32px!important;
	width:24px;
	margin-right:32px;
}
.p-l{
	font-size:20px;
}
.headline-tag-dark{
	font-size:16px;
	text-transform:uppercase;
	fill:var(--swatch-var-6840);
	color:var(--swatch-var-6840)!important;
	letter-spacing:1px;
	font-family:"BebasNeue-Regular";
}
.data-l{
	font-size:78px;
	font-family:"BebasNeue-Regular";
	line-height:70px;
}
.data-card-client{
	font-family:"BebasNeue-Regular";
	letter-spacing:1px;
	font-size:22px;
}
.button-dark{
	background-color:var(--swatch-var-280);
	transition:all 0.2s ease-in-out 0s;
	font-size:22px!important;
}
.button-dark:hover{
	transform:scale(0.98) translateY(-2px);
	background-color:rgba(0,0,0,0.90);
}
.text-green{
	color:var(--swatch-var-6003)!important;
}
.hero-s{
	height:60vh;
}
.quote-l{
	border-width:0px 0px 0px 3px;
	border-style:solid;
	border-color:var(--swatch-var-6003)!important;
	padding-left:32px;
}
label{
	letter-spacing:1px;
	font-size:16px;
	font-family:"OpenSans-Regular";
}
.price-card{
	padding:16px 16px 16px 16px;
	border-width:1px 1px 1px 1px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
	margin-right:16px;
	margin-left:16px;
	transition:all 0.3s ease-in-out 0s;
}
.price-range{
	font-family:"BebasNeue-Regular";
	line-height:56px;
	font-size:4em;
}
.divider-background-color{
	background-color:var(--swatch-var-6840);
}
.border-yell{
	border-color:var(--swatch-var-6003)!important;
}
.price-card:hover{
	transform:translateY(-2px);
}
.flex-div-stretch{
	display:flex;
	justify-content:space-between;
	flex-direction:row;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
	padding:16px 0px 16px 0px;
}
.text-bold{
	font-family:"OpenSans-Bold"!important;
}
.card-simple{
	border-width:1px 0px 0px 0px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
	padding-top:16px;
	transition:all 0.3s ease-in-out 0s;
	margin-bottom:64px;
}
.card-simple:hover{
	transform:translateY(-3px);
}
.link-classic{
	font-family:"OpenSans-Regular"!important;
	text-decoration:none!important;
	font-size:16px!important;
}
.container-div-style{
	opacity:1.0;
}
.transp-nav{
	position:relative;
}
.video-item-container{
	height:350px;
	border-width:0px 0px 0px 0px!important;
	object-fit:cover;
	color:var(--swatch-var-280)!important;
	margin-bottom:16px!important;
}
.video-item-image{
	background-size:cover;
	margin-left:0px!important;
	margin-right:0px!important;
	height:250px;
	background-image:url("img/fi-group.webp");
	object-fit:cover;
	margin-bottom:16px;
	width:100%;
}
.project-detail-item{
	display:flex;
	justify-content:flex-start;
	flex-direction:row;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:var(--swatch-var-1792)!important;
	padding:16px 0px 16px 0px;
	align-items:center;
}
.project-detail-item-title{
	font-family:"OpenSans-Medium";
	text-transform:uppercase;
	font-size:16px;
	color:var(--swatch-var-6840)!important;
	min-width:150px;
}
.cat-film-événementiel{
	margin-bottom:32px;
}
.project-title{
	font-size:7.6em!important;
	font-family:"BebasNeue-Regular"!important;
	font-weight:normal!important;
	color:var(--swatch-var-280)!important;
	text-transform:none;
	line-height:91px;
	letter-spacing:-1px;
}
.bc-label{
	font-family:"OpenSans-Regular"!important;
	text-transform:none;
	text-decoration:none;
	font-size:12px;
}
.tag-icon-s{
	width:16px!important;
	height:16px!important;
}
.headline-tag-duo{
	font-size:14px;
	text-transform:uppercase;
	color:var(--swatch-var-7583)!important;
	font-family:"OpenSans-Regular";
	letter-spacing:1px;
	fill:#FF5454;
	line-height:12px;
}
.breadcb{
	position:absolute!important;
	top:88px;
	width:100%;
}
.project-goal-item-title{
	color:var(--swatch-var-280)!important;
	font-family:"OpenSans-SemiBold";
	min-width:300px;
}
.project-goal-item-number{
	font-size:24px;
	color:var(--swatch-var-280)!important;
	font-family:"BebasNeue-Regular";
	min-width:50px;
	line-height:auto;
	direction:rtl;
}
.project-goal-item{
	flex-direction:row;
	display:flex;
	justify-content:flex-start;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:var(--swatch-var-1792)!important;
	padding-top:32px;
	padding-bottom:16px;
	align-items:center;
}
.port-nav-left{
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
.port-nav-right{
	display:flex;
	align-items:center;
	justify-content:flex-end;
}
.studio-data-card-title{
	font-family:"BebasNeue-Regular";
	font-size:50px;
}
.studio-data-card{
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:var(--swatch-var-6840)!important;
	padding-top:16px;
	padding-bottom:8px;
}
.headline-tag{
	text-transform:uppercase;
	font-size:16px;
	letter-spacing:2px;
}
.icon-white{
	fill:var(--swatch-var-6780)!important;
}
.project-image{
	height:500px;
	background-size:cover;
	background-position:center center;
}
.bloc-link{
	font-family:"OpenSans-Regular";
	text-decoration:none;
	font-size:16px;
	text-transform:none;
	line-height:32px;
}
h4{
	font-size:18px;
	font-family:"OpenSans-Regular";
	text-transform:uppercase;
	letter-spacing:1px;
	color:var(--swatch-var-5081)!important;
}
.footer-logo{
	height:110px;
	margin-bottom:32px;
	background-size:length;
}
.gn-btn{
	border-width:0px 0px 0px 0px!important;
	font-family:"BebasNeue-Regular";
	letter-spacing:1px;
	font-size:28px!important;
}
.gn-title{
	font-size:44px;
	font-family:"BebasNeue-Regular";
}
.social-icon{
	fill:var(--swatch-var-6003)!important;
	width:32px;
	height:32px;
}
.header-logo{
	width:100px;
	height:100px;
	background-size:length;
}
.label-white{
	color:var(--swatch-var-6780)!important;
}
.bloc-button{
	font-size:34px;
	background-color:transparent;
}
.btn-form{
	font-size:34px;
	color:var(--swatch-var-280)!important;
	background-color:var(--swatch-var-6003);
}
.breadcrumb{
	position:absolute;
	bottom:-20px;
	width:100%;
}
.svg-icon-style{
	width:56px!important;
	height:56px!important;
}
.menu-icon-stroke{
	stroke:var(--swatch-var-6003)!important;
	fill:var(--swatch-var-6003)!important;
}
.menu-icon-navbar-stroke{
	stroke:var(--swatch-var-6780)!important;
	fill:var(--swatch-var-6780)!important;
}

/* = Colour
-------------------------------------------------------------- */

/* Swatch Variables */
:root{
	
	--swatch-var-280:rgba(15,15,15,1.00);
	
	--swatch-var-6780:rgba(255,255,255,1.00);
	
	--swatch-var-1792:rgba(180,192,206,1.00);
	
	--swatch-var-6003:rgba(49,253,148,1.00);
	
	--swatch-var-2359:rgba(49,235,148,0.85);
	
	--swatch-var-5081:rgba(241,242,236,1.00);
	
	--swatch-var-7583:rgba(28,28,28,1.00);
	
	--swatch-var-6840:rgba(66,66,66,0.69);
	
	--swatch-var-2715:rgba(255,187,0,1.00);
	
	--swatch-var-4621:rgba(251,251,247,1.00);
	
}


/* Background colour styles */

.bgc-5081{
	background-color:var(--swatch-var-5081);
}
.bgc-6003{
	background-color:var(--swatch-var-6003);
}
.bgc-4621{
	background-color:var(--swatch-var-4621);
}
.bgc-7583{
	background-color:var(--swatch-var-7583);
}
.bgc-280{
	background-color:var(--swatch-var-280);
}

/* Text colour styles */

.tc-6780{
	color:var(--swatch-var-6780)!important;
}
.tc-280{
	color:var(--swatch-var-280)!important;
}
.tc-7583{
	color:var(--swatch-var-7583)!important;
}
.tc-6003{
	color:var(--swatch-var-6003)!important;
}

/* Button colour styles */

.bgc-280{
	background-color:var(--swatch-var-280);
}
.tc-280{
	color:var(--swatch-var-280)!important;
}
.btn-c-280,.btn-c-280:focus{
	background:var(--swatch-var-280);
	color:#FFFFFF!important;
	fill:#FFFFFF;
}
.btn-c-280:hover{
	background:#000000!important;
	color:#FFFFFF!important;
	fill:#FFFFFF;
}
.wire-btn-c-280{
	color:var(--swatch-var-280)!important;
	border-color:var(--swatch-var-280)!important;
	fill:var(--swatch-var-280);
}
.ltc-280{
	color:var(--swatch-var-280)!important;
	fill:var(--swatch-var-280);
}
.ltc-280:hover{
	color:#000000!important;
	fill:var(--swatch-var-280);
}
.icon-280{
	color:var(--swatch-var-280)!important;
	border-color:var(--swatch-var-280)!important;
}
/**/.bgc-6780{
	background-color:var(--swatch-var-6780);
}
.tc-6780{
	color:var(--swatch-var-6780)!important;
}
.btn-c-6780,.btn-c-6780:focus{
	background:var(--swatch-var-6780);
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}
.btn-c-6780:hover{
	background:#CCCCCC!important;
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}
.wire-btn-c-6780{
	color:var(--swatch-var-6780)!important;
	border-color:var(--swatch-var-6780)!important;
	fill:var(--swatch-var-6780);
}
.ltc-6780{
	color:var(--swatch-var-6780)!important;
	fill:var(--swatch-var-6780);
}
.ltc-6780:hover{
	color:#CCCCCC!important;
	fill:var(--swatch-var-6780);
}
.icon-6780{
	color:var(--swatch-var-6780)!important;
	border-color:var(--swatch-var-6780)!important;
}
/**/.bgc-1792{
	background-color:var(--swatch-var-1792);
}
.tc-1792{
	color:var(--swatch-var-1792)!important;
}
.btn-c-1792,.btn-c-1792:focus{
	background:var(--swatch-var-1792);
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}
.btn-c-1792:hover{
	background:#818D9B!important;
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}
.wire-btn-c-1792{
	color:var(--swatch-var-1792)!important;
	border-color:var(--swatch-var-1792)!important;
	fill:var(--swatch-var-1792);
}
.ltc-1792{
	color:var(--swatch-var-1792)!important;
	fill:var(--swatch-var-1792);
}
.ltc-1792:hover{
	color:#818D9B!important;
	fill:var(--swatch-var-1792);
}
.icon-1792{
	color:var(--swatch-var-1792)!important;
	border-color:var(--swatch-var-1792)!important;
}
/**/.bgc-6003{
	background-color:var(--swatch-var-6003);
}
.tc-6003{
	color:var(--swatch-var-6003)!important;
}
.btn-c-6003,.btn-c-6003:focus{
	background:var(--swatch-var-6003);
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}
.btn-c-6003:hover{
	background:#00C961!important;
	color:rgba(0,0,0,.5)!important;
	fill:rgba(0,0,0,.5);
}

/* Link colour styles */

.ltc-6003{
	color:var(--swatch-var-6003)!important;
	fill:var(--swatch-var-6003);
}
.ltc-6003:hover{
	color:#00C961!important;
	fill:var(--swatch-var-6003);
}
.ltc-6780{
	color:var(--swatch-var-6780)!important;
	fill:var(--swatch-var-6780);
}
.ltc-6780:hover{
	color:#CCCCCC!important;
	fill:var(--swatch-var-6780);
}
.ltc-280{
	color:var(--swatch-var-280)!important;
	fill:var(--swatch-var-280);
}
.ltc-280:hover{
	color:#000000!important;
	fill:var(--swatch-var-280);
}

/* Bloc image backgrounds */

.bg-Background-CTA{
	background-image:url("img/Background-CTA.webp");
}
.bg-scripting{
	background-image:url("img/scripting.webp");
}
.bg-tournage{
	background-image:url("img/tournage.webp");
}
.bg-communicate{
	background-image:url("img/communicate.webp");
}
.bg-post-prod{
	background-image:url("img/post-prod.webp");
}
.bg-ia{
	background-image:url("img/ia.webp");
}
.bg-entendre{
	background-image:url("img/entendre.webp");
}
.bg-evenementiel{
	background-image:url("img/evenementiel.webp");
}
.bg-message-clé{
	background-image:url("img/message-cle%CC%81.webp");
}
.bg-interne{
	background-image:url("img/interne.webp");
}
.bg-fi-group{
	background-image:url("img/fi-group.webp");
}
.bg-ryght{
	background-image:url("img/ryght.webp");
}
.bg-mercedes{
	background-image:url("img/mercedes.webp");
}
.bg-video-corporate{
	background-image:url("img/video-corporate.webp");
}
.bg-Video-EcoleSuperieure{
	background-image:url("img/Video-EcoleSuperieure.webp");
}
.bg-video-guess{
	background-image:url("img/video-guess.webp");
}
.bg-video-pub{
	background-image:url("img/video-pub.webp");
}
.bg-Publicite-tv{
	background-image:url("img/Publicite-tv.webp");
}
.bg-video-interne-corporate{
	background-image:url("img/video-interne-corporate.webp");
}
.bg-publicite{
	background-image:url("img/publicite.webp");
}
.bg-defile-de-mode{
	background-image:url("img/defile-de-mode.webp");
}
.bg-clap-captation{
	background-image:url("img/clap-captation.webp");
}
.bg-whiteboard-doodle{
	background-image:url("img/whiteboard-doodle.webp");
}
.bg-plongeon-acrobatique-1280{
	background-image:url("img/plongeon_acrobatique-1280.webp");
}

/* = Custom Bric Data
-------------------------------------------------------------- */

/* ============================================================   Accordion Dynamic Bric - Design Time CSS   Applied in the Blocs editor AND included in export.   ============================================================ *//* --- Main Container --- */.acc-dynamic {
		display: flex;
		flex-direction: row;
		gap: var(--acc-gap, 8px);
		min-height: var(--acc-min-height, 400px);
		width: 100%;
		overflow: hidden;
}
/* Vertical layout */.acc-dynamic.acc-vertical {
		flex-direction: column;
}
/* --- Individual Panel --- */.acc-dynamic-panel {
		position: relative;
		flex: 1 1 0%;
		overflow: hidden;
		border-radius: var(--acc-radius, 12px);
		cursor: pointer;
		-webkit-transition: flex-grow var(--acc-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);
		transition: flex-grow var(--acc-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);
			/* GPU Composite layer acceleration (highly optimized for macOS WebKit/Safari & iOS) */	will-change: flex-grow;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
			/* Ensure dropped content fills the panel */	display: flex;
		flex-direction: column;
}
.acc-dynamic-panel > * {
		flex-grow: 1;
		width: 100%;
		height: 100%;
}
/* Hover expansion */.acc-dynamic-panel:hover {
		flex-grow: var(--acc-hover-scale, 3);
}
/* Keyboard focus expansion & outline */.acc-dynamic-panel:focus-within {
		flex-grow: var(--acc-hover-scale, 3);
		outline: 2px solid var(--acc-title-color, #ffffff);
		outline-offset: -3px;
}
/* Touch active state (mobile tap) */.acc-dynamic-panel.acc-touch-active {
		flex-grow: var(--acc-hover-scale, 3);
}
/* --- Optional Dark Overlay --- */.acc-dynamic-panel.acc-has-overlay::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
		z-index: 1;
		pointer-events: none;
		border-radius: inherit;
		-webkit-transition: opacity 0.4s ease;
		transition: opacity 0.4s ease;
}
.acc-dynamic-panel.acc-has-overlay:hover::after {
		opacity: 0.7;
}
/* --- Responsive: stack on mobile --- */@media (max-width: 767px) {
		.acc-dynamic {
			flex-direction: column;
			min-height: 0;
	}
	.acc-dynamic-panel {
			min-height: 120px;
			flex-grow: 1;
	}
	.acc-dynamic-panel:hover {
			flex-grow: var(--acc-hover-scale, 3);
	}
}/* --- Panel Titles (visible on hover) --- */.acc-panel-title {
		position: absolute;
		z-index: 2;
		opacity: 0;
		/* Override the panel > * rule that forces 100% width/height */	width: auto !important;
		height: auto !important;
		flex-grow: 0 !important;
		-webkit-transition: opacity var(--acc-speed, 0.5s) ease, -webkit-transform var(--acc-speed, 0.5s) ease;
		transition: opacity var(--acc-speed, 0.5s) ease, transform var(--acc-speed, 0.5s) ease;
		pointer-events: none;
		font-family: var(--acc-title-font, inherit);
		font-weight: var(--acc-title-weight, inherit);
		font-size: var(--acc-title-size, 24px);
		color: var(--acc-title-color, #ffffff);
		padding: 12px 18px;
		text-shadow: 0 1px 4px rgba(0,0,0,0.6);
		line-height: 1.2;
		white-space: nowrap;
		max-width: 100%;
		box-sizing: border-box;
}
.acc-panel-title.acc-title-top {
		top: 0;
	 left: 0;
	 right: 0;
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
}
.acc-panel-title.acc-title-bottom {
		bottom: 0;
	 left: 0;
	 right: 0;
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
}
.acc-panel-title.acc-title-left {
		left: 0;
	 top: 0;
	 bottom: 0;
		display: flex;
		align-items: center;
		height: 100% !important;
		writing-mode: vertical-lr;
		-webkit-transform: rotate(180deg) translateX(10px);
		transform: rotate(180deg) translateX(10px);
}
.acc-panel-title.acc-title-right {
		right: 0;
	 top: 0;
	 bottom: 0;
		display: flex;
		align-items: center;
		height: 100% !important;
		writing-mode: vertical-lr;
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
}
/* Show titles on hover, touch, and keyboard focus */.acc-dynamic-panel:hover .acc-panel-title.acc-title-top,.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-top,.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-top {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-bottom,.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-bottom,.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-bottom {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-left,.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-left,.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-left {
		opacity: 1;
		-webkit-transform: rotate(180deg) translateX(0);
		transform: rotate(180deg) translateX(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-right,.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-right,.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-right {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
}
/* Panel link overlay */.acc-panel-link {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: block;
		text-decoration: none;
		cursor: pointer;
}
/* --- Mobile & touch: titles always visible ---   No hover available, so the title is shown permanently   instead of waiting for a tap. Kept last to win the cascade. */@media (max-width: 767px), (hover: none) {
		.acc-dynamic-panel .acc-panel-title {
			opacity: 1;
	}
	.acc-dynamic-panel .acc-panel-title.acc-title-top,	.acc-dynamic-panel .acc-panel-title.acc-title-bottom {
			-webkit-transform: translateY(0);
			transform: translateY(0);
	}
	.acc-dynamic-panel .acc-panel-title.acc-title-left {
			-webkit-transform: rotate(180deg) translateX(0);
			transform: rotate(180deg) translateX(0);
	}
	.acc-dynamic-panel .acc-panel-title.acc-title-right {
			-webkit-transform: translateX(0);
			transform: translateX(0);
	}
}/* --- Mobile: readable titles ---   Long titles wrap, and side (vertical) titles move to the bottom:   a stacked panel is too short for vertical text. */@media (max-width: 767px) {
		.acc-dynamic-panel .acc-panel-title {
			white-space: normal;
	}
	.acc-dynamic-panel .acc-panel-title.acc-title-left,	.acc-dynamic-panel .acc-panel-title.acc-title-right {
			display: block;
			top: auto;
			right: 0;
			bottom: 0;
			left: 0;
			height: auto !important;
			writing-mode: horizontal-tb;
			-webkit-transform: none;
			transform: none;
	}
}/* --- Mobile: scroll-driven expansion ---   .acc-scroll-ready is added by the runtime JS (never when the visitor   prefers reduced motion). The container gets a fixed height so the   panel in focus can grow without moving the rest of the page:   every panel keeps --acc-mobile-panel, the active one gets   --acc-mobile-scale times that. */@media (max-width: 767px) {
		.acc-dynamic.acc-scroll-ready {
			height: calc(			(var(--acc-count, 4) + var(--acc-mobile-scale, 2) - 1) * var(--acc-mobile-panel, 120px)			+ (var(--acc-count, 4) - 1) * var(--acc-gap, 8px)		);
	}
	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel,	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel:hover,	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel:focus-within,	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel.acc-touch-active {
			min-height: 0;
			flex-grow: 1;
	}
	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel.acc-scroll-active,	.acc-dynamic.acc-scroll-ready .acc-dynamic-panel.acc-scroll-active:hover {
			flex-grow: var(--acc-mobile-scale, 2);
	}
}/* ============================================   Fancy Text Engine - Class Based   ============================================ *//* The wrapper is intentionally left unstyled.   Its appearance comes entirely from its semantic tag (h1–h6, p, div, span),   selected via the "Type" control, so it inherits the project's native   heading/paragraph styles — including responsive sizing — and previews   correctly in the Blocs canvas.   No font-size/inline styles are forced here, so any class added to the bric   (or its wrapper) can override the appearance through normal CSS cascade. *//* --- COLOR MODEL ---   Colour is NEVER hard-coded on .ft-word: a declaration on the word itself   would shadow whatever the user sets on the bric (a class with !important on   a parent cannot beat a plain declaration on the child — !important only   arbitrates between declarations on the SAME element).   So every colour goes through a custom property that resolves to `inherit`   when unset:     --ft-color      final text colour (Text Color control, optional)     --ft-color-from start colour of the "color" animation     --ft-block      colour of the sweeping block in "color-block"   The properties are set inline on .fancy-text by the sidebar controls, so   they cascade down to the words like any inherited value. *//* Base word style used by JS injector */.ft-word {
	    display: inline-block;
	    opacity: 0;
	    transition-property: opacity, transform, color, filter;
	    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	    white-space: pre-wrap;
	    will-change: opacity, transform, color, filter;
}
/* --- ANIMATION STYLES --- *//* Fade */.ft-fade .ft-word {
	    opacity: 0;
	    transform: none;
}
/* Slide Up */.ft-up .ft-word {
	    opacity: 0;
	    transform: translateY(40px);
}
/* Slide Down */.ft-down .ft-word {
	    opacity: 0;
	    transform: translateY(-40px);
}
/* Slide Left */.ft-left .ft-word {
	    opacity: 0;
	    transform: translateX(-40px);
}
/* Slide Right */.ft-right .ft-word {
	    opacity: 0;
	    transform: translateX(40px);
}
/* Scale */.ft-scale .ft-word {
	    opacity: 0;
	    transform: scale(0.5);
}
/* Blur — text is visible but blurry, then sharpens word by word */.ft-blur .ft-word {
	    opacity: 1;
	    filter: blur(12px);
	    transform: none;
}
.ft-blur .ft-word.ft-animated {
	    opacity: 1;
	    filter: blur(0px);
	    transform: none;
}
/* Color shift — starts at --ft-color-from, transitions to the text colour */.ft-color .ft-word {
	    opacity: 1;
	    transform: none;
	    color: var(--ft-color-from, #cccccc);
}
/* --- COLOR BLOCK ---   A solid block wipes across each word (left → right), then retracts towards   the right, uncovering the text behind it. The word itself is hidden with   `visibility` rather than `color`, so the block can use `currentColor` and   default to the text colour when no block colour is set.   The animated unit is the LINE (.ft-cb-line, one per <br> segment), so the   band spans the whole line — words and the spaces between them — as a single   sweeping element, never split per word. */.ft-colorblock .ft-cb-line {
	    display: inline-block;
	    opacity: 1;
	    transform: none;
	    position: relative;
	    visibility: hidden;
}
.ft-colorblock .ft-cb-line::after {
	    content: "";
	    position: absolute;
	    top: -0.08em;
	    right: -0.1em;
	    bottom: -0.06em;
	    left: -0.1em;
	    background: var(--ft-block, currentColor);
	    transform: scaleX(0);
	    transform-origin: left center;
	    visibility: visible;
	    pointer-events: none;
}
.ft-colorblock .ft-cb-line.ft-animated {
	    animation: ft-block-reveal var(--ft-duration, 0.6s) linear forwards;
}
.ft-colorblock .ft-cb-line.ft-animated::after {
	    animation: ft-block-sweep var(--ft-duration, 0.6s) cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/* First half: grow from the left. Second half: collapse towards the right.   Between 45% and 55% the origin slides from left to right while the block is   at full width, so the swap is invisible. */@keyframes ft-block-sweep {
	    0% {
	        transform: scaleX(0);
	        transform-origin: left center;
	    }    45% {
	        transform: scaleX(1);
	        transform-origin: left center;
	    }    55% {
	        transform: scaleX(1);
	        transform-origin: right center;
	    }    100% {
	        transform: scaleX(0);
	        transform-origin: right center;
	    }}/* The glyphs appear exactly when the block starts retracting. */@keyframes ft-block-reveal {
	    0%,    50% {
	        visibility: hidden;
	    }    50.01%,    100% {
	        visibility: visible;
	    }}/* --- ACTIVE STATE --- */.ft-word.ft-animated {
	    opacity: 1;
	    transform: translate(0) scale(1);
	    filter: none;
}
.ft-color .ft-word.ft-animated {
	    color: var(--ft-color, inherit);
}
/* --- REDUCED MOTION --- */@media (prefers-reduced-motion: reduce) {
	    .ft-colorblock .ft-cb-line,    .ft-colorblock .ft-cb-line.ft-animated {
	        visibility: visible;
	        animation: none;
	    }    .ft-colorblock .ft-cb-line::after,    .ft-colorblock .ft-cb-line.ft-animated::after {
	        animation: none;
	        transform: scaleX(0);
	    }}/* --- EDITOR PROTECTION --- *//* Ensure text is always visible in Blocs Editor */body.bloc-editor [class*="ft-"] .ft-word,body.bloc-editor [class*="ft-"] .ft-cb-line,body.bloc-editor [class*="ft-"] {
	    opacity: 1 !important;
	    transform: none !important;
	    filter: none !important;
	    visibility: visible !important;
	    animation: none !important;
}
body.bloc-editor [class*="ft-"] .ft-word::after,body.bloc-editor [class*="ft-"] .ft-cb-line::after {
	    display: none !important;
}
/* bric.css *//* === Styles de container === */.image-marquee {
	  position: relative;
	  overflow: hidden;
	  max-width: 100%;
	 }/* === Dégradés de bordure (Fade) === *//* 1. Masque de dégradé transparent (avec préfixes pour Safari Mac/iOS) */.image-marquee[data-show-fade="1"] {
	  -webkit-mask-image: linear-gradient(    to right,    transparent 0%, black 25%,    black 75%, transparent 100%  );
	  mask-image: linear-gradient(    to right,    transparent 0%, black 25%,    black 75%, transparent 100%  );
}
/* 2. Superposition de couleur solide en option (configurée via l'inspecteur) */.image-marquee[data-show-fade="1"]::before,.image-marquee[data-show-fade="1"]::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  width: 15%;
	  z-index: 2;
	  pointer-events: none;
}
.image-marquee[data-show-fade="1"]::before {
	  left: 0;
	  background: linear-gradient(to right, var(--fade-color, #ffffff) 0%, transparent 100%);
}
.image-marquee[data-show-fade="1"]::after {
	  right: 0;
	  background: linear-gradient(to left, var(--fade-color, #ffffff) 0%, transparent 100%);
}
/* === Wrapper et animation === */.image-marquee .marquee-wrapper {
	  display: flex;
	  width: max-content;
	  will-change: transform;
}
@keyframes marquee-left {
	   from {
	 transform: translateX(0);
	 }   to {
	 transform: translateX(-50%);
	 } }@keyframes marquee-right {
	   from {
	 transform: translateX(-50%);
	 }   to {
	 transform: translateX(0);
	 } }/* === Images - Styles par défaut (personnalisables via le Class Editor ou l'Inspecteur) === */.image-marquee .marquee-wrapper img,.image-marquee .marquee-wrapper .marquee-image {
	  flex-shrink: 0;
	  object-fit: cover;
	  /* Valeurs par défaut douces s'il n'y a pas d'inline styles ou de classe personnalisée */  height: 72px;
	  width: auto;
	  margin-right: 20px;
	 /* Espace par défaut */  border-radius: 0px;
	 /* Rayon par défaut */}/* === Durées et Directions pour le Preview en temps réel dans Blocs === */.image-marquee[data-speed="Drowsy"]    .marquee-wrapper {
	 animation-duration: 30s;
	 }.image-marquee[data-speed="Slow"]      .marquee-wrapper {
	 animation-duration: 20s;
	 }.image-marquee[data-speed="Normal"]    .marquee-wrapper {
	 animation-duration: 10s;
	 }.image-marquee[data-speed="Fast"]      .marquee-wrapper {
	 animation-duration: 7s;
	 }.image-marquee[data-speed="Swift"]     .marquee-wrapper {
	 animation-duration: 5s;
	 }.image-marquee[data-speed="Hyper"]     .marquee-wrapper {
	 animation-duration: 2s;
	 }.image-marquee[data-direction="Left"]  .marquee-wrapper {
	  animation-name: marquee-left;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
}
.image-marquee[data-direction="Right"] .marquee-wrapper {
	  animation-name: marquee-right;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
}
/* ==========================================================================   Gallery Sorted — styles (loaded in the Blocs editor AND exported to the page)   ========================================================================== */.gs-gallery {
	  --gs-cols: 3;
	  --gs-gap: 16px;
	  width: 100%;
}
/* ---- Filter bar (pills) -------------------------------------------------- */.gs-filter {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.5rem;
	  margin-bottom: var(--gs-gap);
}
.gs-pill {
	  appearance: none;
	  -webkit-appearance: none;
	  border: 1px solid currentColor;
	  background: transparent;
	  color: inherit;
	  font: inherit;
	  line-height: 1;
	  padding: 0.5em 1em;
	  border-radius: 999px;
	  cursor: pointer;
	  opacity: 0.6;
	  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.gs-pill:hover {
	 opacity: 1;
	 }.gs-pill[aria-pressed="true"] {
	  opacity: 1;
	  background: currentColor;
}
/* Keep the label readable when the pill background becomes currentColor */.gs-pill[aria-pressed="true"] .gs-pill-label {
	  mix-blend-mode: difference;
	  color: #fff;
}
.gs-pill:focus-visible {
	  outline: 2px solid currentColor;
	  outline-offset: 2px;
}
/* ---- Grid ---------------------------------------------------------------- */.gs-grid {
	  display: grid;
	  grid-template-columns: repeat(var(--gs-cols), minmax(0, 1fr));
	  gap: var(--gs-gap);
}
/* Each cell is a drop zone. min-height keeps empty cells droppable in the   editor;
	 real dropped content defines the height on the live page. */.gs-item {
	  position: relative;
	  min-width: 0;
	  min-height: 120px;
}
/* Editor-only affordance: inside the Blocs design canvas (<editarea>),   empty drop cells are clearly visible while building. */editarea .gs-item {
	  outline: 1px dashed rgba(120, 120, 140, 0.5);
	  outline-offset: -1px;
	  border-radius: 6px;
}
.gs-item > bric_container {
	  display: block;
	  width: 100%;
	  height: 100%;
	  min-height: inherit;
}
/* Internal links: a Link Container dropped as the cell's content fills the whole   card, so the entire cell is clickable. Only direct-child links are stretched —   inline links inside text content keep their normal inline behaviour. */.gs-item > a,.gs-item > bric_container > a {
	  display: block;
	  height: 100%;
}
/* Whole-cell clickable (set by the runtime when a cell contains a link) */.gs-item.gs-clickable {
	 cursor: pointer;
	 }/* Hidden by the filter (live only) */.gs-item.gs-hidden {
	 display: none;
	 }/* Entrance animation when an item (re)appears after filtering */.gs-item.gs-enter {
	 animation: gs-fade-in 0.35s ease both;
	 }@keyframes gs-fade-in {
	  from {
	 opacity: 0;
	 transform: scale(0.96);
	 }  to   {
	 opacity: 1;
	 transform: scale(1);
	 }}/* ---- Editor-only helpers (stripped from export via .remove-on-export) ---- */.gs-badge {
	  position: absolute;
	  top: 6px;
	  left: 6px;
	  z-index: 5;
	  pointer-events: none;
	  font: 600 11px/1.3 -apple-system, system-ui, sans-serif;
	  background: rgba(20, 20, 28, 0.82);
	  color: #fff;
	  padding: 3px 7px;
	  border-radius: 6px;
	  max-width: calc(100% - 12px);
}
.gs-badge .gs-badge-cats {
	 opacity: 0.7;
	 font-weight: 400;
	 }.gs-badge .gs-badge-hint {
	 opacity: 0.6;
	 font-weight: 400;
	 font-style: italic;
	 }.gs-badge .gs-badge-slug {
	 opacity: 0.55;
	 font-weight: 400;
	 font-family: ui-monospace, monospace;
	 }.bric-canvas-placeholder {
	  font: 600 0.75rem/1 -apple-system, sans-serif;
	  text-transform: uppercase;
	  letter-spacing: 0.08em;
	  opacity: 0.4;
	  padding: 0.5rem 0;
}
/* ---- Responsive fallback (kept conservative so the editor canvas shows the   real column count;
	 only collapse on genuinely small viewports) ----------- */@media (max-width: 768px) {
	  .gs-grid {
	 grid-template-columns: repeat(min(var(--gs-cols), 2), minmax(0, 1fr));
	 }}@media (max-width: 480px) {
	  .gs-grid {
	 grid-template-columns: 1fr;
	 }}@media (prefers-reduced-motion: reduce) {
	  .gs-item.gs-enter {
	 animation: none;
	 }}/* Breadcrumb — published page styles. SOURCE OF TRUTH.   Blocs bundles this file natively to the published page AND injects it into the   editor canvas (linked from index.html). Do NOT inline these rules into a   <style> in the data.bric action — that ships the CSS twice and duplicates it   per instance. Edit styles here only. */.bc-breadcrumb {
	  --bc-size: 12px;
	  --bc-gap: 8px;
	  --bc-justify: flex-start;
	  --bc-color-text: #6b7280;
	  --bc-color-link: #6b7280;
	  --bc-color-active: #6b7280;
	  --bc-color-sep: #9ca3af;
	  display: block;
	  width: 100%;
	  font-size: var(--bc-size);
	  line-height: 1.4;
	  position: absolute;
	  top: 16px;
	  left: 0;
	  right: 0;
	  z-index: 5;
}
.bc-breadcrumb .bc-list {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  justify-content: var(--bc-justify);
	  gap: var(--bc-gap);
	  margin: 0;
	  padding: 0;
	  list-style: none;
}
.bc-breadcrumb .bc-item,.bc-breadcrumb .bc-sep,.bc-breadcrumb .bc-ellipsis {
	  display: inline-flex;
	  align-items: center;
	  margin: 0;
	  padding: 0;
}
.bc-breadcrumb .bc-link,.bc-breadcrumb .bc-leaf {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.35em;
	  color: var(--bc-color-link);
	  text-decoration: none;
	  transition: color 0.15s ease, opacity 0.15s ease;
}
.bc-breadcrumb .bc-link:hover,.bc-breadcrumb .bc-link:focus-visible {
	  text-decoration: underline;
	  opacity: 0.85;
}
.bc-breadcrumb .bc-current .bc-leaf {
	  color: var(--bc-color-active);
	  font-weight: 600;
	  cursor: default;
}
.bc-breadcrumb .bc-sep {
	  color: var(--bc-color-sep);
	  user-select: none;
}
.bc-breadcrumb .bc-chevron {
	  display: block;
}
.bc-breadcrumb .bc-home-icon {
	  display: block;
	  color: inherit;
}
.bc-breadcrumb .bc-link:focus-visible,.bc-breadcrumb .bc-ellipsis-btn:focus-visible {
	  outline: 2px solid var(--bc-color-link);
	  outline-offset: 2px;
	  border-radius: 3px;
}
/* Collapsible (long) trails ------------------------------------------------ */.bc-breadcrumb .bc-ellipsis {
	  display: none;
}
.bc-breadcrumb .bc-ellipsis-btn {
	  font: inherit;
	  color: var(--bc-color-text);
	  background: none;
	  border: none;
	  padding: 0 0.15em;
	  cursor: pointer;
	  line-height: 1;
}
@media (max-width: 600px) {
	  .bc-breadcrumb.bc-collapsible:not(.bc-expanded) .bc-ellipsis {
	    display: inline-flex;
	  }  .bc-breadcrumb.bc-collapsible:not(.bc-expanded) .bc-mid {
	    display: none;
	  }}/* ==========================================================================   Gallery Navigation — styles (editor + export)   ========================================================================== */.gn-nav {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  padding: 2rem 0;
	  border-top: 1px solid rgba(120, 120, 140, 0.15);
	  border-bottom: 1px solid rgba(120, 120, 140, 0.15);
	  gap: 1.5rem;
	  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	  margin: 3rem 0;
}
/* Button style */.gn-btn {
	  display: flex;
	  align-items: center;
	  text-decoration: none !important;
	  color: inherit !important;
	  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	  padding: 0.75rem 1.5rem;
	  border-radius: 12px;
	  background: transparent;
	  border: 1px solid rgba(120, 120, 140, 0.15);
	  min-width: 160px;
}
/* Specific styling for Prev and Next links */.gn-btn.gn-prev {
	  justify-content: flex-start;
}
.gn-btn.gn-next {
	  justify-content: flex-end;
}
/* Hover effects */.gn-btn:hover {
	  background: rgba(120, 120, 140, 0.08);
	  border-color: rgba(120, 120, 140, 0.3);
}
.gn-btn.gn-prev:hover {
	  transform: translateX(-4px);
}
.gn-btn.gn-next:hover {
	  transform: translateX(4px);
}
.gn-btn.gn-gallery-link:hover {
	  transform: scale(1.05);
}
/* Details inside buttons */.gn-details {
	  display: flex;
	  flex-direction: column;
	  overflow: hidden;
}
.gn-prev .gn-details {
	  align-items: flex-start;
	  margin-left: 1rem;
}
.gn-next .gn-details {
	  align-items: flex-end;
	  margin-right: 1rem;
}
.gn-caption {
	  font-size: 0.7rem;
	  text-transform: uppercase;
	  letter-spacing: 0.1em;
	  opacity: 0.5;
	  margin-bottom: 0.25rem;
	  font-weight: 500;
}
.gn-title {
	  font-weight: 600;
	  font-size: 0.95rem;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  max-width: 200px;
}
.gn-arrow {
	  font-size: 1.5rem;
	  line-height: 1;
	  font-weight: 300;
	  opacity: 0.8;
	  transition: transform 0.3s ease;
}
.gn-prev:hover .gn-arrow {
	  transform: translateX(-2px);
}
.gn-next:hover .gn-arrow {
	  transform: translateX(2px);
}
/* Gallery Link */.gn-gallery-link {
	  padding: 1rem;
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 1px solid rgba(120, 120, 140, 0.15);
	  min-width: unset;
}
.gn-gallery-icon {
	  display: flex;
	  align-items: center;
	  justify-content: center;
}
.gn-gallery-icon svg {
	  display: block;
	  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gn-gallery-link:hover .gn-gallery-icon svg {
	  transform: rotate(90deg);
}
/* Responsive design */@media (max-width: 768px) {
	  .gn-title {
	    max-width: 130px;
	  }}@media (max-width: 576px) {
	  .gn-nav {
	    flex-direction: column;
	    align-items: stretch;
	    gap: 0.75rem;
	    padding: 1rem 0;
	  }    .gn-btn {
	    justify-content: space-between !important;
	    min-width: 100%;
	  }    .gn-prev .gn-details {
	    margin-left: 0;
	    order: 2;
	  }  .gn-prev .gn-arrow {
	    order: 1;
	  }  .gn-next .gn-details {
	    margin-right: 0;
	    order: 1;
	  }  .gn-next .gn-arrow {
	    order: 2;
	  }    .gn-gallery-link {
	    border-radius: 12px;
	    padding: 0.75rem 1.5rem;
	  }    .gn-gallery-link::after {
	    content: "Galerie";
	    margin-left: 0.5rem;
	    font-size: 0.95rem;
	    font-weight: 500;
	  }}/* Editor only styling */editarea .gn-nav {
	  outline: 1px dashed rgba(120, 120, 140, 0.3);
	  background: rgba(120, 120, 140, 0.02);
	  border-radius: 8px;
	  padding: 1.5rem 1rem;
}
/* Process Steps (steps-hm) — bric.css   Source de vérité des styles, inlinés dans data.bric à la génération. */.steps-hm-wrap {
	  --steps-hm-connector: #2563eb;
	  --steps-hm-number: #2563eb;
	  --steps-hm-number-text: #ffffff;
	  --steps-hm-title-color: inherit;
	  --steps-hm-desc-color: inherit;
	  display: block;
	  width: 100%;
	  padding: 2.5rem 1rem;
	  box-sizing: border-box;
}
.steps-hm-wrap * {
	  box-sizing: border-box;
}
.steps-hm {
	  display: flex;
	  flex-direction: row;
	  align-items: flex-start;
	  gap: 0;
	  max-width: 1100px;
	  margin: 0 auto;
}
.steps-hm-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  flex: 1 1 0;
	  min-width: 0;
	  text-align: center;
	  padding: 0 0.75rem;
	  opacity: 1;
	  transform: none;
}
.steps-hm-marker {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  width: 100%;
}
.steps-hm-number {
	  flex-shrink: 0;
	  width: 44px;
	  height: 44px;
	  border-radius: 50%;
	  background: var(--steps-hm-number);
	  color: var(--steps-hm-number-text);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 1.05rem;
	  font-weight: 600;
	  line-height: 1;
}
.steps-hm-connector {
	  flex: 1 1 auto;
	  height: 2px;
	  width: auto;
	  min-height: 0;
	  background: var(--steps-hm-connector);
	  margin: 0 0.5rem;
}
.steps-hm-item:last-child .steps-hm-connector {
	  display: none;
}
.steps-hm-body {
	  margin-top: 1rem;
}
.steps-hm-title {
	  margin: 0 0 0.4rem;
	  font-size: 1.75rem;
	  line-height: 1.3;
	  min-height: calc(1.75rem * 1.3 * 2);
	  font-weight: 600;
	  color: var(--steps-hm-title-color);
	  text-align: left;
}
.steps-hm-desc {
	  margin: 0;
	  font-size: 0.92rem;
	  line-height: 1.5;
	  color: var(--steps-hm-desc-color);
	  text-align: left;
}
/* Nombre d'étapes visibles (3 à 5), sans retoucher le CSS */.steps-hm-wrap[data-count="3"] .steps-hm-item:nth-child(n + 4) {
	  display: none;
}
.steps-hm-wrap[data-count="3"] .steps-hm-item:nth-child(3) .steps-hm-connector {
	  display: none;
}
.steps-hm-wrap[data-count="4"] .steps-hm-item:nth-child(n + 5) {
	  display: none;
}
.steps-hm-wrap[data-count="4"] .steps-hm-item:nth-child(4) .steps-hm-connector {
	  display: none;
}
/* Tablette (iPad et similaires) : grille 2 colonnes plutôt que de tasser   4-5 étapes sur une seule ligne ou de passer en empilement vertical.   Le connecteur horizontal n'a pas de sens une fois les étapes réparties   sur plusieurs lignes (à quoi relier la dernière étape d'une ligne ?) —   les numéros + l'ordre de lecture gauche-à-droite/haut-en-bas suffisent   à indiquer la progression. */@media (min-width: 576px) and (max-width: 991.98px) {
	  .steps-hm {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	    gap: 2.5rem 2rem;
	    max-width: 640px;
	  }  .steps-hm-connector {
	    display: none;
	  }  .steps-hm-marker {
	    justify-content: center;
	  }}/* Mobile : empilement vertical, connecteur qui pivote */@media (max-width: 575.98px) {
	  .steps-hm {
	    flex-direction: column;
	    align-items: stretch;
	    gap: 0;
	  }  .steps-hm-item {
	    flex-direction: row;
	    align-items: flex-start;
	    text-align: left;
	    padding: 0;
	  }  .steps-hm-marker {
	    flex-direction: column;
	    width: auto;
	    align-items: center;
	    align-self: stretch;
	    margin-right: 1rem;
	  }  .steps-hm-connector {
	    width: 2px;
	    height: auto;
	    min-height: 28px;
	    flex: 1 1 auto;
	    margin: 0.4rem 0;
	  }  .steps-hm-body {
	    margin-top: 0;
	    padding-bottom: 1.75rem;
	  }  .steps-hm-item:last-child .steps-hm-body {
	    padding-bottom: 0;
	  }}/* Apparition progressive au scroll — activée seulement si le JS a pu   s'exécuter (voir script inline). Sans JS (ex: canvas de construction   Blocsapp), les étapes restent visibles par défaut. */.steps-hm-wrap.steps-hm-js .steps-hm-item {
	  opacity: 0;
	  transform: translateY(18px);
	  transition: opacity 0.5s ease, transform 0.5s ease;
	  transition-delay: var(--steps-hm-delay, 0ms);
}
.steps-hm-wrap.steps-hm-js .steps-hm-item.steps-hm-in-view {
	  opacity: 1;
	  transform: none;
}
@media (prefers-reduced-motion: reduce) {
	  .steps-hm-wrap.steps-hm-js .steps-hm-item {
	    opacity: 1;
	    transform: none;
	    transition: none;
	  }}/* Form Pro (-fp) : styles runtime *//* Honeypot : hors ecran, jamais display:none (certains bots le detectent) */.form-fp .fp-hp {
	  position: absolute;
	  left: -9999px;
	  top: auto;
	  width: 1px;
	  height: 1px;
	  overflow: hidden;
}
.form-fp .fp-feedback {
	  margin-top: 1rem;
}
.form-fp .fp-submit[disabled] {
	  opacity: 0.65;
	  pointer-events: none;
}
/* ==========================================================================   Mobile Nav Override (mobile-nav) — published page styles. SOURCE OF TRUTH.   Blocs bundles this file natively to the published page AND loads it in the   editor canvas (linked from index.html). A normal global stylesheet: it still   matches the burger/overlay after the engine relocates them to <body>. Do NOT   inline these rules into a <style> in the data.bric action and do NOT inject   them from the engine — either way ships the CSS twice.   Suffix -mn everywhere (no collision with Bootstrap / Blocs classes).   The menu replaces the Bootstrap mobile nav BELOW a configurable breakpoint.   The breakpoint can't drive a CSS @media (a media query can't read a CSS var),   so the engine toggles `body.mn-mobile` at/under the breakpoint and the rules   below key off that class. Editor-only rules live in index.html, never here.   ========================================================================== *//* ---------------------------------------------------------------- variables *//* Exposed on both the burger and the overlay so a project can re-theme either   without the engine having run yet. Overridden by the settings panel. */.mn-burger,.mn-overlay {
	  --mn-bg:           #171616;
	  --mn-text:         #ffffff;
	  --mn-accent:       #C8FF00;
	  --mn-burger-size:  28px;
	          /* width of the 3 bars */  --mn-burger-color: currentColor;
	  /* bar colour (inherits page text by default) */  --mn-burger-top:   18px;
	          /* fixed offset from the top edge */  --mn-burger-edge:  20px;
	          /* fixed offset from the left/right edge */  --mn-link-size:    clamp(2rem, 6vw, 3.5rem);
	  --mn-link-font:    'Instrument Serif', serif;
	  --mn-link-weight:  400;
	  --mn-label-font:   'Geist', sans-serif;
	  --mn-transition:   0.65s cubic-bezier(0.76, 0, 0.24, 1);
	  --mn-z:            9990;
	  /* No breakpoint var: the engine reads the navbar's own navbar-expand-* class     so the menu activates exactly where the Blocs navbar collapses. */}/* --------------------------------------- show/hide vs the Bootstrap mobile nav   Base state: our burger + overlay are hidden. The engine adds `body.mn-mobile`   at/under the breakpoint to swap the native nav out and ours in. Keeping them   hidden by default avoids any flash of the overlay before the engine boots. */.mn-burger,.mn-overlay {
	  display: none;
}
body.mn-mobile .navbar-toggler {
	 display: none !important;
	 }  /* native burger */body.mn-mobile .navbar-collapse {
	 display: none !important;
	 }  /* native menu   */body.mn-mobile .mn-burger {
	 display: inline-flex;
	 }body.mn-mobile .mn-overlay {
	 display: block;
	 }/* Lock background scroll while the overlay is open. */body.mn-open {
	 overflow: hidden;
	 }/* ------------------------------------------------------------------- burger */.mn-burger {
	  position: fixed;
	  top: var(--mn-burger-top);
	  right: var(--mn-burger-edge);
	  left: auto;
	  z-index: calc(var(--mn-z) + 1);
	   /* above the overlay so the cross is clickable */  box-sizing: content-box;
	  width: var(--mn-burger-size);
	  height: 22px;
	  padding: 8px;
	  margin: 0;
	  border: 0;
	  background: none;
	  cursor: pointer;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: stretch;
	  /* The burger sits on the PAGE (not the overlay). `color: inherit` makes it     follow the page's text colour — dark on a light header, light on a dark     header (a <button> would otherwise reset to the UA's black). --mn-burger-color     defaults to currentColor, so the bars follow. When open, the body.mn-open     rule below switches it to white for the cross on the dark overlay. */  color: inherit;
}
/* On the left-anchored variant. */.mn-burger[data-mn-side="left"] {
	  right: auto;
	  left: var(--mn-burger-edge);
}
.mn-burger:focus-visible {
	  outline: 2px solid var(--mn-accent);
	  outline-offset: 4px;
}
.mn-burger .mn-bar {
	  display: block;
	  width: 100%;
	  height: 2px;
	  border-radius: 2px;
	  background: var(--mn-burger-color);
	  transition: transform 0.3s ease, opacity 0.3s ease;
	  transform-origin: center;
}
/* Burger → cross when the menu is open. The bars sit 10px apart (top/bottom),   so each end bar travels 10px to meet at the centre then rotates. */body.mn-open .mn-burger {
	 color: var(--mn-text);
	 }body.mn-open .mn-burger .mn-bar-1 {
	 transform: translateY(10px) rotate(45deg);
	 }body.mn-open .mn-burger .mn-bar-2 {
	 opacity: 0;
	 transform: scaleX(0);
	 }body.mn-open .mn-burger .mn-bar-3 {
	 transform: translateY(-10px) rotate(-45deg);
	 }/* ------------------------------------------------------------------ overlay */.mn-overlay {
	  position: fixed;
	  inset: 0;
	  z-index: var(--mn-z);
	  background: var(--mn-bg);
	  color: var(--mn-text);
	  overflow-y: auto;
	  /* Hidden until open. visibility (not just opacity) so it can't be tabbed to. */  visibility: hidden;
}
body.mn-open .mn-overlay {
	  visibility: visible;
}
.mn-nav {
	  box-sizing: border-box;
	  min-height: 100%;
	  display: flex;
	  flex-direction: column;
	  padding: clamp(4.5rem, 12vh, 7rem) clamp(1.5rem, 8vw, 5rem) clamp(2rem, 6vh, 3.5rem);
}
.mn-links {
	  list-style: none;
	  margin: 0;
	  padding: 0;
}
.mn-item {
	  margin: 0;
	  padding: 0;
	  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* ----------------------------------------------------------- animation modes   Driven by [data-mn-anim] on .mn-overlay. The "rest" (closed) transform and the   open transform are paired so the same transition runs both ways.   Default is "slide". *//* slide — panel comes in from the side (right by default;
	 left if data-mn-side) */.mn-overlay[data-mn-anim="slide"] {
	  transform: translateX(100%);
	  transition: transform var(--mn-transition), visibility 0s linear var(--mn-tdur, 0.65s);
}
.mn-overlay[data-mn-anim="slide"][data-mn-side="left"] {
	  transform: translateX(-100%);
}
body.mn-open .mn-overlay[data-mn-anim="slide"] {
	  transform: translateX(0);
	  transition: transform var(--mn-transition), visibility 0s;
}
/* fade — simple opacity */.mn-overlay[data-mn-anim="fade"] {
	  opacity: 0;
	  transition: opacity var(--mn-transition), visibility 0s linear var(--mn-tdur, 0.65s);
}
body.mn-open .mn-overlay[data-mn-anim="fade"] {
	  opacity: 1;
	  transition: opacity var(--mn-transition), visibility 0s;
}
/* clip — circular reveal expanding from the burger corner (top-right default) */.mn-overlay[data-mn-anim="clip"] {
	  clip-path: circle(0% at calc(100% - 36px) 30px);
	  transition: clip-path var(--mn-transition), visibility 0s linear var(--mn-tdur, 0.65s);
}
.mn-overlay[data-mn-anim="clip"][data-mn-side="left"] {
	  clip-path: circle(0% at 36px 30px);
}
body.mn-open .mn-overlay[data-mn-anim="clip"] {
	  clip-path: circle(150% at calc(100% - 36px) 30px);
	  transition: clip-path var(--mn-transition), visibility 0s;
}
body.mn-open .mn-overlay[data-mn-anim="clip"][data-mn-side="left"] {
	  clip-path: circle(150% at 36px 30px);
}
/* curtain — two panels (::before top half, ::after bottom half) open apart.   The panels sit ABOVE the menu content and retract to reveal it. */.mn-overlay[data-mn-anim="curtain"] {
	  visibility: hidden;
	  background: transparent;
	          /* the panels provide the backdrop here */}.mn-overlay[data-mn-anim="curtain"]::before,.mn-overlay[data-mn-anim="curtain"]::after {
	  content: "";
	  position: fixed;
	  left: 0;
	  right: 0;
	  height: 50%;
	  background: var(--mn-bg);
	  z-index: -1;
	                      /* behind .mn-nav content, above the page */  transition: transform var(--mn-transition);
}
.mn-overlay[data-mn-anim="curtain"]::before {
	 top: 0;
	    transform: translateY(-100%);
	 }.mn-overlay[data-mn-anim="curtain"]::after  {
	 bottom: 0;
	 transform: translateY(100%);
	 }.mn-overlay[data-mn-anim="curtain"] .mn-nav {
	  opacity: 0;
	  transition: opacity 0.3s ease var(--mn-tdur, 0.4s);
}
body.mn-open .mn-overlay[data-mn-anim="curtain"] {
	 visibility: visible;
	 }body.mn-open .mn-overlay[data-mn-anim="curtain"]::before,body.mn-open .mn-overlay[data-mn-anim="curtain"]::after {
	 transform: translateY(0);
	 }body.mn-open .mn-overlay[data-mn-anim="curtain"] .mn-nav {
	 opacity: 1;
	 }/* ------------------------------------------------ bound Blocs menu source ---   .mn-source is the real Blocs list (class `site-navigation`) the user binds to   a Menu Manager menu via the native Data > source dropdown. It carries   `display-in-blocs-edit-mode-only`, so on the published page Blocs has already   rewritten it to `d-none` (the engine still reads it from the DOM and builds   .mn-links). These styles therefore only ever show in the Blocs canvas, where   the list must be visible + selectable: present it as a clearly-labelled   "menu source" card so it's obvious what to bind. */.mn-source {
	  list-style: none;
	  margin: 1rem 0;
	  padding: 0.75rem 1rem;
	  max-width: 360px;
	  border: 1px dashed rgba(0, 0, 0, 0.25);
	  border-radius: 8px;
	  background: rgba(0, 0, 0, 0.03);
	  font-family: var(--mn-label-font);
	  font-size: 0.95rem;
	  line-height: 1.5;
	  color: inherit;
}
.mn-source li {
	 list-style: none;
	 }.mn-source a {
	 color: inherit;
	 text-decoration: none;
	 }.mn-source ul {
	 list-style: none;
	 padding-left: 1rem;
	 margin: 0;
	 }/* --------------------------------------------------------------------- links   Staggered entrance: each item carries --i (its index) so the delay cascades.   Items start shifted down + transparent and settle once the menu is open. */.mn-link {
	  display: block;
	  width: 100%;
	  text-align: left;
	  box-sizing: border-box;
	  margin: 0;
	  padding: 0.5rem 0;
	  border: 0;
	  background: none;
	  cursor: pointer;
	  font-family: var(--mn-link-font);
	  font-weight: var(--mn-link-weight);
	  font-size: var(--mn-link-size);
	  line-height: 1.05;
	  color: var(--mn-text);
	  text-decoration: none;
	  transition: color 0.2s ease;
}
.mn-link:hover,.mn-link:focus-visible {
	 color: var(--mn-accent);
	 }.mn-link:focus-visible {
	 outline: none;
	 }/* stagger animation (only meaningful while open) */.mn-overlay .mn-item {
	  opacity: 0;
	  transform: translateY(20px);
}
body.mn-open .mn-overlay .mn-item {
	  opacity: 1;
	  transform: translateY(0);
	  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	  transition-delay: calc(0.2s + var(--i, 0) * 0.08s);
}
/* sub-menu toggle: arrow chevron + flip when open */.mn-sub-toggle {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 0.75rem;
}
.mn-sub-arrow {
	  display: inline-flex;
	  flex: 0 0 auto;
	  transition: transform 0.3s ease;
}
.mn-sub-arrow svg {
	 width: 0.5em;
	 height: 0.5em;
	 }.mn-has-sub.mn-sub-open .mn-sub-arrow {
	 transform: rotate(180deg);
	 }/* ----------------------------------------------------------------- submenus */.mn-submenu {
	  list-style: none;
	  margin: 0;
	  padding: 0 0 0.5rem 1.5rem;
	  display: none;
}
.mn-has-sub.mn-sub-open .mn-submenu {
	 display: block;
	 }.mn-submenu li {
	 margin: 0;
	 padding: 0;
	 }.mn-sublink {
	  display: block;
	  padding: 0.35rem 0;
	  font-family: var(--mn-label-font);
	  font-size: 1.1rem;
	  color: rgba(255, 255, 255, 0.6);
	  text-decoration: none;
	  transition: color 0.2s ease;
}
.mn-sublink:hover,.mn-sublink:focus-visible {
	 color: var(--mn-accent);
	 }/* ------------------------------------------------------------------- footer */.mn-footer {
	  margin-top: auto;
	  padding-top: 2rem;
	  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mn-cta {
	  display: inline-flex;
	  align-items: center;
	  gap: 0.5rem;
	  background: var(--mn-accent);
	  color: #000;
	  padding: 0.75rem 1.5rem;
	  font-family: var(--mn-label-font);
	  font-weight: 600;
	  font-size: 1rem;
	  line-height: 1;
	  border-radius: 2px;
	  text-decoration: none;
	  transition: filter 0.2s ease;
}
.mn-cta:hover,.mn-cta:focus-visible {
	 filter: brightness(0.92);
	 }.mn-cta svg {
	 width: 1em;
	 height: 1em;
	 }.mn-tagline {
	  font-family: var(--mn-label-font);
	  font-size: 0.85rem;
	  line-height: 1.5;
	  color: rgba(255, 255, 255, 0.4);
	  margin: 1.5rem 0 0;
}
.mn-socials {
	  display: flex;
	  gap: 1rem;
	  margin-top: 1rem;
}
.mn-social-link {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  min-width: 1.5rem;
	  height: 1.5rem;
	  font-family: var(--mn-label-font);
	  font-size: 1rem;
	  color: rgba(255, 255, 255, 0.5);
	  text-decoration: none;
	  transition: color 0.2s ease;
}
.mn-social-link:hover,.mn-social-link:focus-visible {
	 color: var(--mn-accent);
	 }.mn-social-link svg {
	 width: 18px;
	 height: 18px;
	 }.mn-social-link[hidden] {
	 display: none;
	 }/* --------------------------------------------------- reduced-motion fallback   Drop transform/clip animations (can trigger vestibular discomfort);
	 keep   opacity so open/close is still perceivable. */@media (prefers-reduced-motion: reduce) {
	  .mn-burger .mn-bar,  .mn-overlay,  .mn-overlay[data-mn-anim] {
	    transition: opacity 0.2s ease, visibility 0s !important;
	  }  .mn-overlay[data-mn-anim="slide"],  .mn-overlay[data-mn-anim="clip"] {
	    transform: none;
	    clip-path: none;
	    opacity: 0;
	  }  body.mn-open .mn-overlay[data-mn-anim="slide"],  body.mn-open .mn-overlay[data-mn-anim="clip"] {
	    transform: none;
	    clip-path: none;
	    opacity: 1;
	  }  .mn-overlay[data-mn-anim="curtain"]::before,  .mn-overlay[data-mn-anim="curtain"]::after {
	 transition: none;
	 }  .mn-overlay .mn-item,  body.mn-open .mn-overlay .mn-item {
	    transform: none;
	    transition: opacity 0.2s ease;
	  }}
/* = Additional CSS
-------------------------------------------------------------- */
/* === DROPDOWN MENU — cohérent avec navbar frosted glass === */

#navbar .dropdown {
  position: relative;
}

#navbar .dropdown-menu {
  background: #000000 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 0px !important;
  padding: 6px !important;
  min-width: 210px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

#navbar .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#navbar .dropdown-menu .nav-item::before {
  display: none;
}

#navbar .dropdown-menu .nav-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 12px !important;
  border-radius: 0px !important;
  font-size: 18px;
  color: #ffffff !important;
  transition: background 0.15s;
  white-space: nowrap;
}

#navbar .dropdown-menu .nav-link::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

#navbar .dropdown-menu .nav-link:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #B8FF56 !important;
}

#navbar .dropdown-menu .nav-item {
  padding: 0 !important;
  margin: 0 !important;
}

.navbar-container {
  z-index: 1000;
}

@media (min-width: 992px) {
  #navbar .dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Couleur des barres du burger */
.mn-burger .mn-bar {
  background-color: #31FD94 !important; 
}

.mn-burger[aria-expanded="true"] .mn-bar {
  background-color: #31FD94 !important;
}

body:has(.transp-nav) .navbar-container {
  background-color: transparent !important;
}

body:has(#hero.no-breadcrumb) .breadcrumb {
  display: none;
}

.bg_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.video-bg-container {
  position: absolute !important;
  top: -15% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 130% !important;
  transform: none !important;
}

.video-bg-container video,
.bloc-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  transform: none !important;
  -webkit-transform: none !important;
  left: 0 !important;
}

.video-bg-container video {
  opacity: 0;
  transition: opacity 2s ease;
  filter: brightness(0.85);
}

.video-bg-container video.is-playing {
  opacity: 1;
}

.video-poster {
  position: absolute;
  inset: 0;
  background: url('img/nocenti_hero_desktop.webp') center / cover no-repeat;
  filter: brightness(0.85);
}

.bg-hero-poster {
  background-size: cover !important;
  background-position: center center !important;
}


/* Toutes les cards ont position relative pour l'overlay */
.card-left,
.card-right {
  position: relative;
  overflow: hidden;
}

/* Overlay via pseudo-element sur les 3 cards de droite */
.card-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
}

/* Hover sur une card droite → son overlay disparaît */
.card-right:hover::after {
  opacity: 0;
}

/* Overlay sur la gauche UNIQUEMENT quand on hover une card droite */
.portfolio-container:has(.card-right:hover) .card-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
}

/* ── Carte faq ── */
.faq-nc .card {
  border: none;
  background: transparent;
  margin-bottom: 10px;
  border-radius: 8px;
}

.faq-nc .card-body p {
  font-size: 16px !important;
}

/* ── Header fermé (dark) ── */
.faq-nc .card-header {
  background-color: #1c1c1c;
  border: 2px solid #2e2e2e;
  border-radius: 0px !important;
  padding: 0;
}

/* ── Header ouvert (vert) ── */
.faq-nc .card-header:has([aria-expanded="true"]) {
  background-color: var(--swatch-var-6003);
  border-color: var(--swatch-var-6003);
}

/* ── Lien / titre ── */
.faq-nc .a-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 24px !important;
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

/* ── Texte noir quand ouvert ── */
.faq-nc .card-header:has([aria-expanded="true"]) .a-btn {
  color: #000000;
}

/* ── Chevron via ::after ── */
.faq-nc .a-btn::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg); /* pointe vers le bas */
  transition: transform 0.3s ease;
  margin-left: 16px;
  position: relative;
  top: -3px;
}

/* ── Chevron pivoté quand ouvert ── */
.faq-nc .a-btn[aria-expanded="true"]::after {
  transform: rotate(-135deg); /* pointe vers le haut */
  top: 3px;
}

/* ── Corps du contenu ── */
.faq-nc .card-body {
  padding: 16px 24px !important;
  color: #333;
  background: transparent;
}

/* ── Titre en vert au survol ── */
.faq-nc .a-btn:hover {
  color: var(--swatch-var-6003);
}

#carousel-1 {
  overflow: hidden;
}

#carousel-1 .carousel-inner {
  display: flex !important;
  transition: transform 0.5s ease;
  overflow: visible;
}

#carousel-1 .carousel-item {
  display: block !important;
  flex: 0 0 33.333%;
  min-width: 33.333%;
  float: none;
}

#carousel-1 .carousel-caption {
  position: relative !important;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 24px;
  text-align: center;
}

.dark-overlay-top {
  position: relative;
}

.dark-overlay-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%);
  pointer-events: none;
}

/* on garde le contenu au-dessus de l'overlay */
.dark-overlay-top > * {
  position: relative;
  z-index: 1;
}
.dark-overlay-right {
  position: relative;
}

.dark-overlay-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent 60%);
  pointer-events: none;
}

/* on garde le contenu au-dessus de l'overlay */
.dark-overlay-right > * {
  position: relative;
  z-index: 1;
}

.list-dash-gn,
.list-check-gn,
.list-checkfill-gn {
  list-style: none;
  padding-left: 0;
}
.list-dash-gn li,
.list-check-gn li,
.list-checkfill-gn li {
  position: relative;
  padding-left: 1.8em;
}
.list-dash-gn li::before,
.list-check-gn li::before {
  position: absolute;
  left: 0;
  color: #B8FF56;
  font-weight: 600;
}
.list-dash-gn li::before  { content: "—"; }
.list-check-gn li::before { content: "✓"; }

/* check dans rond rempli */
.list-checkfill-gn li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
  background: #B8FF56;
  color: #000;            /* coche foncée sur fond vert */
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.video-item-container {
  position: relative;
  cursor: pointer;
}

/* Dark overlay sur les 280px de l'image */
.video-item-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* Cercle play centré sur l'image (140px = moitié de 280px) */
.video-item-container::after {
  content: "";
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #B8FF56;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 54% center;
  background-size: 42%;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.video-item-container:hover::before { opacity: 1; }

.video-item-container:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gs-pill {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 0px;
  text-transform: uppercase;
}

.gs-pill[aria-pressed="true"] {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.alt-font-out {
  color: transparent;
  -webkit-text-stroke: 1px #14160F;  
  text-stroke: 1px #14160F; 
  paint-order: stroke fill;
}

blocsicon {
  flex-shrink: 0;
}

/* Conteneur : prev à gauche, galerie au centre, next à droite */
.gn-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

/* Base commune aux 3 boutons */
.gn-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 16px;
  transition: opacity 0.25s ease;
}

.gn-btn:hover {
  opacity: 0.7;
}

/* Bloc texte empilé (label + titre) */
.gn-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Le petit label en capitales */
.gn-caption {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Le titre */
.gn-title {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

/* Les flèches */
.gn-arrow {
  font-size: 1rem;
  color: #ffffff;
}

/* Bouton NEXT : tout aligné à droite */
.gn-next {
  text-align: right;
}
.gn-next .gn-details {
  align-items: flex-end;
}

/* Bouton central galerie : icône blanche */
.gn-gallery-link,
.gn-gallery-icon svg {
  color: #ffffff;
}

.fp-submit.btn-devis-hm {
  background-color: #0F0F0F;
  color: #fff;
  font-size: 22px;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 0px;
}
.fp-submit.btn-devis-hm:hover,
.fp-submit.btn-devis-hm:focus-visible {
  background-color: #31FD94;
  border-color: #0F0F0F;
}

/* iOS : le scroll fluide gêne le retour exact en haut de page */
@media (hover: none) {
  html { scroll-behavior: auto; }
}


/* = Toggle Visibility
-------------------------------------------------------------- */

.toggled-item{transition: height 350ms ease-in-out, padding 350ms ease-in-out, opacity 350ms ease-in-out;overflow: hidden;}
.toggled-item-hidden{padding-top:0!important;padding-bottom:0!important;border-top:0!important;border-bottom:0!important;outline:0!important;opacity: 0;}
.object-hidden{display:none;}


/* = Bloc Padding Multi Breakpoint
-------------------------------------------------------------- */

@media (min-width: 576px) {
    .bloc-xxl-sm{padding:200px 20px;}
    .bloc-xl-sm{padding:150px 20px;}
    .bloc-lg-sm{padding:100px 20px;}
    .bloc-md-sm{padding:50px 20px;}
    .bloc-sm-sm{padding:20px;}
    .bloc-no-padding-sm{padding:0 20px;}
    .link-with-icon.text-sm-start,.link-with-icon.text-sm-left{justify-content: flex-start;}
    .link-with-icon.text-sm-center{justify-content: center;}
    .link-with-icon.text-sm-end,.link-with-icon.text-sm-right{justify-content: flex-end;}
}
@media (min-width: 768px) {
    .bloc-xxl-md{padding:200px 20px;}
    .bloc-xl-md{padding:150px 20px;}
    .bloc-lg-md{padding:100px 20px;}
    .bloc-md-md{padding:50px 20px;}
    .bloc-sm-md{padding:20px 20px;}
    .bloc-no-padding-md{padding:0 20px;}
    .link-with-icon.text-md-start,.link-with-icon.text-md-left{justify-content: flex-start;}
    .link-with-icon.text-md-center{justify-content: center;}
    .link-with-icon.text-md-end,.link-with-icon.text-md-right{justify-content: flex-end;}
}
@media (min-width: 992px) {
    .bloc-xxl-lg{padding:200px 20px;}
    .bloc-xl-lg{padding:150px 20px;}
    .bloc-lg-lg{padding:100px 20px;}
    .bloc-md-lg{padding:50px 20px;}
    .bloc-sm-lg{padding:20px;}
    .bloc-no-padding-lg{padding:0 20px;}
    .link-with-icon.text-lg-start,.link-with-icon.text-lg-left{justify-content: flex-start;}
    .link-with-icon.text-lg-center{justify-content: center;}
    .link-with-icon.text-lg-end,.link-with-icon.text-lg-right{justify-content: flex-end;}
}


/* = Mobile adjustments 
-------------------------------------------------------------- */
@media (max-width: 1024px)
{
    .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{
        padding-left: 0; 
        padding-right: 0;  
    }
}
@media (max-width: 991px)
{
    .container{width:100%;}
    .bloc{padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);} /* iPhone X Notch Support*/
    .bloc-group, .bloc-group .bloc{display:block;width:100%;}
}
@media (max-width: 767px)
{
    .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{
        padding-left:0;padding-right:0;
    }
    .btn-dwn{
       display:none; 
    }
    .voffset{
        margin-top:5px;
    }
    .voffset-md{
        margin-top:20px;
    }
    .voffset-lg{
        margin-top:30px;
    }
    form{
        padding:5px;
    }
    .close-lightbox{
        display:inline-block;
    }
    .blocsapp-device-iphone5{
	   background-size: 216px 425px;
	   padding-top:60px;
	   width:216px;
	   height:425px;
    }
    .blocsapp-device-iphone5 img{
	   width: 180px;
	   height: 320px;
    }
}


@media (max-width: 991px){
	.hero-container{
		margin-top:-120px;
	}
	.port-alt-row{
		height:600px;
	}
	.port-card-container{
	}
	.port-card-2{
	}
	.google-rating{
		align-items:flex-start;
	}
	.project-goal-item-number{
		text-align:left;
	}
	.price-range{
		font-size:3em;
	}
	.card-data-l{
	}
	.data-l{
		text-align:center;
	}
	
}

@media (max-width: 767px){
	.port-alt-row{
		height:100%;
	}
	.project-goal-item-number{
		text-align:left;
	}
	.studio-data-card-title{
		font-size:45px;
	}
	
}

@media (max-width: 575px){
	h1{
		font-size:3rem;
		line-height:50px;
	}
	.hero-container{
		max-height:85vh!important;
		margin-top:-105px;
	}
	h2{
		line-height:42px!important;
		font-size:38px!important;
	}
	.overflow-hidden{
	}
	.port-alt-row{
		height:600px;
	}
	.google-rating{
		align-items:flex-start;
	}
	.temoignage-header{
		flex-direction:column;
		align-items:flex-start;
	}
	.video-item-image{
		height:280px;
	}
	.hero-display{
		line-height:45px!important;
		font-size:3rem!important;
	}
	.background-camera-image{
		background-image:url("img/image_20261104_115643-640.webp");
	}
	.project-detail-item{
	}
	.headline-tag-dark{
		color:var(--swatch-var-280)!important;
	}
	.border-top{
	}
	.breadcrumb{
		position:absolute;
		bottom:-15px;
		mix-blend-mode:difference!important;
		color:#932092!important;
	}
	.project-title{
		line-height:68px;
		font-size:4.5em!important;
		letter-spacing:-1px;
	}
	.project-goal-item-number{
		font-size:16px;
		text-align:left;
		min-width:30px;
	}
	.project-goal-item-title{
		min-width:250px;
	}
	.studio-data-card-title{
		line-height:45px;
	}
	.project-goal-item{
		flex-direction:column;
		align-items:flex-start;
	}
	.price-range{
		font-size:2.6em;
	}
	.data-l{
		font-size:50px;
		line-height:45px;
		margin-bottom:8px!important;
	}
	.flex-div-stretch{
		column-gap:8px;
	}
	.over-heading{
		font-size:22px;
		line-height:28px;
		margin-top:8px;
	}
	.contact-item{
	}
	
}