/*
Theme Name: THEME FLORENT MEYLAN ©
Theme URI: Url du thème
Description: SUPER THEME PORTFOLIO
Version: 1
Author: JULI
MON THEME THEME JULIWEB || copyright 2024
*/

@import url('layout/reset.css');


/*FONTS*


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

a {
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  margin: 0;
  padding: 0;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: 700;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

ul {
  list-style-type: none;
}

/*VARIABLES*/
/*COLORS*/
/*SIZES*/
/*FONTS*/
/*COLORS*/
/*POLICES*/
/*PARAMETRES GENERAUX*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  cursor: url('https://florentmeylan.ch/wp-content/uploads/2024/11/flo-mouse.png')!important;


}

/****************************************************************************/
h2 {
  font-family: "Raleway", sans-serif;
}

p {
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
}

img {
  display: block;
}

section {
  padding: 0px 0px 0px 0px;
  margin: 0px auto;
}

/**********************NAVIGATION*****************/
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  
}

.container-2 {
  
  height: auto;

}

:root {
  --text-color: #111;
  --bg-color: #b9b3a9;
}

body {
 
  overscroll-behavior: none;
}

img.logo{
    width:70px!important;
}


.container-vertical{
      height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px); /* Chaque section prend toute la hauteur de l'écran */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    

}


.parallax {
  height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px); /* Chaque section prend toute la hauteur de l'écran */
    
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            scroll-snap-align: start; /* Aligne les sections au début */
            overflow:hidden;
            cursor: url('https://florentmeylan.ch/wp-content/uploads/2024/10/favicon-96x96-1.png');
          }


.content {
 max-width: 800px;
            width: 80%;
            
             height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
   
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
}

.responsive-image {
   max-width: 60%;
    height: auto;
    object-fit: contain;
}

.container-vertical h2.bottom-text  {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-family: Arial;
  font-weight: 100;
  font-size: 14px;
  text-decoration: none;

}


section.horizontal-scrolling{
    position: relative;
  top: 0;
  left: 0;
/*  note vh and vw switched  */
  width: 100vh; 
  height: 100vw;
  overflow-x: auto;
  overflow-y: scroll;
/*   scroll-snap-type: y mandatory; */
}
section.horizontal-scrolling article.horizontal-2{
  display: flex;
  flex-direction: row;
  width: 100vh;
  height:100vw;
 
  
}
div.fullwidth{
  width: 100vw;
      height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
   

/*   scroll-snap-align: start; */
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 3rem;
/*  backface visibility keeps font from looking weird  */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
div.fullwidth img.full{
  width: 100vw;
  height: 100vh;
object-fit: contain;}

  .horizontal-section h2.bottom-text-h  {
  position: absolute;
  bottom: 20px;
  width: 100%;
  font-family: Arial;
  font-weight: 100;
  font-size: 14px;
  text-decoration: none;
  text-align: center;

}


        .horizontal-section {
       width: 100%;
        height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
   
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
     position: relative;
    
   }
 

        .horizontal-section::-webkit-scrollbar {
            display: none;
        }

        .image-container {
            display: flex;
    justify-content: flex-start;
    width: 100%;
   }

.image-horizontal-center{
 
  width:100%;
}
.image-container img {
    width: 80%;
    height: auto;
    max-width: 500px;
    max-height: 500px;
    object-fit: contain;
}


.horizontal-section-2 h2.bottom-text-h  {
  position: fixed;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-family: Arial;
  font-weight: 100;
  font-size: 16px;
  text-decoration: none;

}


        

/* Positionnement nécessaire pour les flèches en survol */
.parallax,
.horizontal-section,
.horizontal-section-slider {
  position: relative;
}

/* Flèches haut / bas pour les sections verticales */
.parallax::before,
.parallax::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.parallax::before {
  top: 16px;
  background: url("images/arrow-up.png") center center / contain no-repeat;
}

.parallax::after {
  bottom: 16px;
  background: url("images/arrow-down.png") center center / contain no-repeat;
}

/* Affichage au survol */
.parallax:hover::before,
.parallax:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Flèches gauche / droite pour les sections horizontales (y compris slider) */
.horizontal-section::before,
.horizontal-section::after,
.horizontal-section-slider::before,
.horizontal-section-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.horizontal-section::before,
.horizontal-section-slider::before {
  left: 16px;
  background: url("https://test-flo.juliweb.ch/wp-content/uploads/2024/10/favicon-96x96-1.png") center center / contain no-repeat;
  transform: translateX(-4px);
}

.horizontal-section::after,
.horizontal-section-slider::after {
  right: 16px;
  background: url("https://test-flo.juliweb.ch/wp-content/uploads/2024/10/favicon-96x96-1.png") center center / contain no-repeat;
}

/* Affichage au survol sur les horizontales */
.horizontal-section:hover::before,
.horizontal-section:hover::after,
.horizontal-section-slider:hover::before,
.horizontal-section-slider:hover::after {
  opacity: 1;
  transform: translateX(0);
}



footer {
  width: 100%;
  height: 108px;
  background: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
  position: fixed;
  bottom: 0;
  box-shadow: rgb(0 0 0 / 50%) 0px -6px 6px -6px;
}

div.icons {
  width: 20%;
  margin: 0px auto;
}

div.icons ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: space-between;
  -ms-flex-align: space-between;
  display: -webkit-flex;
  /* Safari */
}

img.realtive {
  width: 24px;
  height: 24px;
  color: #fff;
  display: block;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

img.hover {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

div.icons ul li a {
  position: relative;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

div.icons ul li a:hover img.hover {
  opacity: 1;
}

div.icons ul li a:hover img.realtive {
  opacity: 0;
}

footer p {
  color: #fff;
  font-family: Arial;
  font-size: 0.8em;
  text-align: center;
  margin-top: 40px;
}

footer img.logo-2{
      width: 70px;
    margin: -12px auto;
    transition: 0.5s ease;

}

 img.logo-2:hover{
   opacity:0.5!important;}
 
   .horizontal-slider-container    {
          height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
     /* Fallback pour Safari mobile */
    scroll-snap-align: start; /* S'intègre dans le flux vertical */
    overflow: hidden;
   }

  .horizontal-section-slider {
        height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
     /* Fallback pour Safari mobile */
   
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    position: relative;

            
        }

        /* Cache la barre de défilement */
        .horizontal-section-slider::-webkit-scrollbar {
            display: none;
        }

        /* Conteneur des images */
          .slide-3 {
            min-width: 100vw;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: center;
        height: -webkit-calc(100vh - 108px);
    height: -moz-calc(100vh - 108px);
    height: -ms-calc(100vh - 108px);
    height: calc(100vh - 108px);
     /* Fallback pour Safari mobile */
    
        }
          /* Texte toujours en bas */
        .slide-3 .text {
            position: absolute;
            bottom: 20px;  /* À 20px du bas de l'écran */
            color: #000;  /* Couleur du texte, modifiable */
            font-size: 14px;
            text-align: center;
            width: 100%;
            font-family: arial;
        }

        /* Style des images */
        .slide-3 img {
            max-width: 550px;
            width: 60%;
            height: auto;
            object-fit: contain;

        }
       






div.info {
  width:100%!important;
  margin:0px auto;
  padding:30px;
}

div.center-info{
  max-width: 800px!important;
  width: 100%;
  margin:0px auto;

}
div.center-info img {
  display:block;
  width:100%!important;
}
.texte-info p h4{
  line-height:20px!important;
}
.texte-info p h4 span#text{
  line-height:20px!important;
}
div.texte-info{
  margin-top:60px!important;
}
div.texte-info p{
  font-family: Arial;
  font-size: 18px!important;
  line-height: 22px!important;
  margin-top:10px;
  margin-bottom: 0px;
  font-weight: 400;
}
div.credits p {
  font-family: Arial;
  font-size: 14px!important;
  line-height: 20px;
  margin-bottom: 60px;
 
}
div.credits{
  margin-bottom:40px!important;
  padding-bottom: 40px!important;
}
div.center-info h4{
  line-height: 20px;
}
div.center-info a{
  color:#000;

}
div.center-info a:hover{
  color:#bababa !important;
  transition: 0.5s ease ;
}

div.flex-icon-amis{
  display:flex;
  justify-content: space-between;
  flex-direction: row;
  
  width:100%;
  max-width: 800px;
  margin:0px auto;
}

div.flex-amis-text P{
  font-family: arial;
  font-size: 16px;
  line-height: 20px;
  width: 20%;
}

ul.flex{
  display: flex;
  width:100%;
  margin-bottom:100px;
}

li.logo-partners{
  width:25%;
}
a#logos-amis{
  width: 100%;
  display: block;
  position: relative;
}

img.logo-partenaire{
 
     display: block;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    max-height: 100px;
    height:auto;
}
img.logo-partenaire-b{

      position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    max-height: 100px;
    height: auto;
}


a#logos-amis:hover img.logo-partenaire-b{
  opacity:1;
}



       .* Responsive */




        /* Responsive */
        @media (max-width: 1300px) {
            .image-container-2 img {
                max-width: 600px;
                margin: :0px auto;
                align-items: center;
                align-content: center;
                align-self: center;}

            .image-container img {
                max-width: 600px;}

            


          .slide-3 img {
            max-width: 600px;  /* Largeur maximale des images */
            width: 80%;
            height: auto;}


          .content {
            max-width: 600px;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;}

          div.icons {
            width: 50%;
            margin: 0px auto;}

        }
        @media (max-width: 1130px){
          div.icons {
            width: 50%;
            margin: 0px auto;
            }

        }

        @media (max-width: 878px) {
            .image-container-2 img {
                max-width: 400px;
                margin:0px auto;
                align-items: center;
                align-content: center;
                align-self: center;

            }


            div.icons {
            width: 60%;
            margin: 0px auto;
            }

            
          


    .image-container img {
        max-width: 400px;
        width: 90%;
    }
    .horizontal-slider-container {height:100vw; margin:0px!important}
    .slide-3{
              height:calc(100dvh - 108px);
            }
    .parallax{height:calc(100dvh - 108px);
            }


        }

        @media (max-width: 480px) {
            .image-container-2 img {
                max-width: 300px;
                align-items: center;
                align-content: center;
                align-self: center;

            }
             .horizontal-slider-container { height:calc(100dvh - 108px); margin-bottom:0px!important; padding-bottom:0px}

            .image-container img{
              max-width: 300px;
              width:70%;
             
            }
            .slide-3{
              height:calc(100dvh - 100px);
              object-fit: contain;
            }
             .horizontal-slider-container:last-child{
              height:100vh !important;
             }
            
            .slide-3 img {
              max-width: 300px;
              width: 70%;
              max-height: 300px;
              overflow: hidden;
            }

              .container-vertical h2.bottom-text {
                
                bottom:20px!important;

                 
              }
              .parallax{
                height:calc(100dvh - 108px);

              }
              .slide-3 .text {
      
                padding:0px 20px;
                
              }
              .horizontal-section  h2.bottom-text-h { bottom:20px; padding:0px 20px;
               }


}