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

html {scroll-behavior:smooth;}

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

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

body {height:100%; width:100%; margin:0; padding:0; font-size:14px; font-family: 'Lato', sans-serif; color:#384c64;}
.tab, .mob  {display:none;} .desk {display:block;}

.bg {background-color:#f5f5f5;}
.bgwhite {background-color:#fff;}
.bglight {background-color:#c3d0d8;}
.bgblue {background-color:#464866;}
.bgnight {background-color:#1b2531;}

.colorwhite {color:white;}
.colorlight {color:#696c91;}
.colorblue {color:#464866;}
.colornight {color:#1b2531;}

.borderwhite {border-color:#fff;}
.borderblue {border-color:#464866;}
.bordernight {border-color:#1b2531;}
.borderwhite, .borderblue,.bordernight {border-width:2px; border-style:solid;}
.border-angle {--s: 20px; padding: 6% 6% 8% 6%; mask: conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)), conic-gradient(#000 0 0) content-box;}

.center {text-align:center;}
.flex {display:flex;}
.floatright {float:right;}
.floatleft {float:left;}
.gap20 {gap:20px;}
.gap40 {gap:40px;}
.inlineblock {display:inline-block;}
.img {width:100%; height:auto; display:block;}
.justify {text-align:justify;}
.lineheight {line-height:160%;}
.martom {margin-bottom: clamp(40px, 4vw, 60px);}
.martom20 {margin-bottom:20px;}
.martom40 {margin-bottom:40px;}
.marginauto {margin:auto;}
.margin0 {margin:0;}
.nospace {white-space:nowrap;}
.overden {overflow:hidden;}
.padding10 {padding:10px;}
.radius {border-radius:6px;}
.relative {position:relative;}
.text {font-size:clamp(1.1em, 4vw, 1.4em);}
.textright {text-align:right;}
.uppercase {text-transform:uppercase;}
.width100 {width:100%;}
.width75 {width:75%;}
.width50 {width:50%;}
.width30 {width:33%;}
.width25 {width:25%;}
.wrap {flex-wrap:wrap;}
strong, .strong {font-weight:600;}

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

.container {/*transition:all 0.6s ease;*/}

.toggle-checkbox {display:none;}

.menu-button {position:absolute; top:12px; left:102px; transform:translateX(10px); z-index:10; width:30px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.6s ease;}

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

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

/* Animation du burger pour l'état ouvert */
.toggle-checkbox:checked ~ .menu-button .menu-icon::before {transform:rotate(45deg); top:0; background:#fff;}
.toggle-checkbox:checked ~ .menu-button .menu-icon::after {transform:rotate(-45deg); bottom:0; background:#fff;}
.toggle-checkbox:checked ~ .menu-button .menu-icon {background:transparent;}

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

/* État :menu fermé */
.toggle-checkbox:not(:checked) ~ .menu {width:0; min-width:0; box-shadow:none;}
.toggle-checkbox:not(:checked) ~ .menu .menu-content {transform:translateX(-500px);}
.toggle-checkbox:not(:checked) ~ .content {margin-left:0;}
.toggle-checkbox:not(:checked) ~ .menu-button {left:-70px; transform:translateX(10px);}

/* Colonne menu */
.menu {height:100vh; overflow:hidden; box-shadow:2px 0 5px rgba(0, 0, 0, 0.5); position:relative; overflow-y:auto; scrollbar-width:none; transition:all 0.6s ease;}
.menu-content {position:relative; transform:translateX(-250px); transition:transform 0.6s ease; padding:50px 40px; margin:auto;}

nav {list-style:none; flex-direction:column; justify-content:space-around; font-size:16px; margin:20px 0;}
nav a {text-decoration:none; transform:translatex(0); transition:transform 0.4s ease-in-out; font-size:1.2em; color:#c3d0d8;}
nav a::before {content:""; height:2px; background:#f5f5f5; width:100%; position:absolute; bottom:-2px; left:0; transform:translatex(-50%); opacity:0; transition:transform 0.4s ease-in-out, opacity 0.4s linear;}
nav a:hover::before {transform:translatex(0);  opacity:1;}

/* Contenu principal */
.content {flex:1; transition:margin-left 0.6s ease; width:100%; min-width:320px; height:100vh; overflow-y:auto; scrollbar-width:none;}
header {background: url(img/back-500.png) no-repeat center / 950px #1b2531; padding:0 0 20px;}
.logo {width:100%; max-width:400px; min-width:200px; margin:auto; padding:3% 10px 2%; transition:all 0.6s ease;}

.header-bloc-menu {cursor:pointer; margin:auto; display:table;}
.burger-button {width: 30px; height: 23px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease;}
.burger-button div {width: 100%; height: 3px; background-color: #fff; transition: all 0.3s ease;}
.burger-button:hover div:nth-child(1) {transform: rotate(45deg) translate(9px, 5px);}
.burger-button:hover div:nth-child(2) {opacity: 0;}
.burger-button:hover div:nth-child(3) {transform: rotate(-45deg) translate(9px, -5px);}

.h1 {padding:15px 10px; background:linear-gradient(to right, #1b2531, #1b2531, #464866, #1b2531, #1b2531);}
h1 {margin:0; font-size:clamp(16px, 2vw, 20px); font-weight:700; text-transform:uppercase;}
h2 {padding: 10px 20px 12px; margin: 0 0 2%;}
h2.bangle {display:table; margin: 0px auto clamp(40px, 4vw, 60px); padding:3%; position:relative; text-transform:uppercase; letter-spacing:1px; font-size:clamp(20px, 3vw, 30px); text-align:center;}

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

/* #### TOGGLE CSS ### */
.toggle {}
.toggle input[type="checkbox"] {display:none;}
.toggleable_content {max-height:3000px; overflow:hidden; transition:max-height .6s cubic-bezier(1,0,1,0);}
.toggleable_content .block {padding:20px;  margin:auto; background:#fff;}
.toggleable_control:checked ~ .toggleable_content {transition-timing-function:ease-in-out; max-height:0px;}
.toggleable_label {width:100%; transition:width .6s; display:block; display:flex; justify-content:space-between; align-items:center; cursor:pointer; position:relative; z-index:1; margin:0 auto; padding:10px 20px 12px; background:#ffffff;}
/*.toggleable_control:checked ~ .toggleable_label {transition-timing-function:ease-in-out; width:90%;}*/
.toggleable_label h2 {margin:0; padding:0; font-weight:600; font-size:clamp(16px, 2vw, 20px);}
.toggleable_label::after {content:"▲"; font-size:0.8rem;}
.toggleable_control:checked ~ .toggleable_label::after {content:"▼";}

main {padding:20px 5%;}
section {max-width:2200px; margin: 0 auto 2%;}
.flexbox {display:flex; flex-wrap:wrap; gap:clamp(13px, 4vw, 40px);}
.flexbox article {flex-grow:1; flex-basis:300px;}
article {}

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

.bloc-content {}
.bloc-top {}
.bloc-illu {}
.bloc-title {position:absolute; top:10px; left:0; background-color:#1b2531; color:#fff; padding:3px 10px 5px; border-radius:0 6px 6px 0; text-transform:uppercase; font-weight:700;}
.bloc-bottom {padding:4%;}
.bloc-text {margin:20px 10px; min-height:127px;}
.bloc-text-alaune {font-size:clamp(1em, 2vw, 1.2em); line-height:160%;}
.bloc-text-alaune h3 {margin:0 0 20px; font-size:1.2em;}
.bloc-text h3 {margin:0 0 20px; font-size:18px; text-align:center;}
.bloc-tag {display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; min-height: 60px;}
.bloc-tag span {white-space:nowrap; background-color:#384c64; padding:3px 10px 5px; border-radius:6px; color:#fff;}
.bloc-plus {padding:1px 0 0 1px; display:flex; border-radius:50%; position:absolute; right:46%; top:-32px; width:60px; height:60px; font-size:2.6em; justify-content: center; align-items: center; background:rgb(195, 208, 216, .7);}
.bloc-plus1 {right:44%;}

.image-container {position: relative; display: inline-block; cursor: pointer;overflow: hidden;}
.image-container img {display: block; transition: filter 0.5s ease;}
.image-container .overlay {position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0); transition: background-color 0.5s ease;}
.image-container .plus-icon, .image-container .plus-text {position:absolute; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.5s ease; pointer-events:none;}
.image-container .plus-icon {top:50%; left:50%; transform:translate(-50%, -50%); font-size:clamp(2.5em, 4vw, 3.5em); width:20%; height:20%; border-radius:50%; padding:0 0 3px 0;}
.image-container .plus-text {bottom:12%; left:0; transform:translate(0); font-size:1.2em; padding:10px;}
.image-container:hover img { filter: brightness(75%);}
.image-container:hover .overlay {background-color: rgba(0, 0, 0, 0.3);}
.image-container:hover .plus-icon, .image-container:hover .plus-text {opacity: 1;}

.fiche-contact {padding:40px; border-radius:40px; width:100%; max-width:850px; margin:10px auto 40px; gap:30px;}
.fiche-contact-img {min-width:45%; border-radius:20px 0 0 20px;}
.fiche-contact ul {margin:0; padding:0; list-style:none; flex-direction: column; justify-content:space-around; gap:30px;}
.fiche-contact li {display:flex; align-items:center; font-weight:600; color:#32373f;}
.fiche-contact li img {float:left; max-width:50px; margin:0 20px 0 0;}

.p404 {font-size:clamp(1em, 3vw, 1.6em); padding:0 20px 20px; width:100%;  max-width:900px; margin:auto;}
.p404 img {margin:40px auto;}

/* #### BLOC FOOTER ### */
footer {padding:32px 20px;}
.scroll-to-top {z-index:100; position:fixed; bottom:15px; right:15px; width:50px; height:50px; font-size:2em; background:rgba(255, 255, 255, 0.7); padding:5px; text-align:center; transition:background 0.3s, opacity 0.3s; opacity: 0; visibility: hidden;}
.scroll-to-top:hover {background: rgba(255, 255, 255, 1);}
.scroll-to-top.show {opacity:1; visibility:visible;}

#cookieConsent {display:none; position:fixed; bottom:20px; left:20px; background-color:#1b2531; color:#fff; font-size:0.8em; padding:20px; max-width:210px; border-radius:12px; z-index:9999;}
#cookieConsent span {font-weight:600; text-transform:uppercase; font-size:1.2em; display:block; margin-bottom:10px; color:#c3d0d8;}
#acceptCookie, #declineCookie {display:block; width:100%; margin-top:20px; padding:10px 10px 12px; border-radius:6px; font-weight:600; border:none; cursor:pointer;}
#acceptCookie {background-color:#c3d0d8; color:#1b2531;}
#declineCookie {background-color:#464866; color:#f5f5f5;}

@media screen and (max-width:1080px) {
	.desk {display:none;}
	.tab {display:block;}
	.fiche-contact {flex-direction: column; padding:20px;}
	.fiche-contact-img {min-width:100%; border-radius:20px 20px 0 0;}
	main p.center {text-align:left;}
}

@media screen and (max-width:640px) {
	.tab {display:none;}
	.mob {display:block;}
	/*.menu-content {padding:30px;}
	.toggle-checkbox:not(:checked) ~ .menu-button {left:-40px;}
	.toggle-checkbox:checked ~ .menu-button {left:250px; top:20px;}
	.toggle-checkbox:checked ~ .content {}*/
	.logo {padding:30px;}
	main {padding: 20px 10px;}
	.toggleable_content {max-height:0; overflow:hidden; transition:max-height .8s cubic-bezier(0,1,0,1)}
	.toggleable_content .block {margin-top:0; padding:20px 10px 20px;}
	.toggleable_control:checked ~ .toggleable_content {transition-timing-function:ease-in-out; max-height:3000px;}
	.toggleable_content {margin:0; /*padding-top:20px;*/}
	.toggleable_label::after {content:"▼"; font-size:0.8rem;}
	.toggleable_control:checked ~ .toggleable_label::after {content:"▲";}
	h2.bangle {padding:5%;}
	.fiche-contact li img {max-width:30px;}
	.footer-copy {width:80%; text-align:left;}

}