/*
Theme Name: MOODUS
Author: Anthony, Les Imageurs
Description: Template créé pour le site de Moodus
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moodus
*/

:root {
  --cl-blanc: #ffffff;
  --cl-gris-clair : #f8f8f8;
  --cl-gris : #E5E7EB;
  --cl-gris-fonce : #2c2c2c;
  --cl-gris-sombre: #111827;
  --cl-noir: #000;
}

.columns-3.is-layout-flex{gap:2rem; align-items:inherit; width:72rem; max-width:100%; margin:0 auto;}
.columns-3 .wp-block-group{width:calc(33.333% - 1.666rem);}
.columns-3 .wp-block-group:hover{background-color:var(--cl-blanc) !important;}

.realisations-container{display:flex; flex-wrap:wrap; gap:2rem;}
.realisation{flex:0 0 calc(33.3333% - 1.666rem);}
.realisation__preview{position:relative; overflow:hidden;}
.realisation__preview:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 80%)}
.realisation__preview h3{position:absolute; bottom:0; left:0; width:100%; z-index:3; color:var(--cl-blanc); font-size:120%; text-align:center; padding:30px;}
.realisation__preview img{width:100%; aspect-ratio:1.56; object-fit:cover; transition:0.3s all ease 0s; display:block;}
.realisation__preview:hover img{scale:1.1}

.realisation__overlay{display:none; position:fixed; inset:0; background-color:rgba(0, 0, 0, 0.8); z-index:100;}
.realisation.active .realisation__overlay{display:block;}

.realisation__popup__controls{border-bottom:1px solid rgba(255, 255, 255, 0.2); color:var(--cl-blanc); display:flex; justify-content:space-between; align-items:center;}
.realisation__popup__controls h3{font-size:140%; padding:10px;}

.realisation__popup__btn{display:flex; color:var(--cl-blanc); font-size:150%; cursor:pointer;}
.realisation__popup__btn .fa-solid{padding:10px;}
.realisation__popup__btn .fa-solid:hover{background-color:var(--cl-blanc); color:var(--cl-noir)}

.realisation__popup__slider{height:calc(100dvh - 47px); padding:10px;}
.realisation__popup__slider .swiper{height:100%;}
.realisation__popup__slider img{display:block; margin:0 auto; max-height:90vh; object-fit:cover; height:100%;}

.wp-block-column.has-background{padding:15px;}

.mail, .tel{margin:0;}
.mail:before, .tel:before{font-family:"Font Awesome 6 free"; font-weight:bold; margin-right:8px;}
.mail:before{content:"\f0e0";}
.tel:before{content:"\f095";}

.wpcf7-form p{display:flex; gap:1.5rem 1rem; flex-wrap:wrap; justify-content:center;}
.wpcf7-form p br{display:none;}
.wpcf7-form-control-wrap{flex:0 0 calc(50% - .5rem);}
.wpcf7-form-control-wrap.full{flex-basis:100%;}
.wpcf7-form input, .wpcf7-form select, .wpcf7-form textarea{border:1px solid rgba(255, 255, 255, 0.2); padding:0.75rem 1rem; width:100%; background-color:rgba(255,255,255,0.1); color:var(--cl-blanc); font-size:100%; outline:none; font-weight:500; font-family:"Jost", sans-serif;}
.wpcf7-form input:focus, .wpcf7-form textarea:focus{border:1px solid rgba(255, 255, 255, 1);}
.wpcf7-form textarea{height:100px;}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder{color:var(--cl-blanc); opacity:0.9}
.wpcf7-form input[type=submit]{width:max-content; background-color:var(--cl-blanc); color:var(--cl-noir); border:1px solid var(--cl-blanc); padding:1rem 2rem;}
.wpcf7-form input[type=submit]:hover{background-color:transparent; color:var(--cl-blanc)}

.aiowps-captcha, .aiowps-captcha-equation{color:var(--cl-blanc); justify-content:flex-start;}

.form-container{position:relative;}
.wpcf7-spinner{position:absolute; bottom:15px; right:15px;}
.wpcf7-response-output{color:var(--cl-blanc)}

#map{height:600px;}
.leaflet-control-zoom a{color:var(--cl-noir) !important}

.footer{border-top:1px solid rgba(255, 255, 255, 0.2);}
.footer .wp-block-group.is-layout-flex{gap:0.5rem 2rem;}
.footer a{text-decoration:none;}



@media all and (max-width:991px){
  .realisation{flex-basis:calc(50% - 1rem);}
  .realisation__popup__slider img{height:auto;}
}

@media all and (max-width:781px){
  .columns-3 .wp-block-group{width:calc(50% - 1rem);}
}

@media all and (max-width:600px){
  .columns-3 .wp-block-group{width:100%;}
  .realisation{flex-basis:100%;}
  .realisation__popup__controls{flex-wrap:wrap;}
  .realisation__popup__controls h3{font-size:120%;}
  .realisation__popup__btn{flex:0 0 100%; justify-content:flex-end;}

  .wpcf7-form-control-wrap{flex-basis:100%;}

  #map{height:60dvh;}

}


.page-int h2{margin:40px 0 15px;}
.page-int h3{margin:30px 0 15px;}
.page-int a{color:var(--cl-noir); text-decoration:underline;}
.page-int.container{width:960px; max-width:100%;}
.page-int .footer a{color:var(--cl-blanc); text-decoration:none ;}