/*
CSS by Manu LECHAT
https://e-lechat.com
*/




/*

/^^     /^^        /^^         /^ /^^^      /^^^^
 /^^   /^^       /^^  /^^       /^^        /^^
  /^^ /^^       /^^   /^^       /^^          /^^^
   /^/^^        /^^   /^^       /^^            /^^
    /^^           /^^ /^^^     /^^^        /^^

*/

:root {
  --black : "black"; --body_bg: #fff; --color_alt: #E22A58; /* --color_alt: #ff5a5f; */
  --color_theme : #E22A58; /* --color_theme : #ff5a5f; */
  --color_theme_hover: #ff5a5f; --space_unit: 1vw; --padding_v_sections: 60px; --site_max_width: 1280px; --site_slim_width: 920px; --fontSize_unit: 1rem; --gut_gap: 3rem
}


/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/


/* globals */

::selection {  background-color: rgba(0, 0, 0, 0.3); opacity: 0.1; transition: all .3s; ;  text-shadow: none; }
* {  box-sizing: border-box; outline: none;   }
html{ min-height: 100vh; background: white; font-family: "Roboto", serif;   font-optical-sizing: auto;  font-weight: 500; color: var(--color_txt);  min-height: 100vh;  top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;  }
body{ background: white; min-height: 100vh; font-size: 1rem; line-height: 1.35em;  overflow-x: hidden;  width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
body.shownav{ overflow: hidden; }
div{  position: relative; display: block;   }
header, section, main{ width: 100vw; }
img{ position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ margin: 0;  list-style: none; padding: 0px;  }
h1{  text-transform: uppercase; font-weight: 800;  }
h1,h2,h3,h4{ margin-block-start: 0; margin-block-end: 0; width: fit-content;   display: block; margin: 0; clear: both; break-after: always;  font-size: 1em; line-height: 1em; letter-spacing: 0;  font-weight: 400 } 
span{ display: inline-block; }
a{ width: fit-content;  position: relative; color: var(--color_txt);  text-align: left; text-decoration: none;  }
a:hover{ cursor: pointer; }
p{  clear: both; display: block; padding: 0; margin: 0;  line-height: 1.45em;   }
p a{ text-decoration: underline;  color: var(--color_theme_dark); }
p a:hover{ text-decoration: underline; }


u{ position: relative; text-decoration: none; z-index:2;  }
u::before{  pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; position: absolute; transform: rotate(2deg); z-index:1;  top: 0.3em; left: 0; width: 100%; height: .8em; background-color: var(--color_theme); content: "";  }
iframe{ border: none; width: 100%; height: 100%; margin: 0; }

/* utils  */

.hidden {  display: none; }

/* typography */

.txt_14{ font-size: .8rem ;  }
.txt_16{ font-size: 1rem ; }
.txt_18{ font-size: 1.125rem ; }
.txt_21{ font-size: 1.3rem ; }
.txt_26{ font-size: 1.625rem ; }
.txt_48{ font-size: 3rem ; }
.txt_64{  font-size: 4rem ;  }
.txt_80 { font-size: 5rem ;  letter-spacing: -0.02em; line-height: 1.15em;  }
.maj{ text-transform: uppercase;  }
.titre{  margin-bottom: 0.25em!important; }
.bold{  font-weight: 800; }
.semibold{  font-weight: 600; }
.bold .em{  font-style: italic;  }
.txt_color{ color: var(--color_alt); }
.txt_centred{ text-align: center; margin: auto; }
.italic{ font-style: italic; }


/* links */

.bt_wrapper{ display: flex; gap: 1rem; align-items: center; }
.bt_wrapper .icon{ width: 24px; height: 24px; display: block;}
.bt_wrapper .icon svg{  position: absolute; width: 24px; height: 24px; overflow: hidden; }
a.over_underline{  width: fit-content;}
a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); }
a.over_underline:hover:after{ width:100%;  }
a.bt_alt{ text-transform: uppercase; font-size: .8rem; border-radius: 40px;  border: 1px solid #000; display: flex;  padding: 12px 20px;  justify-content: center; align-items: center;  gap: 10px; }
a.bt_alt:hover{ border-color: var(--color_alt); color: var(--color_alt);}
a.bt_cta{ text-transform: uppercase;  font-size: .8rem; color:white; border-radius: 40px; background: var(--color_theme); display: flex;  padding: 12px 20px;  justify-content: center; align-items: center;  gap: 10px; }
a.bt_cta:hover{ background: var(--color_theme_hover); }

/* containers */

.main_container{ padding: 2rem; }
.page_wraper{ min-height: 60vh; }
.container{ width: 100%; max-width: var(--site_max_width); margin: auto;  }
.container_slim{ width: 100%; max-width: var(--site_slim_width);   margin: auto; }
.container_flex{  display: flex; gap: var(--page_grid_gap); }
.container_flex .col1{ width: 50%;  }
.container_flex .col2{ width: 50%;  }


/* topbar */

.topbar{ display: flex; justify-content: space-between;  }
.topbar .logo{ width: 244px }

/* section_hero */

.section_hero{ padding: var(--padding_v_sections) 0;  display: flex; justify-items: center; flex-direction: column; }
.section_hero .hero_content{ gap: 2rem; display: flex; align-items: center;flex-direction: column; }
.section_hero .hero_content .lines_wrapper{ gap: .6rem; display: flex; align-items: center;flex-direction: column; }
.section_hero .hero_content .ligne { display: flex; gap: 1em; align-items: center; }
.section_hero .ligne span { z-index: 3; line-height: 1.3em;  display: flex;  overflow: hidden;  position: relative; }
.section_hero .ligne span .inner { display: inline-block;  transform: translateY(120%); }
.section_hero .image_wrapper {  display: inline-block;  position: relative; }
.section_hero .image_wrapper img{ width: 120px; height: 80px; object-fit: cover; z-index: 1; position: relative; border-radius: 1rem; }
.section_hero .img_mask {  z-index: 2;  content: '';  position: absolute;  display: block;  top: 0;  right: 0;  width: 100%;  height: 100%;  z-index: 111;  background: var(--body_bg); }
.section_hero .accroche{ text-align: center;  }

/* section_presentation */

.section_presentation{  padding: var(--padding_v_sections) 0; }
.section_presentation .cols{ display: flex; gap: var(--gut_gap); justify-content: space-between; }
.section_presentation .col1{ display: flex; flex-direction: column;  gap: 1.2rem; max-width: 300px; }
.section_presentation .col2{ display: flex; flex-direction: column;  gap: var(--gut_gap);  }
.section_presentation .img_rounded{ width: 10rem; height: 10rem; border-radius: 10rem; }
.section_presentation .img_rounded img{ filter: saturate(0); }


/* section_homesweethome */

.section_homesweethome{  display: flex; justify-content: center;  padding-bottom: var(--padding_v_sections);}

.section_homesweethome .homesweethome_wrapper{  width: 100%; }
.section_homesweethome .homesweethome_wrapper img{ width: 100%; }
.section_homesweethome .texte1{ min-width: 10ch; position: absolute; top: 110px; right: 610px; }
.section_homesweethome .texte2{ min-width: 10ch; position: absolute; top: 110px; left: 610px; }
.section_homesweethome .texte3{ min-width: 10ch; position: absolute; top: 430px;  right: 490px; }
.section_homesweethome .texte4{ min-width: 10ch; position: absolute; top: 440px; left: 570px; }
.section_homesweethome .homesweethome {  opacity: 0; transform: scale(0.8); }
.section_homesweethome .texte1, .texte2, .texte3, .texte4 { opacity: 0; }
.section_homesweethome .fleche{ width: 100px; height: 10px; background-image: url("../images/arrow.png"); position: absolute; background-repeat: no-repeat; background-size: contain; }
.section_homesweethome .texte1 .fleche{ transform: rotate(20deg); right: -70px; top: 70px; }
.section_homesweethome .texte2 .fleche{ transform: rotate(160deg); right: 90px; top: 70px; }
.section_homesweethome .texte3 .fleche{ transform: rotate(-30deg); right: -100px; top: 10px; }
.section_homesweethome .texte4 .fleche{ transform: rotate(210deg); right: 130px; top: 0; }

/* faq */

.composant_faq {  padding: var(--padding_v_sections) 0;  }
.composant_faq .faq_question{  border-bottom:2px solid rgba(189, 120, 84, 0.10);  transition: all .2s; width: 100%; font-weight: 700; padding: 8px 0;  }
.composant_faq .faq_question::after{ content: "+"; font-weight: bold; font-size: 32px; position: absolute; right: 10px; }
.composant_faq .faq_question:hover{ width: 100%; font-weight: 700; padding: 8px 0; color: var(--color_theme);  border-bottom: 2px solid var(--color_theme); cursor: pointer; padding-left: 5px; }
.composant_faq .faq_question.show{ width: 100%; font-weight: 700; padding: 8px 0; color: var(--color_theme);  border-bottom: 2px solid var(--color_theme); cursor: pointer; padding-left: 0px; }
.composant_faq .faq_question.show:after{ content: "-"; font-weight: bold; font-size: 32px; position: absolute; right: 10px; }
.composant_faq .faq_answer{  transition: all.3s ease; width: 100%;   padding: 0px 0; max-height: 0; overflow: hidden;  }
.composant_faq .faq_answer.show {  max-height: 300px; padding: 20px 0;  }

/* section_gallery */

.section_gallerie{  padding: var(--padding_v_sections) 0;}

/* section_prestations */

.section_prestations{  padding: var(--padding_v_sections) 0; }
.section_prestations .cols{ display: flex; gap: var(--gut_gap); margin-top: 60px;  }
.section_prestations .col1{ width: 50%;  }
.section_prestations .col2{ width: 50%;  }
.section_prestations strong{ color: var(--color_alt); font-size: 1.2em;  }

/* section_faq */

.section_faq{  padding: var(--padding_v_sections) 0; }

/* section_votre_projet */

.section_votre_projet{  padding: var(--padding_v_sections) 0; }
.section_votre_projet .cols{ display: flex; gap: var(--gut_gap); margin-top: 60px;  }
.section_votre_projet .col1{ width: 50%; display: flex; justify-content: end;  }
.section_votre_projet .col2{ width: 50%;  }
.form_style {  max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background: #fff; }
.form_flex{ display: flex; flex-direction: column; gap: 1rem; }
.col2 h2 { font-size: 1.5em; margin-bottom: 1em; color: #333; }
.section_votre_projet ul {  list-style: none; padding: 0;  width: 100%; }
li {  margin-bottom: 10px; }
.toggle {  display: flex; align-items: center; cursor: pointer; }
.toggle input {  display: none; }
.slider {  width: 40px; height: 20px; background-color: #ccc; border-radius: 50px; position: relative; margin-right: 10px; transition: background-color 0.3s; }
.slider::before {  content: ""; position: absolute; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; top: 1px; left: 1px; transition: transform 0.3s; }
.toggle input:checked + .slider {  background-color:  var(--color_theme); }
.toggle input:checked + .slider::before { transform: translateX(20px); }
.surface { margin: 20px 0; }
.surface label {  display: block; margin-bottom: 5px; color: #333; }
.form_style input { padding: 8px; border: 1px solid #ddd; border-radius: 5px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.surface input { width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 5px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.btn {  width: auto; padding: 10px; font-size: 1em; color: #fff; background-color: var(--color_theme); border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; }
.btn:hover {  background-color: #e04850; }




/* footer */


.footer{  border-top:2px solid rgba(189, 120, 84, 0.10); padding: var(--padding_v_sections) 0; }
.footer .cols{ display: flex; justify-content: space-between;  }
.footer .cols .col{ width:50%  }
.footer .cols .col2{ display: flex;  align-items: end; justify-content: end; }
.footer .logo{ width: 180px }

/*


/^^^^^^^                                                                        
/^^    /^^                                                                      
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^ 
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^  
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^   
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^    
                                            /^^                                 


*/


@media ( min-width: 1920px){

  :root {
  --grid_unit: 260px; }

}
@media ( max-width: 1280px){

    .txt_80{ font-size: 6vw; }
    .section_hero .image_wrapper{ width: 14vw; border-radius: 3vw; height: 10vw; aspect-ratio: 2;}

}



@media ( max-width: 800px){

  .main_container{ padding: 1rem; }
  .txt_48{ font-size: 2rem; }
  .txt_80{ font-size: 8vw; }
  .txt_64{  font-size: 2rem;  }
  .topbar .logo{ width: 35vw }
  .topbar .txt_14{ font-size: .6rem; }
  .topbar .txt_16{ font-size: .8rem; }
  .txt_18{ font-size: 1rem; }
  .txt_devis{ display: none!important; }
  .topbar .bt_cta{ display: none; }
  .section_prestations strong{ font-size: 1rem; }
  .topbar .nav .bt_wrapper{ flex-direction: column; align-items: end; }
  a.bt_alt { font-size: .8rem; padding: 1em; }
  a.bt_cta { font-size: .8rem; padding: 1em; }
  .section_presentation{ padding: 0%; }
  .section_hero .accroche{  font-size: .8rem; max-width: 32ch; }
  .section_presentation .cols{ flex-direction: column; }
  .section_presentation .col1{ padding-right: 0; }
  .section_presentation .col2{ padding-right: 0; }
  .composant_faq .faq_question{ font-size: 1rem!important; padding-right: 3em;  }
  .composant_faq .faq_question::after { font-size: 1rem!important;  }
  .composant_faq .faq_answer{ font-size: .8rem!important;   }
  .section_votre_projet .cols { flex-direction: column;  align-content: center; align-items: center; }
  .section_votre_projet .col1{ width: 80%; }
  .section_votre_projet .col2{ width: 80%; }
  .footer .cols {    flex-direction: column; gap: 1rem;  align-items: center; } 
  .footer .cols .col { width: 100%;  display: flex;  flex-direction: column; align-items: center;  }
  .footer .cols .col span{ text-align: center; }
  .section_homesweethome .texte1{ top: 20px;  right: 450px; }
  .section_homesweethome .texte2{ top: 110px; left: 460px;}
  .section_homesweethome .texte3{ top: 320px; right: 360px; }
  .section_homesweethome .texte4{ top: 320px; left: 440px; }
  .section_prestations .cols{ flex-direction: column; }
  .section_prestations .cols .col{ width: 100%; }
  .section_prestations .cols{ margin-top: 3rem; gap: 0; }
  .section_presentation .col1{     align-items: center;  }
  .section_presentation .col1 p{   text-align: center; }
  .section_presentation .cols {    align-items: center;  }
}


@keyframes fadeIn{
  to { opacity: 1; transform:translate3D(0,0,0) }
}



@keyframes anim_contact_popup{
  0% {  opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes anim_titre_banner{
  0% {   width: 100%;   }
  100% {  width: 0%; }
}


@keyframes loop{
  0% {
    transform: rotateZ(0deg)    ; }
  50% {
    transform: rotateZ(175deg) ; }
  100% {
    transform: rotateZ(350deg)  ; }
}

@keyframes anim_h1_mask{
  0% {   width: 130%; left: 0;   }
  100% {  width: 0%; left: 130%; }
}


@keyframes anim_h1_submask{
  10% {   width: 0%; left: 0;   }
  50% {   width: 80%; left: -2%;   }
  100% {  width: 0%; left: 102%; }
}

@keyframes anim_h1{
  0% { opacity: 0; transform: translate3d(10%,0,0) scaleX(1.2);  }
  100% { opacity: 1; transform: translateX(0px,0,0) scaleX(1); }
}


@keyframes anim_img_intro{
  0%  { opacity: 0; transform:scale(1.05) rotate(2deg)}
  100%  { opacity: 1; transform:scale(1) rotate(0deg) }
}


@keyframes anim_img_header{
  0%  { filter: brightness(10) grayscale(1);}
  100%  { filter: brightness(1.3) grayscale(1);}
}