/*!
Theme Name: Oxygen
Theme URI: http://www.samloorie.fr
Version: 4.14.1
Description: Theme enfant Oxygen
Author: Samloorie
Template: Divi
*/

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/**** Général ****/

@font-face {
  font-family: 'ElegantIcons';
  src: url('fonts/ElegantIcons.woff') format('woff'),
    url('fonts/ElegantIcons.ttf') format('truetype'),
}

@font-face {
  font-family: 'Havana';
  src: url('font/HV Weist Havanah Trial.ttf') format('truetype');
}


html  {
  --txt: #231E35; 
  --couleur1: #00a254; /* vert */
  --couleur2: #4b5b71;/* bleu gris */
  --couleur3: #e8f2ec; /* vert leger  */
  --fond: #ffffff;/*#e7d8c6;*/ /*beige clair*/
  --ombre : 0 0px 80px 0px rgba(0, 0, 0, 0.08);
  --encadre :4px solid #5f413c ;
  --titre : "Cormorant Garamond", serif;
}


.couleur1{ color:var(--couleur1)!important;}
.couleur2{ color:var(--couleur2)!important;}
.couleur3{ color:var(--couleur3)!important;}
.couleur4{ color:var(--couleur4)!important;}
.ombre {box-shadow: var(--ombre);}
.bck1, .bck2, .bck3, .bck4  { background: rgb(255,255,255,0);}


.bck1{ background: linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(223,205,255,1) 65%); }


.bck2{ background: linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(254,191,210,1) 65%); }
.bck3{ background: linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(157,231,215,1) 65%); }
.bck4{ background: linear-gradient(180deg, rgba(255,255,255,0) 65%, rgba(251,250,141,1) 65%); }
.fond { background-color:var(--fond)!important;}
.focus {background-color: #fff; box-shadow:var(--ombre); padding:20px; margin:20px auto; z-index:10; border-radius:15px;}

.encadre {padding:30px; margin:20px auto; border:1px solid var(--txt);}

.pastille {
  display: inline-block;
  color: #00a254 !important;
  background-color: #e1eae5;
  border-radius: 5px;
  font-size: 0.975rem;
  padding: 0.375rem 1rem;
  margin-bottom:10px;
}

.more {font-size: 120%; }
.bigtitre { font-size:3em; line-height:1.1em;}
.mnuscrit { font-family: var(--titre);
  letter-spacing: -1px;}


.surligne {
 background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 51%, rgba(0,162,84,0.5) 51%);
}


/* ---------------------------
Typo générale
-----------------------------*/

/*** mettre un fond **/

  .et_pb_section, body, .titre, .entry-content, #main-content, #et-main-area {background-color:#f2f7f4;}

body { 
padding:0; margin:0;
font-weight: normal;
  font-family:"Montserrat", sans-serif;
  line-height: 1.5em;
  color: var(--txt);
 

}



/*debug diff texte blocs */

p, .et_pb_post p,
.et_pb_text,
.et_pb_text_inner, .et_pb_text_inner p { 
font-weight: normal;
  font-family:"Montserrat", sans-serif;
  line-height: 1.5em;
  color: var(--txt);
  
}

.entry-content a { color:var(--txt); border-bottom: 1px solid var(--txt); }
.entry-content a:hover { border-bottom: 1px solid transparent; font-style:italic;}

/*.page{ border:20px solid #ffffff!important;  }*/


h1, .et_main_title h1 { 
  color:var(--txt);
  font-size: 4em;
font-weight: 500;
  margin:10px 0;
  font-family: var(--titre);
	text-align:center;
}


h2 {
 font-family: var(--titre);
  color: var(--txt);
  font-weight: 900;
  margin: 10px 0 5px 0;
  line-height: 1.2em;

}
   

h3 { 
font-weight: 500;
	 font-family: var(--titre);
  font-size: 1.4em;font-family:var(--titre);
  color:var(--couleur1);
  
}

h4 { 
 font-family: var(--titre);
  line-height: 1.3em;
  font-weight: 800;}

  h5 { 
 font-size: 14px;
  line-height: 1.3em;
  color:var(--couleur1);
  text-transform: uppercase;
  font-weight:400;
line-height: 1.3em;
}

h6 { 
letter-spacing: 2px;
font-weight: 300;
  font-size: 0.9em;
}

 


blockquote, blockquote p {
margin: 30px 0;
  border-left: 0;
  padding-left: 0;
  font-size: 1.8em;
font-family: inherit;
	
 font-family: var(--titre);
  font-weight: 900 !important;
  color: var(--couleur1);
  font-style: italic;
}



hr {
 display: block;
  width: 100%;
  background: var(--txt);
	
  height: 1px;
  border: none;
  margin: 0 auto 1% auto;
  text-align: center;
      
}

#top-menu a {
 color: var(--txt);
  font-weight: 600;
display:inline-block;
position: relative;}



#main-content .container::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    
}

#top-menu li li a {
  padding: 2px 10px;
  width: 220px;
}

#main-header {box-shadow: 0 0 0 rgba(0,0,0,0);}


  #top-menu > .cta-menu > a {
  color: var(--txt);
  border:1px solid var(--txt);
  font-size: 14px;
  padding-left: 10px!important;
  display: inline-block;
  border-radius: 4px;
  position: relative;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px!important;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
}




#gallery-1 img {
  border: 0!important;
}


/*** centrer les textes verticalement***/

.centrer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
}

/* ---------------------------
header auto page classique
-----------------------------*/


.titre {
width: 100%;
  margin: 0 auto;
  padding: 3vh;
text-align:center;}
  

.titre .container{
margin:2% auto 2% 1%;
width: 80%;
  max-width: 1080px;}

.titre h1 {}

.titre .bloctitre {
  width:90%; margin:2% auto;
  display: flex;
  flex-direction: row-reverse; /* Inverser l'ordre des colonnes (cont1 et cont2) */
  width:90%!important;

}

 
.reduit  {max-width:700px; margin:4% auto;}



.filariane { 
/*display:inline-block;*/
padding-bottom: 1em;
padding-top: 1em;
display:block;
font-size:0.9em;
margin:0 auto;


}

.filariane a { 
font-weight:500;
}
.filariane a .breadcrumb_last{ 
font-style:italic;
font-weight:800;
} 

 .filariane li + li::before {
    content: "\e606";
    color: inherit;
    margin: 0 .5rem;
}


/** header V2*/

#et_main_title { 
     background-size: cover!important;
     background-position:center!important;
     background-color: var(--fond);
    padding-bottom:0!important;
  padding:0;
height: 30vh;
width: 96%;
margin:2% auto;

}

.titre2 {
  width: 80%;
  max-width: 900px;
  margin: auto;
  position: relative;
  margin: -50px auto 0 auto;
  padding:20px;
} 

/** pour les signles pages **/

.sgle-article .entry-content {
  padding:2vh 3vw;
}

.sgle-article .content-wrapper {
    position: relative; /* Ajout de la position relative au conteneur des deux éléments */
}

.sgle-article .content-left {
    width: 70%;
    padding: 3vh 2vw;
    box-sizing: border-box;
    position: relative; /* Ajout de la position relative pour gérer le z-index */
    z-index: 1; /* Position au-dessus de .content-right */
}

.sgle-article .content-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 80vh;
    overflow: auto; /* Ajout de défilement si nécessaire */
    z-index: 0; /* Position en-dessous de .content-left */
}



.et_pb_blog_grid .et_pb_post {
  border-color: var(--txt);
  background-color: transparent;
}

.et_pb_blog_grid .et_pb_post .post-meta, .et_pb_blog_grid .et_pb_post .post-meta a{
  color:var(--couleur1);
  font-size:1em;
  font-weight:900;
  text-transform:uppercase;
  text-decoration:none;
  font-family: "Barlow", sans-serif
}

/*** cadre blanc ***/

.et_pb_blog_grid .et_pb_image_container::before {
  left: 1rem;
  position: absolute;
  top: 1rem;
  height: calc(100% - 2rem);
  width: calc(100% - 2rem);
  border: 1px solid var(--txt);
  content: '';
  z-index: 2;
}


/* ---------------------------
TARIFS
-----------------------------*/

/** tablau **/


/* Styles de base pour la table */
.table-tarifs table, #page-id-19 table  {
  width: 100%;
  border-collapse: collapse;
}

.table-tarifs th, td {
  border-bottom: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* Style pour que la première cellule (td) de chaque ligne soit à 70% */
.table-tarifs td:first-child, 
#page-id-19 td:first-child {width: 70%; }

/* Alignement du contenu du deuxième td à droite */
.table-tarifs td:nth-child(2), 
#page-id-19  td:nth-child(2) { text-align: right!important;}

/* Media queries pour la réactivité */
@media screen and (max-width: 600px) {
  /* Réduire la largeur de la première cellule à 50% sur les petits écrans */
  .table-tarifs td:first-child, #page-id-19 tr td:first-child {
    width: 70%;
  }


}

/*@media screen and (max-width: 400px) {
  /* Réduire la largeur de la première cellule à 100% sur les écrans très petits */
  .table-tarifs td:first-child,  #page-id-19 tr  td:first-child {
    width: 70%;
  }
}




.entry-content tr td {
  border-bottom: 1px solid var(--txt);
  border-top:0; border-right: 0; border-left: 0;
  padding: 6px 0;
}

.entry-content tr td .apartirde {
 font-style:italic; font-size:0.7em; line-height:0.7em;
}


.note {
 font-style:italic; font-size:0.8em; line-height:0.8em;
}


.entry-content table:not(.variations) {
  border-bottom: 1px solid var(--txt);  border-left: 0; border-right: 0;
   border-top: 0;
}

.entry-content tr td {
  border-top: 1px solid transparent;

}
.table-tarifs th, td {
  border-bottom: 1px solid #000;
  padding: 8px 0;
  text-align: left;
}


/* ---------------------------
Style formulaire en colonne
-----------------------------*/

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, select, .wpcf7-select {
  width: 100%;
  font-size:1em;
  padding: 10px;
  margin:4px auto;
  background:var(--fond);
  border: 1px solid var(--txt);
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
      color:var(--txt);
        border-radius: 25px; 
          -moz-border-radius: 25px; 
          -webkit-border-radius: 25px; 
}
.wpcf7 input[type="text"]:focus{
    border: 1px solid #273249;

}

/*** special case à cocher **/
.wpcf7-list-item {
  display: block;
  margin: 0.2em;
}

/* Cibler les cases à cocher dans le formulaire Contact Form 7 */
span.wpcf7-checkbox input[type="checkbox"] {
  border: none !important; 
  background-color: var(--couleur2) !important; 
  padding: 0.5em;
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}

span.wpcf7-checkbox .wpcf7-list-item-label {
  margin-right: 0.5em;
}



.wpcf7-submit { 
background:transparent; 
color: var(--txt); 
 border-radius :0; 
border:1px solid var(--txt);
 margin:15px auto;
 font-family: "Barlow", sans-serif;
font-weight:900;
font-size:14px;
box-shadow: 5px 5px 0px 0px var(--txt); 
padding: 10px 20px;
border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  }
 
.wpcf7-submit:hover { border: 1px solid var(--txt); color: var(--txt); background:transparent; box-shadow: 10px 10px 0px 0px var(--couleur1); }



span.wpcf7-not-valid-tip{
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  background: #ff0000;
  padding: 5px;
}
div.wpcf7-validation-errors { 
  text-shadow: none;
  border: transparent;
  background: #f9cd00;
  padding: 5px;
  color: #9C6533;
  text-align: center;
  margin: 0;
  font-size: 12px;
}
div.wpcf7-mail-sent-ok{
  text-align: center;
  text-shadow: none;
  padding: 5px;
  font-size: 12px;
  background: var(--fond);
  border-color: var(--couleur2);
  color: #fff;
  margin: 0;
}

#formulaire-responsive {
  max-width:600px /*-- à modifier en fonction de la largeur désirée --*/;
  margin:0 auto;
        width:100%;
}

#formulaire-responsive h5 { }
#formulaire-responsive hr { margin: 3vh auto;}
.rang-form {
  width: 100%;
}
.demi-colonne, .colonne {
  float: left;
  position: relative;
  padding: 0.65rem;
  width:100%;
  -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
  .demi-colonne {
    width: 50%;
  }
}

/* ---------------------------
Footer
-----------------------------*/
#main-footer {
  color:#fff;  
}

.footer-widget .textwidget p {
  color:#ffff!important;
 
}


.et_pb_widget .image{float:center;
}

#footer-bottom {
}

#footer-info, #footer-info a {font-size:0.8em!important;}
#footer-info a {text-decoration: underline;}


.footer-widget h4{font-size:1.1em;}
.fwidget .et_pb_widget .widget_nav_menu {
color:#fff;}

.fwidget .et_pb_widget .widget_custom_html p {
color:#fff !important;}

.footer-widget li, .footer-widget li a, #footer-info {
    font-size: 1.15em;
} 


#footer-widgets .footer-widget li a {}



/**** Responsive *****/

/* Cacher les menus item-mobile sur desktop */
 .item-mobile {display: none!important;}


@media only screen and (max-width:980px) {
 
 #main-header.et-fixed-header {
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  }


 /* Afficher les menus item-mobile sur mobile */ .item-mobile { display: block!important; }
  
}



@media screen and (max-width: 800px)
{

      
        p {font-size: 1rem;}
        h1, .et_main_title h1 { 
 font-size: 25px;
 font-family: 'Catfiles';
  letter-spacing: -1px;
}

          h2 {font-size: 20px;line-height: 1em;margin: 10px 0 ;}   
            #et_main_title  .titre h1 , h1 {font-size: 30px;line-height: 1.2em;}   
          h3 { font-size: 14px; line-height:1.2em;}
            .big-title{font-size:30px;line-height:1.2em;}
            #et_main_title  { text-align:center;margin: 0 auto!important;}
          #et_main_title  .titre  {padding:10% 4%;}

        /* X icon in expanded mobile menu */
        .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        }

        /* Remove the top line in the mobile menu*/
        .et_mobile_menu {
        border-top:0;
        }

        /* Center-align moble menu items */

        .et_mobile_menu li {
        text-align:center !important;
        }
          
        .et_mobile_menu li li, .et_mobile_menu li ul {
        padding-left:0 !important;
        }

      /* Remove the animation to avoid delay */

      .mobile_nav.opened .et_mobile_menu {
      display:block !important;
      }

      .et_fixed_nav #main-header, .et_fixed_nav #top-header {
        position: fixed !important;}

        img.alignright {
        display: block;
        float: center !important;
        margin: 10px auto;
      }

        .et_pb_text_inner .et_pb_button {  display:block;}


      .et_mobile_menu {border-top: 0;}

      .sgle-article .content-wrapper {position: none;}

      .sgle-article .content-left {
        width: 100%; /* Prend toute la largeur disponible */
        padding: 20px;
        box-sizing: border-box;
        position: relative; /* Ajout de la position relative pour gérer le z-index */
        z-index: auto; /* Position au-dessus de .content-right */
    }

    .sgle-article .content-right {
        width: 100%; /* Prend toute la largeur disponible */
        height: auto; /* Ajuste la hauteur automatiquement */
        position: static; /* Revenir à la position normale dans le flux du document */
        z-index: auto; /* Réinitialiser le z-index */
    }

    .sgle-article .entry-content { padding:2vh 0;}


      body, p, .et_pb_post p, 
      .et_pb_text,
      .et_pb_text_inner, .et_pb_text_inner p  { font-size: 1.05rem;}
      .titre .container { padding: 2vh 0;}

      .bigtitre {font-size: 2em;}
    .container {width:94%;}
     .et_pb_row {width: 90%;}
     .titre   { padding: 2vh 1vw 2vh 1vw;text-align: center;} .filariane  {text-align:center;}


      h1 {font-size: 30px; line-height: 30px; text-align: center;}
      .et_pb_text_0 h1 {font-size: 2rem; text-align: center;}
      .entry-content h2, h2 {font-size: 25px; line-height: 25px;}
  
}