/**
Theme Name: ChezFunFou
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chezfunfou
Template: astra
*/


/* ================================
	Typographie et responsive
	Tailles par défaut    
================================ 
h1 {
    font-size: 4.125rem !important;
}
h2 {
    font-size: 2rem !important;
}
h3 {
    font-size: 1.5rem !important;
}
p {
    font-size: 1.125rem !important;
}*/

/* Pour les écrans moyens */
@media (max-width: 980px) {
  h2 {
    font-size: 1.25rem !important;
  }
}

/* Pour les petits écrans */
@media (max-width: 768px) {
  h1 { font-size: 3rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
  p  { font-size: 1rem !important; }
}

/* Pour les très petits écrans */
@media (max-width: 480px) {
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1rem; }
  p  { font-size: 0.875rem !important; }
}



/* =========================
   Elementor posts - Cards
   Final consolidated CSS
   ========================= */

/* Card container (scope Cards skin) */
.elementor-widget-posts.elementor-posts--skin-cards .elementor-post__card {
  position: relative; /* needed for absolute date */
  z-index: 1;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20,30,40,0.06);
  overflow: visible;
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform .18s ease, box-shadow .18s ease;
}

.elementor-widget-posts.elementor-posts--skin-cards .elementor-post__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(22,30,40,0.09);
}

/* --- Remove list markers / stray dots that can appear near date --- */
.elementor-widget-posts .elementor-post__meta-data,
.elementor-widget-posts .elementor-post-date,
.elementor-widget-posts .elementor-post__date,
.elementor-widget-posts .elementor-post__meta-data * {
  list-style: none !important;
}

.elementor-widget-posts .elementor-post__meta-data::before,
.elementor-widget-posts .elementor-post__meta-data *::before,
.elementor-widget-posts .elementor-post-date::before,
.elementor-widget-posts .elementor-post__date::before,
.elementor-widget-posts .elementor-post__meta-data::marker,
.elementor-widget-posts .elementor-post__date::marker {
  content: none !important;
  display: none !important;
}

/* Category badge: transparent background, icon left, sits above title */
.elementor-widget-posts .elementor-post__badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  padding: 0;                 /* clean, no background */
  border-radius: 0;
  background: transparent !important;
  color: #7a8686;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
  text-transform: none;
}

/* Icon before category (emoji fallback). Replace with SVG if you prefer. */
.elementor-widget-posts .elementor-post__badge::before {
  content: "🚩";
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
  margin-right: 6px;
}

/* Ensure category sits inside the text block above title */
.elementor-widget-posts .elementor-post__text {
  position: relative;
  padding-top: 8px;
  padding-left: 22px; /* keeps space if avatar present */
  padding-right: 22px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Title: black (not red) */
.elementor-widget-posts .elementor-post__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 700;
}
.elementor-widget-posts .elementor-post__title a {
  color: #000 !important;          /* titre en noir */
  text-decoration: none;
}
.elementor-widget-posts .elementor-post__title a:hover {
  color: #222 !important;
}

/* Excerpt */
.elementor-widget-posts .elementor-post__excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button: pill style (Elementor). Also apply to elementor-button markup. */
.elementor-widget-posts .elementor-post__read-more,
.elementor-widget-posts .elementor-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #14A697 !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 30px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(80,120,110,0.06);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  border: none !important;
}

.elementor-widget-posts .elementor-button .elementor-button-text {
  color: #ffffff !important;
}

/* Button hover */
.elementor-widget-posts .elementor-post__read-more:hover,
.elementor-widget-posts .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(24,40,36,0.08);
  background: #6aa297 !important;
}

/* Avatar (if present) — left, overlaps into text */
.elementor-widget-posts .elementor-post__avatar {
  position: absolute;
  left: 18px;
  bottom: -22px;
  z-index: 2; /* keep avatar above card background but below header */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(20,30,40,0.06);
  background: #fff;
}

/* Add extra top padding when avatar exists to avoid overlap */
.elementor-widget-posts .elementor-post__card .elementor-post__avatar + .elementor-post__text,
.elementor-widget-posts .elementor-post__card .elementor-post__thumbnail + .elementor-post__avatar + .elementor-post__text {
  padding-top: 36px;
}

/* Date badge — absolute, two-line look (month above, day below).
   z-index set so date is above the card but should remain below most sticky headers.
*/
.elementor-widget-posts .elementor-post-date,
.elementor-widget-posts .elementor-post__date {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important; /* above card (1), avatar (2), below typical headers (>=10) */
  display: inline-block !important;
  white-space: normal !important;
  pointer-events: none;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(10,20,30,0.08);
  font-weight: 700;
  font-size: 12px;
  color: #222;
  text-align: center;
  line-height: 1;
  min-width: 44px;
}

/* Month small, lowercase; Day bigger */
.elementor-widget-posts .elementor-post-date .month,
.elementor-widget-posts .elementor-post__date .month {
  display: block;
  font-size: 11px;
  opacity: .85;
  text-transform: lowercase;
  line-height: 1;
}
.elementor-widget-posts .elementor-post-date .day,
.elementor-widget-posts .elementor-post__date .day {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

/* Fallback if JS not present: allow wrapping */
.elementor-widget-posts .elementor-post-date,
.elementor-widget-posts .elementor-post__date {
  white-space: normal;
}

/* If element has inline style forcing absolute placement we reset to static for badge (safety) */
.elementor-widget-posts .elementor-post__badge[style] {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* Responsive tweaks */
@media (max-width:1024px){
  .elementor-widget-posts .elementor-post__thumbnail img { height: 180px; object-fit: cover; }
  .elementor-widget-posts .elementor-post__avatar { width: 48px; height: 48px; bottom: -20px; left: 14px; }
  .elementor-widget-posts .elementor-post__text { padding-top: 28px; }
}
@media (max-width:640px){
  .elementor-widget-posts .elementor-post__thumbnail img { height: 140px; }
  .elementor-widget-posts .elementor-post__avatar { width: 44px; height: 44px; bottom: -16px; left: 12px; }
  .elementor-widget-posts .elementor-post__text { padding: 18px 14px 14px 14px; }
  .elementor-widget-post__read-more, .elementor-widget-posts .elementor-button { padding: 8px 14px !important; font-size: 13px !important; }
}



















/* ============================
   Search : icône loupe + barre proche du header
   ============================ */

/* positionne la zone d'input fixe, cachée par défaut — plus haut : bottom:72px */
.elementor-widget-search .e-search-input-wrapper {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(120%) !important;
  bottom: 72px !important; /* <-- distance du bas : ajuster si besoin */
  width: calc(100% - 48px) !important;
  max-width: 980px !important; /* largeur max pour rester proche du header */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .22s ease, opacity .22s ease !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}

/* fait apparaître la barre quand le formulaire reçoit le focus */
.elementor-widget-search .e-search:focus-within .e-search-input-wrapper,
.elementor-widget-search .e-search-form:focus-within .e-search-input-wrapper {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* masque l'icône loupe native (si présente) et stylise le label comme bouton */
.elementor-widget-search .e-search-label svg { display: none !important; }
.elementor-widget-search .e-search-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  padding: 4px !important;
}

/* remplace visuellement par une loupe via pseudo-élément SVG (noir) */
.elementor-widget-search .e-search-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23000" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* champ d'input : full width (dans le container centré) */
.elementor-widget-search .e-search-input {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* masquer la croix et le submit visuel */
.elementor-widget-search .e-fas-times,
.elementor-widget-search .e-search-submit { display: none !important; }




/* ============================
   Bouton panier : icône noire seule, pas de background ni texte
   (inchangé, mais remis pour assurance)
   ============================ */
.product-remove {
  width: 25px !important;
}
.elementor-menu-cart__toggle_button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  color: #000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-menu-cart__toggle_button .elementor-button-text {
  display: none !important;
}

.elementor-menu-cart__toggle_button svg {
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.elementor-menu-cart__toggle_button svg path {
  fill: #000 !important;
  stroke: none !important;
}

.elementor-button-icon-qty {
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  min-width: auto !important;
  padding: 0 4px !important;
}

.elementor-menu-cart__toggle_button:hover,
.elementor-menu-cart__toggle_button:focus {
  background: transparent !important;
  color: #000 !important;
  outline: none !important;
}

/* petites adaptations mobiles */
@media (max-width: 768px) {
  .elementor-widget-search .e-search-label { width: 36px !important; height: 36px !important; }
  .elementor-menu-cart__toggle_button { padding: 4px !important; }
  .elementor-widget-search .e-search-input-wrapper { bottom: 64px !important; width: calc(100% - 24px) !important; max-width: 720px !important; }
}








/* ============================
   mini-cart, menu
   ============================ */
/* full-height fixed cart under sticky header */
.elementor-menu-cart__container.elementor-lightbox,
.elementor-menu-cart__container {
  position: fixed !important;
  top: calc(var(--sticky-header-height, 0px) + 8px) !important;
  right: 16px !important;
  left: auto !important;
  bottom: 8px !important;
  height: calc(100vh - var(--sticky-header-height, 0px) - 16px) !important;
  max-height: none !important;
  width: 360px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 999999 !important;
}

/* contenu principal : remplir et scroller si nécessaire */
.elementor-menu-cart__main {
  display: block !important;
  position: relative !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
}

/* permettre à la liste de produits de croître */
.elementor-menu-cart__products,
.widget_shopping_cart_content {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* s'assurer que les wrappers ne limitent pas la hauteur */
.elementor-menu-cart__wrapper,
.elementor-menu-cart__toggle_wrapper {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

/* neutraliser les stacking contexts/clip du header sticky */
.elementor-sticky--active,
.elementor-sticky,
.header-sticky,
.site-header.is-sticky,
.header-wrapper.is-sticky {
  transform: none !important;
  contain: none !important;
  overflow: visible !important;
  z-index: 99998 !important;
}

/* mobile */
@media (max-width:768px){
  .elementor-menu-cart__container { left:12px !important; right:12px !important; width:auto !important; max-width:calc(100% - 24px) !important; }
}




#ywraq_cart_quote {
    display: none !important;
}








/* ---------- 1) Conteneur carré et crop propre ---------- */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  aspect-ratio: 1 / 1;        /* garantit un carré */
  overflow: hidden;
  display: block;
}

/* image occupe tout le carré et est recadrée proprement */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;         /* crop centré (pas d'étirements) */
  object-position: 50% 50%;
  display: block;
}

/* fallback pour navigateurs plus vieux : limite la largeur */
.woocommerce ul.products li.product img {
  max-width: 100%;
  height: auto;
}

/* ---------- 2) Boutons : uniformiser le style (appliquer au bouton "Reserver maintenant" etc.) ---------- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.ast-on-card-button,
.ast-on-card-button.add_to_cart_button {
  font-style: inherit;
  list-style: none;
  text-align: center;
  transition: all .2s linear;
  text-decoration: none !important;
  vertical-align: baseline;
  background: var(--ast-global-color-0, #e6e6e6);
  border: 0;
  box-sizing: border-box;
  color: #ffffff;
  padding: 15px 30px;
  line-height: 1em;
  display: inline-block;
  margin-top: .5em;
  margin-bottom: .5em;
  white-space: normal;
  font-family: "Poppins", Sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 22px;
  box-shadow: none;
  overflow: visible;
}

/* petit effet hover */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.ast-on-card-button:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/*----------- Footer CSS Custom - classe Footer-Custom -----------*/
/* 1. Forcer la disposition verticale du menu principal dans le footer */
.Footer-Custom .elementor-nav-menu--main .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;  /* ← disposition verticale */
  flex-wrap: nowrap !important;       /* ← pas de retour à la ligne */
  overflow: visible !important;
  align-items: flex-start;            /* ← alignement à gauche */
}

/* 2. Toujours afficher le menu principal dans le footer */
.Footer-Custom .elementor-nav-menu--main {
  display: block !important;
}

/* 3. Masquer le menu burger et le menu déroulant */
.Footer-Custom .elementor-menu-toggle {
  display: none !important;
}

/* 4. Autoriser le retour à la ligne dans les liens s’ils sont longs */
.Footer-Custom .elementor-nav-menu--main .elementor-item {
  white-space: normal !important;
}