/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1769104759
Updated: 2026-01-22 17:59:19


*/

/* ======================================================
   FEEL'S LAB — HEADER NATIF (CLEAN / SANS DOUBLONS)
   - Desktop : logo gauche / menu centre / panier droite
   - Topbar : réseaux gauche / message centre / compte droite
   - Dropdown hover stable (sans "trou")
   - Hover boutons (#FFBE98)
   - Mobile <=1024px : barre crème (menu gauche / logo centre / panier+compte droite)
     + menu plein écran (overlay) piloté par .feelslab-native-wrap.is-open
   - Sticky sous une bannière (variable --promo-h)
====================================================== */

/* ---------- Variables ---------- */
:root{
  --cream: #fffce8;
  --accent: #c9d86a;
  --hover: #FFBE98;
  --text: #000;
  --max: 1200px;

  /* Hauteur de la bannière noire au-dessus du header (si sticky) */
  --promo-h: 60px;
}

/* Anti tap-highlight iOS + focus agressif */
*{ -webkit-tap-highlight-color: transparent; }
a:focus, a:active, button:focus, button:active{
  outline: none;
  box-shadow: none;
}

/* ======================================================
   WRAP (sticky)
====================================================== */
.feelslab-native-wrap{
  width: 100%;
  position: sticky;
  top: var(--promo-h);
  z-index: 99999;
  background: var(--cream);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transform: translateZ(0); /* iOS */
}

/* ======================================================
   HEADER PRINCIPAL (DESKTOP)
====================================================== */
.feelslab-header{
  background: var(--cream);
  width: 100%;
  position: relative;
  z-index: 999;
}

.feelslab-header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Logo --- */
.feelslab-logo{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.feelslab-logo .custom-logo-link{
  display: inline-flex;
  align-items: center;
}
.feelslab-logo img,
.feelslab-logo .custom-logo{
  max-height: 78px;
  width: auto;
  height: auto;
  filter: none !important;
  object-fit: contain;
}
.feelslab-logo-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 22px;
}

/* --- Nav / Menu --- */
.feelslab-nav{
  flex: 1;
  display: flex;
  justify-content: center;
}

.feelslab-menu{
  display: flex !important;
  align-items: center;
  gap: 34px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.feelslab-menu > li{
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.feelslab-menu > li > a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1;
  padding: 10px 0;
}

.feelslab-menu > li > a:hover{ color: var(--accent); }

/* --- Dropdown (desktop) : stable --- */
.feelslab-menu li ul.sub-menu{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  z-index: 99999;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* zone tampon (évite le "trou") */
.feelslab-menu li.menu-item-has-children::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
}

.feelslab-menu li:hover > ul.sub-menu,
.feelslab-menu li:focus-within > ul.sub-menu{
  display: block;
}

.feelslab-menu li ul.sub-menu a{
  display: block;
  padding: 10px 14px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.feelslab-menu li ul.sub-menu a:hover{
  background: rgba(201, 216, 106, 0.25);
  color: var(--text);
}

/* --- Actions (panier) --- */
.feelslab-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.feelslab-cart-btn{
  background: var(--accent);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  transition: background .2s ease, transform .2s ease;
}
.feelslab-cart-btn:hover{
  background: var(--hover) !important;
  transform: translateY(-1px);
  color: var(--text) !important;
}

/* ======================================================
   TOPBAR (DESKTOP)
====================================================== */
.feelslab-topbar{
  background: #fff;
  border-top: 1px solid #eee;
}

.feelslab-topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

/* Réseaux : boutons avec image <img> */
.feelslab-socials{
  display: flex;
  align-items: center;
  gap: 10px;
}
.feelslab-socials a{
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  text-decoration: none;
}
.feelslab-socials a img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: invert(1);
  transition: all .2s ease;
}
.feelslab-socials a:hover{
  background: var(--accent);
}
.feelslab-socials a:hover img{
  filter: invert(0);
}

/* Message centre */
.feelslab-welcome{
  flex: 1;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

/* Compte */
.feelslab-account{
  display: flex;
  justify-content: flex-end;
}
.feelslab-account-btn{
  background: var(--accent);
  padding: 10px 22px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}
.feelslab-account-btn:hover{
  background: var(--hover) !important;
  transform: translateY(-1px);
  color: var(--text) !important;
}

/* ======================================================
   BURGER + MENU MOBILE (structure existante)
   - Utilise .feelslab-native-wrap.is-open pour ouvrir
====================================================== */
.feelslab-burger{
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}
.feelslab-burger span{
  display: block;
  height: 3px;
  background: #111;
  margin: 6px 0;
  border-radius: 3px;
}

/* Overlay + panneau (cachés par défaut desktop) */
.feelslab-mobile-overlay,
.feelslab-mobile-menu{
  display: none;
}

/* Liste menu mobile */
.feelslab-mobile-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.feelslab-mobile-list li{ margin: 0; padding: 0; }
.feelslab-mobile-list a{
  display: block;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}
.feelslab-mobile-list .sub-menu{
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0 0 0 12px;
}
.feelslab-mobile-list .sub-menu a{
  font-size: 16px;
  font-weight: 500;
  background: rgba(0,0,0,.03);
  margin-bottom: 8px;
}

/* ======================================================
   RESPONSIVE (<=1024px) — 1 seule barre crème + menu full screen
   - Menu (maison) gauche
   - Logo centre
   - Panier + Compte droite (icônes)
====================================================== */
@media (max-width: 1024px){

  :root{
    --bar-h: 64px;
    --pad-x: 10px;
    --icon: 40px;
    --gap: 6px;
  }

  /* Topbar masquée en mobile */
  .feelslab-topbar,
  .feelslab-topbar-inner,
  .feelslab-welcome,
  .feelslab-socials{
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cache nav desktop */
  .feelslab-nav,
  .feelslab-nav > ul.feelslab-menu,
  .feelslab-nav-desktop{
    display: none !important;
  }

  /* Header compact */
  .feelslab-header-inner{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 var(--pad-x) !important;
    height: var(--bar-h) !important;
    min-height: var(--bar-h) !important;
    position: relative !important;
    justify-content: center !important;
    background: var(--cream) !important;
    overflow: visible !important;
  }

  /* Logo centré (anti-crop) */
  .feelslab-logo{
    margin: 0 auto !important;
    width: auto !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
  }
  .feelslab-logo img,
  .feelslab-logo .custom-logo{
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Burger à gauche (icône maison) */
  .feelslab-burger{
    display: inline-flex !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: var(--icon) !important;
    height: var(--icon) !important;
    padding: 0 !important;

    background-color: var(--cream) !important;
    background-image: url("https://feelslab.fr/wp-content/uploads/2026/01/domicile.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
  }
  .feelslab-burger span{ display: none !important; }

  /* Panier + compte en icônes à droite */
  .feelslab-cart-btn{
    position: absolute !important;
    right: calc(var(--pad-x) + var(--icon) + var(--gap)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--icon) !important;
    height: var(--icon) !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--cream) !important;
    font-size: 0 !important;
    color: transparent !important;
    transform-origin: center;
    background-image: url("https://feelslab.fr/wp-content/uploads/2026/01/sac-de-courses.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
  }

  .feelslab-account-btn{
    position: absolute !important;
    right: var(--pad-x) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--icon) !important;
    height: var(--icon) !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--cream) !important;
    font-size: 0 !important;
    color: transparent !important;
    background-image: url("https://feelslab.fr/wp-content/uploads/2026/01/connexion.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hover mobile (garde le même rendu) */
  .feelslab-cart-btn:hover,
  .feelslab-account-btn:hover{
    background: var(--hover) !important;
    color: transparent !important;
    transform: translateY(-50%) !important; /* neutralise le lift sur mobile */
  }

  /* Overlay + menu plein écran (cachés par défaut) */
  .feelslab-mobile-overlay{
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.40) !important;
    z-index: 999998 !important;
  }

  .feelslab-mobile-menu{
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--promo-h) !important;
    width: 100vw !important;
    height: calc(100vh - var(--promo-h)) !important;
    background: var(--cream) !important;
    z-index: 999999 !important;

    transform: translateX(-102%) !important;
    transition: transform .25s ease !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px 26px !important;
  }

  /* Ouverture via .is-open */
  .feelslab-native-wrap.is-open .feelslab-mobile-overlay{
    display: block !important;
  }
  .feelslab-native-wrap.is-open .feelslab-mobile-menu{
    transform: translateX(0) !important;
  }
}
/* ======================================================
   FEEL'S LAB — MASQUER UNIQUEMENT LE HEADER NATIF DU THÈME
   (sans casser Gutenberg / menus dans le contenu)
   À coller TOUT EN BAS
====================================================== */

/* 1) Headers natifs courants (thèmes classiques) */
header#masthead,
header.site-header,
.site-header,
#site-header,
#page-header,
#header,
#main-header,
#top-header {
  display: none !important;
}

/* 2) Block themes (FSE) : on masque le template-part HEADER uniquement */
.wp-site-blocks > header,
header.wp-block-template-part,
.wp-block-template-part[class*="header"] {
  display: none !important;
}

/* 3) IMPORTANT : on ne touche PAS aux nav/menu globaux (sinon ça casse des pages) */
/* (aucun "nav {display:none}" et aucun ".wp-block-navigation {display:none}" ici) */
/* ======================================================
   FEEL'S LAB — AJUSTEMENTS (DESKTOP)
   Objectifs :
   1) Logo plus gros (comme avant)
   2) Menu + icône panier collés à droite (dans la bande crème)
   3) Bande blanche : réseaux collés à gauche / bouton connexion collé à droite
      + "Bienvenue" reste centré
   À coller TOUT EN BAS (après tout le reste)
====================================================== */

/* -----------------------------
   1) LOGO plus gros
------------------------------ */
.feelslab-logo img,
.feelslab-logo .custom-logo{
  max-height: 110px !important;  /* ajuste 95-120 si besoin */
  width: auto !important;
  height: auto !important;
}

/* Si ton bloc logo avait une largeur fixe avant */
.feelslab-logo{
  flex: 0 0 420px !important;   /* ajuste 350-450 */
  width: 420px !important;
  margin: 0 !important;
}

/* -----------------------------
   2) HEADER crème : menu + panier collés à droite
------------------------------ */
.feelslab-header-inner{
  max-width: none !important;          /* full width comme Turbo */
  width: 100% !important;
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  justify-content: flex-start !important;
}

/* La nav part à droite */
.feelslab-nav{
  margin-left: auto !important;
  justify-content: flex-end !important;
  display: flex !important;
}

/* Le menu est à droite */
.feelslab-menu{
  justify-content: flex-end !important;
  margin-left: auto !important;
  gap: 34px !important;
}

/* Le panier juste après le menu, collé à droite */
.feelslab-actions{
  margin-left: 16px !important;
  justify-content: flex-end !important;
}

/* -----------------------------
   3) BANDE BLANCHE : gauche / centre / droite
------------------------------ */
.feelslab-topbar-inner{
  max-width: none !important;          /* full width */
  width: 100% !important;
  margin: 0 !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  display: flex !important;
  align-items: center !important;
}

/* Réseaux vraiment à gauche */
.feelslab-socials{
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

/* Bienvenue bien centré */
.feelslab-welcome{
  flex: 1 1 auto !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Compte vraiment à droite */
.feelslab-account{
  flex: 0 0 auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* -----------------------------
   4) Micro-finitions (optionnelles)
------------------------------ */

/* Évite que le logo "mange" trop la place du menu sur écrans moyens */
@media (max-width: 1200px){
  .feelslab-logo{ flex: 0 0 360px !important; width: 360px !important; }
  .feelslab-logo img, .feelslab-logo .custom-logo{ max-height: 95px !important; }
}

/* Mobile : on ne touche pas (ton bloc mobile gère déjà) */
@media (max-width: 1024px){
  .feelslab-logo{ flex: 0 0 auto !important; width: auto !important; }
  .feelslab-logo img, .feelslab-logo .custom-logo{ max-height: 46px !important; }
}
/* ======================================================
   FEEL'S LAB — MOBILE ONLY
   - Logo centré
   - Panier à droite
   - Admin à droite du panier (tout à droite)
   Desktop : inchangé
====================================================== */

@media (max-width: 1024px){

  /* Barre header mobile : base */
  .feelslab-header-inner{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* centre le logo */
  }

  /* LOGO centré (au milieu exact) */
  .feelslab-logo{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .feelslab-logo img,
  .feelslab-logo .custom-logo{
    max-height: 46px !important; /* ajuste si besoin (44-54) */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* BOUTON MENU (maison) : reste à gauche */
  .feelslab-burger{
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }

  /* PANIER à droite */
  .feelslab-cart-btn{
    position: absolute !important;
    right: 56px !important; /* laisse la place à l'admin tout à droite */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }

  /* ADMIN : tout à droite (à droite du panier) */
  .feelslab-account-btn{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;

    /* si jamais il était masqué par un ancien CSS */
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sécurité : si un ancien conteneur .feelslab-actions gêne */
  .feelslab-actions{
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ======================================================
   FIX MOBILE — ADMIN absent car parent masqué
   - On "réactive" la topbar en hauteur 0
   - On garde Welcome/Socials cachés
   - On repositionne le bouton ADMIN dans la barre crème
====================================================== */

@media (max-width: 1024px){

  /* 1) IMPORTANT : la topbar ne doit plus être display:none
        sinon le bouton admin n'existe plus visuellement */
  .feelslab-topbar,
  .feelslab-topbar-inner{
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important; /* permet au bouton de "déborder" */
  }

  /* On continue de cacher ce qui ne doit pas apparaître */
  .feelslab-welcome,
  .feelslab-socials{
    display: none !important;
  }

  /* 2) On force l'existence du bloc compte */
  .feelslab-account{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 3) On place ADMIN dans la barre crème (à droite du panier) */
  .feelslab-account-btn{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999999 !important;

    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sécurité : la barre crème reste la référence de positionnement */
  .feelslab-header-inner{
    position: relative !important;
  }
}
/* ======================================================
   MOBILE — MENU OUVERT : Contact toujours visible/cliquable
====================================================== */
@media (max-width: 1024px){

  /* Le panneau menu doit pouvoir scroller et avoir du "vide" en bas */
  .feelslab-mobile-menu{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* Espace bas pour éviter que "Contact" soit caché par l'UI Safari */
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  /* Petit confort : évite que le dernier lien colle au bord */
  .feelslab-mobile-list{
    padding-bottom: 20px !important;
  }
}
/* ======================================================
   MOBILE — STICKY : ne doit pas recouvrir la bannière noire
====================================================== */
@media (max-width: 1024px){
  :root{
    --promo-h: 100px; /* ajuste si besoin (ex: 90px / 110px) */
  }

  .feelslab-native-wrap{
    top: var(--promo-h) !important;
  }
}