/*
Theme Name: Grpah'East oceanwp Child
Description: Theme enfant OWP for Graph'East
Author: DM
Author URI: 
Template: oceanwp
Version: 1
*/
@font-face {
    font-family: 'ModernAge';
    src: url('fonts/Modern Age.ttf')  format('truetype'),
      
}
@font-face {
    font-family: 'brandon-grotesque';
    src: url('fonts/brandon-grotesque-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/brandon-grotesque-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/brandon-grotesque-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/brandon-grotesque-regular#svgFontName') format('svg'); /* Legacy iOS */
}

:root {
    --blue:#8abfc5;
    --yellow: #fcd300;


}


body {
    font-family: 'brandon-grotesque', sans-serif;
}

.justifytxt{
  text-align: justify !important;
}

strong {
    font-weight: 700 !important;
}
/*
#top-bar{
    padding-top : 30px !important;
}

*/

.rounded-savoir{
  
  border :#8abfc5 3px solid !important;
   box-sizing: border-box !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rounded-savoir:hover {
  background-color: #8abfc5;
  border-color: #005f6a;
  transform: scale(1.05);
}

.rounded-savoir:hover h4 {
  color: #fff !important;
}

.rounded-savoir .img-hover {
  display:none;
}

.rounded-savoir:hover .img-hover {
  display: block;
}

.rounded-savoir:hover .img-default {
  display:none;
}

.oceanwp-post-list.two h2,
.oceanwp-post-list.two h2 a {
    text-transform: unset !important;
}

.oceanwp-post-list.two .slide-overlay, .oceanwp-post-list.two .oceanwp-post-category a, .oceanwp-post-list.two h2 a, .oceanwp-post-list.two .oceanwp-post-excerpt {
   font-family: 'brandon-grotesque'!important;
}

/*@media (max-width: 768px) {
    #wrap .oceanwp-post-list.one h2 {
        font-size: 16px !important;
    }
}*/

.oceanwp-post-list.two article {
    margin-right: 0px;
}

#btn-avis{
  font-family: 'ModernAge';
  color:#FFF;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#topimg {
  width:25%;
  height:auto;
}

.headercenter {
  display: flex;
  justify-content: center;
   margin-top:40px;
   margin-bottom:20px;
  
}
@media (max-width: 959px) {
    #topimg {
        width:50%;
        height:auto;
    }
	.headercenter {
		 /* top: 88px;*/
		}
}
.product-france{
  width:50px;
  height:auto;
  margin-right:1em;
}

  
.wc-category-filter {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
	 flex-wrap: wrap; 
    border-bottom: 1px solid #eee;
}

.wc-category-filter a {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    padding-bottom: 10px;
    color: #111;
    text-decoration: none;
    border-bottom: 2px solid transparent;
	white-space: nowrap;     
    padding: 6px 12px;
    border-radius: 20px;
}

.wc-category-filter a.active {
    border-bottom-color: #8abfc5; /* couleur active */
    color: #8abfc5;
}

/* Cache le select sur desktop */
#wc-cat-filter-mobile {
    display: none;
}

/* Breakpoint mobile */
@media screen and (max-width: 768px) {
    /* Cache la barre desktop */
    #wc-cat-filter {
        display: none;
    }
    
    /* Affiche le select */
    #wc-cat-filter-mobile {
        display: block;
    }
    
    /* Style minimal du select - s'adapte à votre design */
    #wc-cat-filter-mobile select {
        width: 100%;
        padding: 5px 15px;
        font-size: 20px; /* Évite zoom iOS */
        border: inherit; /* Reprend votre bordure existante si définie */
        border-radius: 10px;
        background-color: transparent;
        cursor: pointer;
    }
	.ti-widget[data-wkey="feed-instagram"][data-style=custom-style][data-widget-type=social]{
		padding-left:10px !important;
		padding-right:10px !important;
	}
}



/**Form**/
 form.wpcf7-form * {
  transition: 225ms; /* Tempère les transitions */
  }
  
  form.wpcf7-form label {
  cursor: pointer; /* Transforme le curseur en main */
  font-size: 1em; /* Gère la taille de la police des étiquettes */
  font-weight: bold; /* Passe les étiquettes en gras */
  }
  
  
  form.wpcf7-form input,
  form.wpcf7-form select,
  form.wpcf7-form textarea {
  background: #fff; /* Couleur du fond des cases */
  font-size: 1em; /* Gère la taille de la police des cases */
  margin: 1px; /* Ajout d'un espace autour des cases */
  border: 1px solid #000 ;
  font-weight:bold;
  }
  
textarea::placeholder { font-size: 1.2em;}
input::placeholder { font-size: 1.2em;}
  

  

  
  
  form.wpcf7-form input[type="submit"] {
  padding: 1em; /* Ajout d'un espace dans le bouton */

  box-shadow: none; /* Supprime l'ombre du bouton */

   /* Couleur du texte du bouton */
  text-decoration:none;  /* Supprime soulignement */
  font-size: 1em; /* Taille du texte du bouton */
  }

    span.wpcf7-not-valid-tip {

  font-size: 15px; /* Gère la taille du texte d'erreur */
  margin-top: 5px; /* Marge en haut du texte d'erreur */
  }
  
  div.wpcf7-response-output {
  padding: 1em !important;
  margin: 0 !important;
  }
  
  /* Supprimer couleur bordures tableau */
  .cf7resp table, .cf7resp table * {
  border-color: transparent;
  }

.cf7resp p {
    margin: 0px;
}
.cf7resp h4 {
    color:black;
}

.textarea-highlight {
    background-color: #fcd300 !important;
    transition: background-color 0.6s ease;
}

/* Masquer le bloc adresse de livraison dans WooCommerce Blocks */
.wc-block-checkout__shipping-fields,
.wc-block-components-address-form--shipping,
[data-step="shipping-address"],
.wc-block-components-checkout-step--shipping-address {
   /* display: none !important;*/
}

/* Masquer aussi le titre "Adresse de livraison" si besoin */
.wc-block-components-checkout-step__title[for="shipping-address"],
#shipping-address-heading {
   /* display: none !important;*/
}
/* Cibler le label du téléphone de facturation */
.wc-block-components-address-form__phone:has(#billing-phone) label {
    font-size: 0 !important; /* Force le masquage */
    color: transparent !important;
}

/* Réécrire le contenu */
.wc-block-components-address-form__phone:has(#billing-phone) label::before {
    content: "Numéro de téléphone (pour le suivi de la livraison)";
    font-size: 16px;
    color: #000; /* Remet la couleur du texte */
}
.wc-block-components-address-form__phone:has(#billing-phone) .wc-block-components-validation-error {
    display: none !important;
}
/* Forcer le style du bouton désactivé */
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-checkout-place-order-button.wc-block-components-button--disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #ccc !important;
}

/* Animation pour attirer l'attention sur le message */
.relais-required-message {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-box{
  text-align:center;
}
.footer-widget, .footer-widget p{
  margin-bottom:0  !important;
	font-size:large;
}

#suivez{
	text-align:center;
	font-size:1.5em;
}
#suivez a{
	
	margin:0.5em;
}


  #countdown {
            margin-top: 0px;
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .box {
            padding: 10px 15px;
            border: 1px solid #ddd;
            min-width: 90px;
        }

        .number {
            font-size: 4rem;
            font-weight: bold;
             text-align:center;
        }

        .label {
           /* font-size: 1.5rem;*/
            color: #fff;
            text-align:center;
        }

        @media (max-width: 768px) {
            .container {
                width: 95%;
            }
             .box {
            padding: 1px 2px;
            border: 1px solid #8abfc5;
            min-width: 70px;
        }
                .label {
            font-weight: bold;
            
        }
        }