@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; color:#fb2e59;  font-family:"Josefin Sans", sans-serif; font-optical-sizing:auto; font-weight:300; font-style:normal; font-size:20px;}
.mob  {display:none;}

.bg {background-color:#222;}
.bgwhite {background-color:#fff;}
.bg1 {background-color:#fb2e59;}
.bg2 {background-color:#111;}
.bg3 {background-color:#333;}

.colorwhite {color:white;}
.color1 {color:#fb2e59;}
.color2 {color:#111;}
.color3 {color:#333;}

.borderwhite {border-color:white;}
.border1 {border-color:#fb2e59;}
.border2 {border-color:#111;}
.border3 {border-color:#333;}
.borderwhite, .border1, .border2, .border3 {border-width:2px; border-style:solid;}

.center {text-align:center;}
.flex {display:flex;}
.floatright {float:right;}
.floatleft {float:left;}
.font20 {font-size:20px;}
.gap20 {gap:20px;}
.gap40 {gap:40px;}
.inlineblock {display:inline-block;}
.img {width:100%; height:auto; display:block;}
.justify {text-align:justify;}
.justifyspacebtw {justify-content:space-between;}
.lineheight {line-height:130%;}
.martom {margin-bottom:clamp(40px, 4vw, 60px);}
.martom20 {margin-bottom:20px;}
.martom40 {margin-bottom:40px;}
.marginauto {margin:auto;}
.margin0 {margin:0;}
.marginright20 {margin-right:20px;}
.nospace {white-space:nowrap;}
.overden {overflow:hidden;}
.padding0 {padding:0;}
.padding10 {padding:10px;}
.padding20 {padding:20px;}
.paddingbottom20 {padding: 0 0 20px;}
.paddingright10 {padding-right:10px;}
.radius {border-radius:6px;}
.relative {position:relative;}
.shadow {box-shadow:0 0 5px rgba(0, 0, 0, 0.2);}
.text {font-size:clamp(0.9em, 3vw, 1.1em);}
.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:500;}

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

.button, .button-tel {background-image:linear-gradient(0deg, rgba(251, 46, 89, 1) 0%, rgba(255, 51, 95, 1) 50%, rgba(255, 69, 103, 1) 100%); background-color:#FB2E59;}
.button-tel {margin:auto; padding:12px 28px; font-size:clamp(33px, 4vw, 60px);}

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

.toggle-checkbox {display:none;}

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

/* 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:#1c355f; 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:#1c355f;}

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

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

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

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

nav {}
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;}
nav ul {list-style:none; padding:0; display:flex; flex-direction:column; gap:0.5rem;}
nav li {display:flex; align-items:center; gap:1rem; cursor:pointer;}

.icon {width:27px; height:27px; min-width:27px; border-radius:50%; background-color:#fb2e59; position:relative; cursor:pointer; transition:transform 0.3s ease;}
.icon::before, .icon::after {content:""; position:absolute;  background-color:#fff; width:18px; height:4px; top:50%; left:50%; transform:translate(-65%, -50%) rotate(110deg); transition:transform 0.3s ease;}
.icon::after {transform:translate(-34%, -50%) rotate(-110deg);}
.menu li:hover .icon::before, .menu li:active .icon::before {transform:translate(-50%, -50%) rotate(0deg);}
.menu li:hover .icon::after, .menu li:active .icon::after {transform:translate(-50%, -50%) rotate(-90deg);}
.menu a {text-decoration:none; color:#fff; font-size:1rem; padding:0.5rem 0;}

/* 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-top.webp) no-repeat top right / contain #030303; margin:20px 5%; height:22vh; min-height:150px; position:relative;}
.logo {width:100%; max-width:600px; min-width:250px; transition:all 0.6s ease;}

.h1 {padding:15px 10px; margin:10px 5% 0;}
h1 {margin:0; font-size:clamp(22px, 3vw, 30px); font-weight:300;}
h2, h3 {padding:14px 20px 11px; margin:0 0 20px; font-size:clamp(20px, 3vw, 26px); font-weight:400;}
h4 {font-size:clamp(18px, 3vw, 24px); font-weight:400; padding:10px 16px 8px; margin:0;}

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;}
.toggleable_control:checked ~ .toggleable_content {transition-timing-function:ease-in-out; max-height:0px;}
.toggleable_label {width:100%; transition:width .6s; display:flex; justify-content:space-between; align-items:center; cursor:pointer; position:relative; z-index:1; margin:0 auto; padding:10px 20px 12px;}
/*.toggleable_control:checked ~ .toggleable_label {transition-timing-function:ease-in-out; width:90%;}*/
.toggleable_label h2, .toggleable_label h3 {margin:0; padding:0;}
.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(10px, 3vw, 30px);}
.flexbox article {flex-grow:1; flex-basis:270px;}
article {}

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

.bloc-content {width:100%;}
.bloc-top {position:relative;}
.bloc-illu, .bloc-illu-list {overflow:hidden; position:relative;}
.bloc-illu-list {width:100%; max-width:250px;}
.bloc-illu-arrow {position:absolute; right:10px; top:40%; padding:6px 20px 12px; font-size:3em; z-index:10;}
.bloc-illu-desc {position:absolute; bottom:2%; padding:8px 10px; margin:0 10px; font-weight:500; background:rgb(0, 0, 0, 0.7);}
.bloc-title {padding:8px 10px 3px;}
.bloc-bottom {padding:10px 0;}
.bloc-text {min-height:140px;}
.bloc-plus {margin:10px auto 10px; padding:10px 20px; font-size:1.5em; display:table;}
.bloc-plus span {display:block; font-size:18px;}

.profil-page-block {padding:20px;}
.profil-page-blockillu {max-width:300px; min-width:200px;}
.profil-page-blockilludesc {padding:10px; margin:10px 0;}
.profil-page-desc span {font-size:24px; font-weight:500; padding:8px 16px 3px; line-height:130%;}
.profil-page-call.mob {margin-bottom:10px;}
.profil-page-call a {padding:5px 20px;}
.profil-page-call-num {font-size:clamp(2.1em, 4vw, 2.8em); font-weight:700;}
.profil-page-call-num span {font-size:16px; font-weight:600;display:block;}

.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:60px; height:60px; 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;}

/*   confessions   */
.confessions-block {margin:20px 10px;}
.confessions {background:url(img/confession-001.webp) no-repeat top left / cover #000; max-width:950px; min-height:390px; padding:20px;} 
.confessions-texte {max-width:400px; text-align:right;}
.confessions-texte-numero {font-size:33px; padding-top:30px;}
.confessions-texte-numero span {font-size:47px; white-space:nowrap;}

/*   rencontres   */
.image-grid {justify-content:center;}
.image-grid a {display:block; width:100%; max-width:200px;}
.image-grid img {object-fit:cover;}

/*   blog   */
.blog-text h3 {margin:20px 0; background:#333; border-radius:6px; display:flex;}

/*   commentaires   */
.formulaire form {padding:20px;}
.formulaire label {display:block; margin-top:15px; font-weight:bold;}
.formulaire input[type="text"], .formulaire textarea, .formulaire select {width:100%; padding:8px; border-radius:4px; border:1px solid #ccc; box-sizing:border-box; margin-top:5px;}
.success {margin-top:15px;}

/* #### BLOC FOOTER ### */
footer {padding:20px 5%;}
.footer-block {}

.footer-text {font-size:0.8em; font-weight:300;}
.copy {font-weight:300; font-size:12px;}
.price-block {margin:auto; width:280px; position:relative;}
.price-num {background-color:#fff; border:1px solid #d9d9d9; color:#a50f78; font-family:Arial; font-size:19px; font-weight:bold; height:32px; margin:2px; padding-left:5px; line-height:33px; text-align:left;}
.price-img {left:135px; position:absolute; top:-3px;}
.price-img img {width:100%; height:auto;}

.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; font-size:0.8em; padding:10px; max-width:210px; z-index:9999;}
#cookieConsent span {font-weight:600; text-transform:uppercase; font-size:1.1em; display:block; margin-bottom:10px;}
#acceptCookie, #declineCookie {display:block; width:100%; margin-top:20px; padding:10px 10px 12px; font-weight:600; border:none; cursor:pointer;}
#acceptCookie {}
#declineCookie {}

@media screen and (max-width:1080px) {
	.desk {display:none;}
	.tab {display:block;}
	.footer-block {width:46%}
}

@media screen and (max-width:640px) {
	.tab {display:none;}
	.mob {display:block;}
	.flexbox {display:none;}
	header {background:url(img/back-top.webp) no-repeat top / contain #030303; height:100%; min-height:130px;}
	.logo {width:50%; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
	main {padding:20px 10px;}
	.h1 {margin:10px 10px 0px;}
	.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:"▲";}
	.profil-page-block {flex-wrap:wrap; gap:0;}
	.profil-page-blockillu {max-width:100%;}
	.profil-page-call a {width:100%;}
	.bloc-top {float:none; margin:0;}
	.bloc-illu-list {max-width:none;}
	.image-grid a {width:46%;}
	.footer-block {width:100%}
}