/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
 * General Elements
 **/

:focus, button:focus { outline:none; }
body { font-family:'Mont', sans-serif; color:#000; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }
button { padding:0; border:none; background:none; }
svg * { transform-box: fill-box; transform-origin: center; }

/* Paragraphs */
p { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* Link */
a { color:inherit; }
a:hover { text-decoration:none; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }
ul.cols2 { columns:2; column-gap:60px; }
ul.cols2 li { margin-bottom:10px; margin-top:0; }

/* Forms */
.invalid-feedback.visible { display:block !important; }

/* Titles */
h1, .h1 { font-size:3.125rem; font-weight:900; }

h2, .h2 { font-size:2.25rem; font-weight:900; margin-bottom:1em; }
h3, .h3 { font-size:1.8rem; font-weight:800; color:#2E9F8E; margin-bottom:1em; }

.with-trait:after { content:''; width:0; height:5px; border-radius:5px; display:block; margin-top:0.5em; margin-bottom:1em; background:#76CE5C; transition:all 0.5s ease 0s; }
.with-trait.blue:after { background:#47E6CE; }
.with-trait.orange:after { background:#FFA134; }
.with-trait.red:after { background:#E65247; }
.with-trait.darkgreen:after { background:#2E9F8E; }

.with-trait.active:after { width:50px; }

.text-center .with-trait:after { margin-left:auto; margin-right:auto; }

.scrollreveal { visibility:hidden; }

/**
 * Bootstrap overrides
 **/

/* Buttons */
.btn { border-radius:40px; border-width:3px; transition:all 0.5s ease 0s; font-weight:600; }
.btn-lg { font-weight:900; }

.btn-outline-primary { border-color:#2E9F8E;  color:#000; }
.btn-outline-primary:hover { border-color:#2E9F8E; background-color:#2E9F8E; color:#fff; }

.btn-outline-secondary { border-color:#E8563D;  color:#000; }
.btn-outline-secondary:hover { border-color:#E8563D; background-color:#E8563D; color:#fff; }

.btn-outline-light { color:#fff; border-color:#fff; }

.btn-secondary { border-color:#E65247; background-color:#E65247; color:#fff; }
.btn-secondary:hover { background:#FF4E00; border-color:#FF4E00; }

/* Forms */
.form-floating:after { content:''; position:absolute; display:block; width:calc(100% - 5px); height:1px; left:5px; bottom:-1px; background:#C6C9C9; }
.form-control { border-radius:0; border:none; }
.form-label,
.form-check-label { color:#7E7E7E; }

.swiper-wrapper { box-sizing:border-box; }

/**
 * Layout
 **/

 /* Global */
#page { position:relative; width:100%; overflow:hidden; }
#main { margin-top:200px; }

.container-fluid { --bs-gutter-x: 180px; }
.padding { padding-top:10vh; padding-bottom:10vh; }
.smallpadding { padding-top:5vh; padding-bottom:5vh; }
.bigpadding { padding-top:15vh; padding-bottom:15vh; }
.margin { margin-top:10vh; margin-bottom:10vh; }
.smallmargin { margin-top:5vh; margin-bottom:5vh; }
.bigmargin { margin-top:15vh; margin-bottom:15vh; }
.biggutter { --bs-gutter-x: 150px; }

.bggreen { background:#D5F0CE; }
.bggreen h2, .bggreen h3 { color:#2E9F8E; }
.bgred { background:#E65247; color:#fff; }
.bgred h2, .bgred h3 { color:#fff; }
.bgorange { background:#FF8900; color:#fff; }
.bgorange h2, .bgorange h3 { color:#fff; }
.bgdarkgreen { background:#47E6CE; color:#fff; }
.bgdarkgreen h2, .bgdarkgreen h3 { color:#fff; }
.bglight { background:#F2FCE6; }
.bglightblue { background:#DEF7F3; }
.bgbeige { background:#FFE3C1; }

.bgoutside{ position: relative; display: flex; justify-content: flex-end; }
.bgoutside>*{ position: relative; z-index: 1; }
.bgoutside:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; background-size: auto 100%; background-position: 100% 0;  background-repeat: no-repeat; height: 100%; }
.bgoutside.right{ justify-content: flex-start; }
.bgoutside.right:after{ left: 0; right: inherit; }
.bgoutside.shape1 > *{ padding: 5em 8vmin; }
.bgoutside.shape1:after{ background-image: url(../themes/maisondesfamilles/assets/img/shapes/shape1.svg); }

.slider { position:relative; }
.slider .navigation { position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%); z-index:2; display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
.slider .navigation button { padding:0; border:none; background:none; }
.slider .navigation .prev { margin-left:-60px; }
.slider .navigation .next { margin-right:-60px; }

.slider .swiper-pagination .swiper-pagination-bullet { background:#FF8900; opacity:0.5; }
.slider .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }

.slider .vertical-pagination { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slider .vertical-pagination .swiper-pagination-bullet { background:#2E9F8E; opacity:0.5; margin:5px 0; }
.slider .vertical-pagination .swiper-pagination-bullet-active { opacity:1; }

.mask1 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask1.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask1.svg) no-repeat center center / contain; }
.mask2 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask2.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask2.svg) no-repeat center center / contain; }
.mask3 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask3.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask3.svg) no-repeat center center / contain; }
.mask4 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask4.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask4.svg) no-repeat center center / contain; }
.mask5 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask5.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask5.svg) no-repeat center center / contain; }
.mask6 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask6.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask6.svg) no-repeat center center / contain; }
.mask7 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask7.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask7.svg) no-repeat center center / contain; }
.mask8 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask8.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask8.svg) no-repeat center center / contain; }

.text li { margin:10px 0; position:relative; padding-left:30px; }
.text li:before { content:''; display:inline-block; min-width:15px; height:4px; border-radius:5px; background:#FFA134; position:absolute; left:0; top:8px; }

.hamburger { display:none; padding:0; }


/* Header */
#header { position:fixed; left:0; top:0; width:100%; z-index:5; transition:all 0.3s ease 0; padding:30px 0; min-height:100px; }
#header .row { justify-content:flex-end; }
#header .logo {  position:absolute; top:-20px; left:0; transition:top 0.3s ease 0s; width:auto; }
#header .logo-dessin { transition:all 0.5s ease 0s; }
#header .logo svg { max-height:160px; }
#header .navigation { font-weight:bold; }
#header .navigation ul { display:flex; flex-direction:row; align-items:center; justify-content:flex-end; }
#header .navigation li { margin-left:50px; }
#header .navigation a:not(.btn) { text-decoration:none; position:relative; padding-bottom:6px; color:#000000; }
#header .navigation a:not(.btn):before { content:''; position:absolute; left:0; bottom:0; width:0; height:4px; border-radius:4px; background:#2E9F8E; transition:all 0.5s ease 0s; }
#header .navigation li.active a:not(.btn):before { width:30px; }
#header .navigation a:not(.btn):hover:before { width:100%; }
#header .navigation .btn { font-weight:bold; }

#header.top .logo svg { background:#fff; }

#header.not-top { background:#fff; }
#header.not-top .logo { top:-100px; }
#header.not-top .logo-dessin { opacity:0; }
#header.not-top .logo svg { background:none; }

#header-left { position:absolute; left:0; top:0; width:30vw; pointer-events:none; }
#header-right { position:absolute; right:-100px; top:-15px; width:18vw; pointer-events:none; }

#banner { margin-top:-50px; position:relative; }
#banner h1 { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); color:#fff; z-index:2; text-align:center; text-shadow:0px 0px 15px rgb(0 0 0 / 50%); }
#banner .shape1 { position:absolute; left:-8vw; top:200px; z-index:2; max-width:15vw; }
#banner .shape2 { position:absolute; right:0; bottom:-50px; z-index:2; max-width:15vw; }

#bannerlinks { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; writing-mode:vertical-lr; transform:rotate(180deg); position:absolute; right:5%; bottom:0; z-index:1; white-space:nowrap; }
#bannerlinks li { margin-top:30px; }
#bannerlinks li:first-child { margin-top:0; }
#bannerlinks a { display:flex; flex-direction:row; align-items:center; justify-content:center; text-decoration:none; }
#bannerlinks svg { transform:rotate(90deg); margin-bottom:10px; }


/* Footer */
#footer .facebook .arrow { filter:invert(1); position:relative; left:0; transition:all 0.5s ease 0s; }
#footer .facebook a:hover { text-decoration:underline; color:#fff; }
#footer .facebook a:hover .arrow { left:30px; }

#footer .reviews { color:#fff; }
#footer .reviews .btn { position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); z-index:2; }

#footer .menu a { text-decoration:none; position:relative; padding-bottom:6px; color:#000000; font-weight:bold; }
#footer .menu a:before { content:''; position:absolute; left:0; bottom:0; width:0; height:4px; border-radius:4px; background:#2E9F8E; transition:all 0.5s ease 0s; }
#footer .menu li { margin-bottom:15px; }
#footer .menu li.active a:before { width:30px; }
#footer .menu a:hover:before { width:100%; }

#footer .logo img { background:#fff; }

#footer .socials { display:flex; flex-direction:row; align-items:center; justify-content:center; font-weight:bold; margin-bottom:50px; }
#footer .socials li { margin-left:15px; display:flex; flex-direction:row; align-items:center; }
#footer .socials a { text-decoration:none; position:relative; }
#footer .socials svg { margin-right:5px; }
#footer .socials a:hover { color:#2E9F8E; }
#footer .socials a:hover svg { stroke:#2E9F8E; fill:#2E9F8E; }

#footer .partenaires .swiper-wrapper { align-items:center; }
#footer .partenaires .swiper-slide img { width:300px; height:200px; object-fit:contain; }
#footer .partenaires .navigation button svg { transition:all 0.5s ease 0s; }
#footer .partenaires .navigation button:hover svg { fill:#e68447; stroke:#fff; }

#footer .address { font-weight:800; }

#footer .bottom { margin-top:30px; }
#footer .bottom ul { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#footer .bottom li:after { content:'-'; margin:0 5px; }
#footer .bottom a { text-decoration:none; }
#footer .bottom li:last-child:after { content:none; }
#footer .bottom a:hover { color:#2E9F8E; }

#footer .footer-left { position:absolute; left:30px; bottom:50px; z-index:-1; overflow:visible; }
#footer .footer-right { position:absolute; right:-100px; bottom:-250px; z-index:-1; overflow:visible; }

/* Sticky */
#sticky { position:fixed; right:0; top:50%; z-index:2; transform:translateX(calc(100% - 70px)); }
#sticky li { margin-bottom:10px; }
#sticky a { background:#ccc; border-radius:50px 0 0 50px; padding:30px 15px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; color:#fff; text-decoration:none; transition:all 0.5s ease 0s; position:relative; z-index:5; }
#sticky .icon { margin-right:15px; width:40px; display:flex; align-items:center; justify-content:center; }
#sticky .heart a { background-color:#a6b3da; }
#sticky .bed a { background-color:#82d26a; }
#sticky a:hover { transform:translateX(calc(-100% + 70px)); }

/**
 * Pages
 **/

/* Accueil */
#accueil #homebanner { margin-top:-30px; position:relative; }
#accueil #homebanner .shape a { text-decoration:none; }
#accueil #homebanner .shape a:hover { color:#fff; }
#accueil #homebanner .image { width:calc(30% + 80px); position:relative; left:-80px; }
#accueil #homebanner .text { position:absolute; left:30%; top:calc(50% + 70px); transform:translate(-50px, -50%); width:30%; }
#accueil #homebanner .top { position:relative; z-index:1; }
#accueil #homebanner .top .shapes { position:absolute; left:55%; top:0; }
#accueil #homebanner .top .shape { position:absolute; display:flex; align-items:center; justify-content:center; }
#accueil #homebanner .top .shape .img { position:relative; max-width:none; z-index:2; }
#accueil #homebanner .top .shape .stripe { position:absolute; z-index:1; right:-30px; top:0; max-width:none; }
#accueil #homebanner .top .shape h2 { position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%, -50%); text-align:center; color:#fff; margin-bottom:0; width:100%; }
#accueil #homebanner .top .shape h2:before { content:''; display:block; margin:0 auto 15px auto; width:20px; height:3px; background:#fff; }
#accueil #homebanner .top .shape h2:after { content:'+'; display:block; font-weight:400; }
#accueil #homebanner .top .shape1 { z-index:3; top:-50px; }
#accueil #homebanner .top .shape1 h2 { font-size:2.25rem; }
#accueil #homebanner .top .shape2 { z-index:2; left:140px; top:90px; }
#accueil #homebanner .top .shape2 h2 { font-size:1.75rem; }
#accueil #homebanner .top .shape3 { z-index:1; left:220px; top:390px; }
#accueil #homebanner .top .shape3 h2 { font-size:1.3rem; }
#accueil #homebanner .top .curved { position:absolute; left:35%; top:0; }
#accueil #homebanner .bottom .bigshape { margin-top:-150px; margin-left:-200px; position:relative; z-index:2; pointer-events:none; }
#accueil #homebanner .bottom .bigshape .stripe { position:absolute; left:35%; top:40%; }
#accueil #homebanner .bottom .scrolldown { display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; left:50%; bottom:200px; transform:translateX(-50%); }
#accueil #homebanner .bottom .scrolldown .arrow { margin-bottom:30px; animation: bounce 2s infinite; }
#accueil #homebanner #bannerlinks { bottom:-200px; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

#accueil #stats .stats-circles { right:-30px; top:-200px; width:150px; height:350px; position:absolute; overflow:visible; }

#accueil #stats .dashed { position:absolute; left:50%; top:-40px; transform:translateX(-50%); z-index:-1 ; }
#accueil #stats .shape { position:absolute; right:-50px; bottom:-30px; }
#accueil #stats .stat  img { background:#fff; padding:15px;  }
#accueil #stats .stat strong { color:#E68447; font-size:5rem; font-weight:600; line-height:1em; }

#accueil #blog .image { position:relative; right:-100px; margin-top:-30px; margin-bottom:-30px; }
#accueil #blog .image .stripes { position:absolute; left:-60px; top:0; z-index:-2; opacity:0.3 }
#accueil #blog .image .shape { position:absolute; left:0; top:0; z-index:-1; width:30px; }

#accueil #cols .bgred .image img { width:calc(100% + 100px); margin-left:-100px; max-width:none; }
#accueil #cols .text { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }


/* L'association */
#association #role .citation .caption { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:1.6rem; padding:50px 80px; margin-bottom:0; line-height:1.4em; }
#association #role .citation .caption:before,
#association #role .citation .caption:after { content:''; position:absolute; width:70px; height:60px; }
#association #role .citation .caption:before { left:0; top:50px; background:url(../themes/maisondesfamilles/assets/img/quote-open.svg) no-repeat center center / contain; }
#association #role .citation .caption:after { right:80px; bottom:50px; background:url(../themes/maisondesfamilles/assets/img/quote-close.svg) no-repeat center center / contain; }
#association #role .citation .stripe { position:absolute; right:-80px; top:30px; }
#association #role .lines1 { position:absolute; right:10%; bottom:0; z-index:-1; }
#association #role .lines2 { position:absolute; left:0; bottom:0; z-index:-1; }
#association #role .curved { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:-1; }

#association #missions .house { position:absolute; right:50px; bottom:-200px; z-index:-1; max-width:40vw; }
#association #missions ul > li:nth-child(even) .text { order:1; }
#association #missions ul > li:nth-child(even) .image { order:2; }
#association #missions .mask0 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask5.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask5.svg) no-repeat center center / contain; }
#association #missions .mask1 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask6.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask6.svg) no-repeat center center / contain; }
#association #missions .mask2 { -webkit-mask: url(../themes/maisondesfamilles/assets/img/masks/mask4.svg) no-repeat center center / contain; -mask: url(../themes/maisondesfamilles/assets/img/masks/mask4.svg) no-repeat center center / contain; }

#association #histoire .timeline { border:1px solid #E65247; border-width:1px 0; }
#association #histoire .timeline .image img { height:100%; object-fit:cover; }

#association #histoire .timeline .description { padding:50px; font-size:1rem; }
#association #histoire .timeline .date { display:flex; align-items:center; justify-content:center; }
#association #histoire .timeline .date span { writing-mode:vertical-lr; font-size:3rem; font-weight:900; transform:rotate(180deg); }
#association #histoire .timeline li:before,
#association #histoire .timeline li:after { content:''; position:absolute; width:50%; height:100%; z-index:-1; }
#association #histoire .timeline li:before { left:0; top:0; }
#association #histoire .timeline li:after { right:0; top:0; }
#association #histoire .timeline li:nth-child(odd):before { background:#fff; }
#association #histoire .timeline li:nth-child(odd):after { background:#E65247; }
#association #histoire .timeline li:nth-child(odd) .image { order:2; }
#association #histoire .timeline li:nth-child(odd) .description { order:1; padding-left:0; }
#association #histoire .timeline li:nth-child(odd) .date span { color:#E65247; opacity:0.3; }
#association #histoire .timeline li:nth-child(even):before { background:#E65247; }
#association #histoire .timeline li:nth-child(even):after { background:#fff; }
#association #histoire .timeline li:nth-child(even) .image { order:1; }
#association #histoire .timeline li:nth-child(even) .description { order:2; padding-right:0; }
#association #histoire .timeline li:nth-child(even) .date span { color:#fff; opacity:0.3; }

#association #histoire .timeline li:first-child .image img { position:absolute; left:50%; top:0; width:50vw; height:100%; max-width:none; }
#association #histoire .timeline li:first-child .image .caption { position:absolute; left:calc(50% + 50px); bottom:50px; z-index: 2; font-size:3rem; font-weight:900; color:#fff; line-height:1em; width:50vw; }
#association #histoire .timeline li:last-child .image { position:relative; }
#association #histoire .timeline li:last-child .image img { position:absolute; left:0; top:0; width:50vw; height:100%; max-width:none; }
#association #histoire .timeline li:last-child .description em { font-size:2.6rem; font-weight:900; line-height:1em; margin-top:1em; display:inline-block; }

#association #construction .video .bg { min-height:500px; object-fit:cover; }
#association #construction .video .caption { position:absolute; right:50%; top:50%; transform:translateY(-50%); }
#association #construction .video .caption .text { position:absolute; left:50%; top:40%; max-width:80%; color:#fff; transform:translate(-50%, -50%); }
#association #construction .video .caption .text h3 { color:#fff; }
#association #construction .video .caption .play { position:absolute; right:0; top:50%; transform:translate(50%, -50%); }
#association #construction .video .caption .play .play-icon { transition:all 0.5s ease 0s; }
#association #construction .video .caption .play:hover .play-icon { transform:scale(1.1); }
#association #construction .photos .slider:after { content:''; position:absolute; right:75%; bottom:0; height:80px; background:#47E6CE; width:50vw; transform:translateY(100%); border-radius:0 0 50px 0; }
#association #construction .item1 { position:absolute; right:0; top:0; z-index: -1; }
#association #construction .architecte .image .stripe { position:absolute; left:-50px; bottom:-100px; max-width:10vw; }
#association #construction .architecte .text .stripe { position:absolute; right:-150px; top:-200px; max-width:10vw; }

#association #equipe { overflow:hidden; }
#association #equipe .equipe { overflow:hidden; }
#association #equipe .equipe .right { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
#association #equipe .equipe h3 { color:#E68447; }
#association #equipe .equipe .peoples { margin-top:auto; }

#association #partenaires h4 { font-size:0.93rem; font-weight:600; margin-top:30px; }
#association #partenaires .bottom { margin-top:50px; font-weight:600; text-align:center; font-size:1.6rem; font-weight:bold; }
#association #partenaires .bottom strong { font-weight:600; color:#2E9F8E; }
#association #partenaires .entreprises h4 { font-size:0.75rem; font-weight:600; margin-top:15px; }
#association #partenaires .entreprises img { width:200px; height:150px; object-fit:contain;}
#association #partenaires .investissement li,
#association #partenaires .investissement li > a { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
#association #partenaires .investissement img { margin-right:15px; width:80px; height:80px; object-fit:contain; }
#association #partenaires .investissement h4 { margin:0; }

/* La maison */
#maison #banner .shape2 svg { fill:#FFA134; }

#maison #services .vertical { display:flex; align-items:center; justify-content:center; }
#maison #services .vertical span { writing-mode:vertical-lr; transform:rotate(180deg); color:rgba(255,255,255,0.2); font-size:4rem; font-weight:900; }
#maison #services .slider img { object-fit:cover; height:100%; width:100%; }
#maison #services .slider .swiper-slide { height:auto; }
#maison #services .jour .text { padding:50px; }
#maison #services .jour .slider { position:absolute; top:0; width:50vw; height:100%; left:0; }
#maison #services .nuit .text { padding:50px; }
#maison #services .nuit .slider { float:right; width:50vw; height:100%; right:0; }
#maison #services .nuit li:before { background:#E65247; }
#maison #services .autres li:before { background:#47E6CE; }
#maison #services .activites li:before { background:#47E6CE; }
#maison #services .activites .vertical-pagination { position:absolute; bottom:0; right:50px; }
#maison #services .manifestations li:before { background:#47E6CE; }
#maison #services .manifestations .vertical-pagination { position:absolute; left:0; bottom:0; }

#maison #visite-virtuelle .caption { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:#fff; text-decoration:none; }
#maison #visite-virtuelle .bg { min-height:400px; object-fit:cover; }
#maison #visite-virtuelle .caption img { margin-bottom:15px; }
#maison #visite-virtuelle .caption span { color:#FFA134; }

#maison #lieux h3 { color:#E65247; }
#maison #lieux strong,
#maison #lieux b { color:#000; font-weight:bold; }

/* Soutenir */
#soutenir #pourquoi .caption { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; }
#soutenir #pourquoi .item6 { position:absolute; left:0; bottom:0; z-index:-1; transform:translate(-50%, 50%) }
#soutenir #pourquoi .item7 { position:absolute; left:0; top:0; z-index:1; max-width:10vw; }
#soutenir #pourquoi .item4 { position:absolute; right:0; bottom:-100px; z-index:1; max-width:30vw;}

#soutenir #aider .intro h2 { color:#FFA134; }
#soutenir #aider h3 img { margin:0 30px; }
#soutenir #aider .dons h3 { color:#47E6CE; }
#soutenir #aider .dons .item5 { position:absolute; left:0; bottom:0; }
#soutenir #aider .benevole .item1 { position:absolute; right:0; bottom:0; max-width:20vw; }
#soutenir #aider li:before { background:#47E6CE; }
#soutenir #aider .dons .top { position:relative; background:#47E6CE; }
#soutenir #aider .dons .top h2 { color:#fff; }
#soutenir #aider .dons .top .shape { position:absolute; width:100%; }
#soutenir #aider .dons .top .shape-top { left:0; top:0; transform:translateY(calc(-100% + 1px)); }
#soutenir #aider .dons .top .shape-bottom { left:0; bottom:0; transform:translateY(calc(100% - 1px)); }
#soutenir #aider .dons .form { max-width:800px; margin:0 auto; }
#soutenir #aider .dons .form .btn-light { border-radius:0; background:#fff; font-weight:900; font-size:1.75rem; }
#soutenir #aider .dons .form .btn-check:checked + .btn-light { background-color:#A3F2E6; border-color:#A3F2E6; box-shadow:none; }
#soutenir #aider .dons .form .btn-outline-light { border-width:2px; font-weight:900; font-size:1.75rem; text-transform:uppercase; padding-top:1rem; padding-bottom:1rem; }
#soutenir #aider .dons .form .form-floating:after { content:none; }
#soutenir #aider .dons .form .autre .form-control { font-size:1.75rem; font-weight:900; height:auto; text-align:center; }
#soutenir #aider .dons .form .autre .form-label { font-size:1.75rem; font-weight:900; color:#000; top:50%; margin:0; left:50%; transform:translate(-50%, -50%); padding:0; height:auto; transition:all 0.3s ease 0s; }
#soutenir #aider .dons .form .autre > .form-control:focus ~ label, 
#soutenir #aider .dons .form .autre > .form-control:not(:placeholder-shown) ~ label, 
#soutenir #aider .dons .form .autre > .form-select ~ label { font-size:1rem; top:15px; }
#soutenir #aider .dons .form .autre > .form-control:focus, 
#soutenir #aider .dons .form .autre > .form-control:not(:placeholder-shown) { padding-top:1.625rem; padding-bottom:0.4rem; background-color:#A3F2E6; border-color:#A3F2E6; }
#soutenir #aider .dons .form .autre > .form-control:invalid,
#soutenir #aider .dons .form .autre > .form-control.is-invalid { padding-left:calc(1.5em + 0.75rem); }
#soutenir #aider .dons .form .autre .currency { position:absolute; right:30px; top:50%; transform:translateY(-50%); font-size:3rem; color:#000; font-weight:900; }
#soutenir #aider .dons .form .card-fields {  }
#soutenir #aider .dons .form .card-field { padding:30px; background:#fff; color:#7E7E7E; }
#soutenir #aider .dons .form #card-cvc { border:none; }
#soutenir #aider .dons .form input::placeholder { color:#fff; }
#soutenir #aider .dons .form #card-errors { display:block; }
#soutenir #aider .dons .form .cancel { font-size:1rem; padding:0.5rem 0; }
#soutenir #aider .dons .form .reassurance { display:flex; flex-direction:row; align-items:center; justify-content: flex-start; font-size:1.2rem; }
#soutenir #aider .dons .form .form-check { font-size:1.2rem; }
#soutenir #aider .dons .form .form-check-input { border:none; border-radius:0; }
#soutenir #aider .dons .form .form-check-label { color:#fff; }

#soutenir #form h2 { color:#2E9F8E; }
#soutenir #form .row { position:relative; z-index:1; }
#soutenir #form .item2 { position:absolute;left:-200px; top:0; z-index:0; max-width:30vw; }
#soutenir #form .item3 { position:absolute;right:-200px; top:0; z-index:0; max-width:30vw; }
#soutenir #form .item8 { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#soutenir #mecenat { color:#fff; background:#E65247 }
#soutenir #mecenat .bigbtn { padding:30px; margin-top:50px; border-radius:100px; display:inline-flex; text-decoration:none; flex-direction:row; align-items:center; justify-content:center; border:1px solid #93E3D7; font-weight:bold; text-transform:uppercase; transition:all 0.5s ease 0s; }
#soutenir #mecenat .bigbtn svg { margin-right:30px; }
#soutenir #mecenat .bigbtn:hover { background:#fff; color:#93E3D7; }

/* Information et réservation */
#reservation #conditions .intro .left .caption { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:50px; text-align:center; color:#fff; }
#reservation #conditions .intro .right li { padding:15px 0; border-bottom:1px dashed #76CE5C; font-weight:bold; }
#reservation #conditions .intro .right img { margin-right:15px; width:30px; object-fit:contain; }
#reservation #conditions .documents li:before { background:#47E6CE; }
#reservation #conditions .documents .item4 { position:absolute; left:0; bottom:-200px; max-width:15vw; }

#reservation #tarifs li:before { background:#47E6CE; }
#reservation #tarifs .tarification .item1 { position:absolute; right:0; bottom:0; max-width:30vw; }
#reservation #tarifs .grilletarifs .intro { color:#fff; padding-bottom:150px; padding-left:15px; padding-right:15px;  }
#reservation #tarifs .grilletarifs .intro h3 { color:#fff; }
#reservation #tarifs .grilletarifs .intro:before { content:''; position:absolute; right:0; top:0; width:70vw; height:100%; background:#FFA134; z-index:-1; }
#reservation #tarifs .grilletarifs .grille { margin-top:-100px; position:relative; z-index:1; }
#reservation #tarifs .grilletarifs .box { padding:30px 15px; text-align:center; background:#fff; box-shadow:5px 5px 0px 0px rgba(0,0,0,0.2); display:flex; flex-direction:column; align-items:center; justify-content: center; margin-bottom:30px; }
#reservation #tarifs .grilletarifs .box .titre { width:50px; height:50px; display:flex; align-items:center; justify-content:center; text-align:center; border:2px solid #2E9F8E; color:#2E9F8E; border-radius:100%; margin-bottom:15px; font-size:1.4rem; font-weight:600; }
#reservation #tarifs .grilletarifs .box .prix { font-size:1.8rem; font-weight:900; color:#FFA134; }
#reservation #tarifs .grilletarifs .box .description { font-size:0.8rem; }
#reservation #tarifs .grilletarifs .text { display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; margin-top:30px; }
#reservation #tarifs .grilletarifs .text img { margin-right:15px; }
#reservation #tarifs .item2 { position:absolute; right:0; bottom:-350px; z-index:-1; max-width:15vw; }
#reservation #tarifs .item3 { position:absolute; left:0; bottom:-150px; z-index:-1; max-width:15vw; }

#reservation #documents a { text-decoration:none; margin-bottom:15px; display:block; }
#reservation #documents h4 { font-size:1rem; }

#reservation #faq .box { background:#F0FDFB; padding:30px; border-radius:15px; margin-bottom:30px; }
#reservation #faq .box .question { font-size:1rem; font-weight:bold; margin-bottom:1em; color:#000; cursor:pointer; display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; }
#reservation #faq .box .question img { transform:rotate(180deg); opacity:0.5; transition:all 0.3s ease 0s; }
#reservation #faq .box .question.collapsed img { transform:rotate(0); opacity:1; }
#reservation #faq .box .reponse { font-size:0.9rem; }

#contact h1 { color:#FF8900; }
#contact #form { background:#F6FBFB; }
#contact #form .bigshape { position:absolute; left:-10vw; top:0; transform:rotate(-35deg); max-width:20vw;  }
#contact #form .radios { margin-bottom:5vh; }
#contact #form .radios .shape { width:200px; height:150px; display:flex; flex-direction:row; align-items:center; justify-content:center; padding:30px; }
#contact #form .radios .shape1 { background:url(../themes/maisondesfamilles/assets/img/shapes/shape1.svg) no-repeat center center / contain; }
#contact #form .radios .shape2 { background:url(../themes/maisondesfamilles/assets/img/shapes/shape2.svg) no-repeat center center / contain; }
#contact #form .radios .shape3 { background:url(../themes/maisondesfamilles/assets/img/shapes/shape3.svg) no-repeat center center / contain; }
#contact #form .radios .form-check-input { margin-right:15px; background:transparent; border-color:#fff; }
#contact #form .radios .form-check-input:checked + .form-check-label:before { content:''; position:absolute; left:-32px; top:calc(50% - 15px); width:20px; height:20px; background:url(../themes/maisondesfamilles/assets/img/tick.svg) no-repeat center center / contain; }
#contact #form .radios .form-check-label { position:relative; font-size:1.25rem; font-weight:900; color:#fff; }
#contact #form .upload-button { display:block; width:100%; padding:30px; border:1px dashed #C6C9C9; border-radius:5px; text-align:left; color:#707070; }
#contact #form .upload-button strong { color:#2E9F8E; }
#contact #form .upload-button ul { list-style:disc; margin-left:20px; }
#contact #form .upload-files-container { border-color:#C6C9C9; }
#contact #form .upload-object { background:#fff; border-color:#C6C9C9; }

#contact .alert .close { display:none; }

/* Blog */
#actualites-listing #filters li { margin-bottom:15px; }
#actualites-listing #filters .btn.active { background-color:#2E9F8E; border-color:#2E9F8E; color:#fff; }
#actualites-listing #results .row { --bs-gutter-x: 5rem; }
#actualites-listing #results .post { margin-bottom:50px; }
#actualites-listing #results .post a { text-decoration:none; }
#actualites-listing #results .title { background:#ccc; color:#fff; font-size:1.125rem; text-align:left; font-weight:normal; padding:10px 15px; margin-top:-15px; position:relative; z-index:2; }
#actualites-listing #results .post-1 .title { background:#FFA134; transform:rotate(-4deg); }
#actualites-listing #results .post-2 .title { background:#E65247; transform:rotate(4deg); }
#actualites-listing #results .post-3 .title { background:#2E9F8E; transform:rotate(-4deg); }

#actualites-detail #detail .content .row { margin-bottom:50px; }

#actualites-detail #detail .content .row.odd .image { order:1; }
#actualites-detail #detail .content .row.odd .text { order:2; }
#actualites-detail #detail .content .row.even .image { order:2; }
#actualites-detail #detail .content .row.even .text { order:1; }
#actualites-detail #detail .content h3 { color:#FFA134; }
/**
 * XXL
 **/
@media (min-width: 1400px) {

}

@media (max-width: 1600px) {
    #bannerlinks { display:none; }
}


/**
 * XL
 **/
@media (max-width: 1399px) {
    html { font-size:14px; }
    .container-fluid { --bs-gutter-x:120px; }
    .biggutter { --bs-gutter-x:60px; }

    #sticky { transform:translateX(calc(100% - 55px)); }
    #sticky a { padding:15px 10px; }
    #sticky a:hover { transform:translateX(calc(-100% + 55px)); }

    #accueil #homebanner { margin-top:0; padding-top:50px; }
    #accueil #homebanner .top { max-width:1140px; margin-right: auto; margin-left: auto; display:flex; flex-direction:row; align-items:flex-start; justify-content: space-between; padding-bottom:50px; }
    #accueil #homebanner .text { left:0; width:50%; position:relative; transform:none; }
    #accueil #homebanner .image { display:none; }
    #accueil #homebanner .bottom { display:none; }
    #accueil #homebanner .top .shapes { position:static; left:auto; top:auto; }
    #accueil #homebanner .top .shape { position:static; transform:scale(0.8)}
    #accueil #homebanner .top .shape1 { margin-top:-120px; margin-left:-60px; }
    #accueil #homebanner .top .shape2 { margin-top:-120px; }
    #accueil #homebanner .top .shape3 { margin-top:-100px; margin-left:-30px }
    #accueil #homebanner #bannerlinks { left:0; bottom:0; writing-mode:horizontal-tb; transform:none; }
    #accueil #homebanner #bannerlinks li { margin:0 30px 0 0; }
    #accueil #homebanner #bannerlinks svg { transform:none; margin:0 15px 0 0; }
   
    #accueil #stats .stats-circles { display:none; }
    #accueil #stats .dashed { top:0; }
    #accueil #stats .shape { display:none; }

    #reservation #conditions .documents .item4 { display:none; }
    
    
}

/**
 * LG
 **/
@media (max-width: 1199px) {
    .container-fluid { --bs-gutter-x:60px; }

    #header .navigation li { margin-left:30px; }

    #accueil #homebanner .top { max-width:960px; }
    #accueil #stats .stat strong { font-size:3.5rem; }

    .slider .navigation .prev { margin-left:-50px; }
    .slider .navigation .next { margin-right:-50px; }

    #association #role .lines1,
    #association #role .lines2 { display:none; }

    #association #role .citation .caption:before { left:-20px; top:0; }
    #association #role .citation .caption:after { bottom:0; right:0; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
    html { font-size:12px; }
    body { --bs-gutter-x:3rem; }
    .container-fluid { --bs-gutter-x:30px; }

    .slider .navigation .prev { margin-left:0; transform:translateX(-50%); }
    .slider .navigation .next { margin-right:0; transform:translateX(50%); }

    #sticky { display:none; }

    #header .navigation li { margin-left:15px; }
    
    #footer .footer-left,
    #footer .footer-right { display:none; }

    #accueil #homebanner .top { width: 100%; padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto; }
    #accueil #homebanner .top .shape { transform:scale(0.6)}
    #accueil #homebanner .top .shape1 h2 { font-size:2.8rem; }
    #accueil #homebanner .top .shape2 { margin-top:-160px; }
    #accueil #homebanner .top .shape2 h2 { font-size:2.5rem; }
    #accueil #homebanner .top .shape3 { margin-top:-130px;}
    #accueil #homebanner .top .shape3 h2 { font-size:1.8rem; }
    #accueil #homebanner .text { min-width:55%; }
    #accueil #homebanner #bannerlinks { left:3rem; bottom:0; }
    #accueil #blog { padding-left:var(--bs-gutter-x); }

    #accueil #cols .padding { padding-right:var(--bs-gutter-x); padding-left:var(--bs-gutter-x); }
    
    #association #role .citation .caption { padding-left:40px; padding-right:40px; font-size:1.4rem; }
    #association #histoire .timeline .description { padding:30px; }

    #soutenir #pourquoi .item4 { display:none; }
    
    

    
}

/**
 * SM
 **/
@media (max-width: 767px) {
    body { --bs-gutter-x:1.5rem; }
    .btn { font-size:1.2rem; }
    .hamburger { display:inline-block; }

    #header .navigation { text-align:right; }
    #header .navigation > ul { position:fixed; left:0; top:0; width:70vw; height:100%; display:flex; pointer-events:none; flex-direction:column; align-items:flex-start; justify-content:center; background:#e65247; text-align:left; padding:5vh 5vw; transition:transform 0.5s ease 0s; transform:translateX(-100%); }
    #header .navigation > ul > li { margin-left:0; margin-bottom:2vh; }
    #header .navigation > ul a:not(.btn) { color:#fff; font-size:1.8rem; }
    #header .navigation > ul a.btn { color:#fff; }

    #maison #services jour .slider,
    #maison #services .nuit .slider { display:none; }

    #footer .logo,
    #footer .menu { display:none; }

    body.open #header .navigation > ul { transform:translateX(0); opacity:1; pointer-events:auto; }

    #accueil #cols .bgred .image { display:none; }
    #accueil #stats .dashed { top:20px; }

    #association #missions .house { display:none; }

    #association #construction .video .caption { width:75%; right:auto; left:30px; }
    
    #reservation #tarifs .tarification .item1 { display:none; }

    #reservation #tarifs .item3,
    #reservation #tarifs .item2 { display:none; }

    #soutenir #aider .dons .item5 { display:none; }
    #soutenir #aider .benevole .item1 { display:none; }

    
}

/**
 * XS
 **/
@media (max-width: 575px) {
    .bgoutside { justify-content: center; }
    .bgoutside:after{ background-position: 50% 50%; width: 100%; }
    .biggutter { --bs-gutter-x:30px; }

    #header .navigation > ul { width:100%; }
    #header.top .logo svg { background:none; }
    #main { margin-top:250px; }
    #banner h1 { font-size:2.8rem; }
    #banner .shape1 { display:none; }

    #footer .bottom ul { flex-direction:column; }
    #footer .bottom li { margin-bottom:5px; }
    #footer .bottom li:after { content:none; }

    #accueil #homebanner .top { flex-direction:column; }
    #accueil #homebanner .text { min-width:100%; }
    #accueil #homebanner .top .shapes { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 0; }
    #accueil #homebanner .top .shape { margin:0 !important; transform:scale(1) !important;  }
    #accueil #homebanner #bannerlinks { align-items:center; justify-content: center; }
    #accueil #homebanner #bannerlinks li { margin:0 15px; }
    #accueil #stats .dashed { display:none; }

    #accueil #blog { --bs-gutter-x:30px; padding-left:var(--bs-gutter-x); padding-right:var(--bs-gutter-x); }
    #accueil #blog .image { display:none; }
    #accueil #cols .row { margin-left:0; margin-right:0; }
    #accueil #cols .padding { padding-left:0; padding-right:0; }
    #accueil #cols .bgred,
    #accueil #cols .bgorange { padding-left:var(--bs-gutter-x); padding-right:var(--bs-gutter-x); }

    #maison #services .slider { margin-bottom:30px; }
    #maison #services .image { order:1; }
    #maison #services .text { order:2; }

    #association #missions .image { order:1 !important; margin-bottom:30px; }
    #association #missions .text { order:2 !important; }
    #association #role .image { display:none; }

    #association #histoire .timeline .date span { writing-mode:horizontal-tb; transform:none; color:#E65247 !important; opacity:1 !important; }
    #association #histoire .timeline li { margin-bottom:30px; }
    #association #histoire .timeline li:nth-child(even):before,
    #association #histoire .timeline li:nth-child(odd):after { background:none; }
    #association #histoire .timeline .date { order:1 !important; }
    #association #histoire .timeline .image { order:2 !important; margin-bottom:15px; }
    #association #histoire .timeline .description { order:3 !important; padding:0 !important;}

    #association #histoire .timeline li:first-child:before { background:none; }
    #association #histoire .timeline li:first-child .image img { width:100%; position:static; left:auto; }
    #association #histoire .timeline li:first-child .description { color:#000; }
    #association #histoire .timeline li:first-child .image .caption { display:none; }
    #association #histoire .timeline li:first-child .intro { color:#000; padding:0; margin-bottom:30px; }

    #association #histoire .timeline li:last-child:before { background:#fff; }
    #association #histoire .timeline li:last-child .image img { position:static; width:100%; left:auto; }
    #association #histoire .timeline li:last-child .description { color:#000; }

    #association #construction .video .caption { width:50%; }
    #association #construction .video .caption .shape,
    #association #construction .video .caption .text { display:none; }

    #reservation #conditions .intro .left { display:none; }
    #reservation #conditions .documents .image { display:none; }

    #soutenir #pourquoi .shape { display:none; }
    #soutenir #pourquoi .caption { position:static; color:#76ce5c; }
    #soutenir #aider h3 { text-align:left !important; }
    #soutenir #aider h3 img { display:none; }

    #soutenir #aider .dons .form #card-number { border-bottom:1px solid #fff; border-right:none; }
}