/* =========================================================
   ANAQA — Header transparent qui devient blanc au scroll
   Cible #header, l'ID standard du header Flatsome.
   Si votre header utilise un autre ID/classe, remplacez
   "#header" ci-dessous par le bon sélecteur (clic droit
   sur le header du site > Inspecter, pour le trouver).
   ========================================================= */

#header{
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* Flatsome place souvent le fond blanc sur un élément INTERNE au header
   (.header-wrapper, .flex-row, .header-main, etc.) plutôt que sur #header
   lui-même. On force donc la transparence sur toute la chaîne de parents,
   sinon un fond blanc peut réapparaître malgré la règle ci-dessus. */
#header,
#header .header-wrapper,
#header .header-main,
#header .flex-row,
#header .header-bg-color,
#header .nav-dropdown-has-icon-bg,
#header nav.nav-block,
#header .top-bar-nav{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Classe ajoutée automatiquement par le script JS dès qu'on scrolle */
#header.anaqa-header-scrolled,
#header.anaqa-header-scrolled .header-wrapper,
#header.anaqa-header-scrolled .header-main,
#header.anaqa-header-scrolled .flex-row,
#header.anaqa-header-scrolled .header-bg-color,
#header.anaqa-header-scrolled nav.nav-block,
#header.anaqa-header-scrolled .top-bar-nav{
  background-color: #ffffff !important;
}
#header.anaqa-header-scrolled{
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}

/* Le header flottant par-dessus le contenu, la première section de vos
   pages doit démarrer sous le header OU être assez grande (ex. une image
   plein écran) pour que rien d'important ne soit caché derrière.
   Si votre première section n'est pas déjà en plein écran, décommentez
   et ajustez la ligne suivante (remplacez la valeur par la hauteur
   réelle de votre header, ex. 90px) : */

/* body:not(.home) .container:first-of-type{ padding-top: 90px; } */

/* Astuce : sur les pages avec bannière plein écran (comme votre page
   d'accueil ANAQA), aucun ajustement n'est nécessaire — le header
   transparent se fond naturellement dans l'image du haut. */


/* =========================================================
   STYLE "BOUTIQUE DE MODE PREMIUM" — inspiré de la structure
   de manieredevoir.com, adapté à la charte ANAQA (rose/crème).
   Cible les éléments standards du Header Builder Flatsome :
   logo, menu, icônes. Configurez d'abord la disposition dans
   Flatsome > Options du thème > Header (voir instructions),
   ce CSS s'occupe uniquement de l'habillage visuel.
   ========================================================= */

/* Bandeau d'info fin, tout en haut (livraison, etc.) */
.header-top{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Logo centré, discret et élégant */
#logo img, #logo a{
  max-height: 34px;
}

/* Liens du menu principal : majuscules, espacées, fines
   → police en LIGHT (300) pour un rendu plus épuré/premium */
.nav > li > a{
  font-size: 12.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
}

/* Soulignement discret au survol, façon boutique premium */
.nav > li > a{
  position: relative;
}
.nav > li > a::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.nav > li:hover > a::after{
  transform: scaleX(1);
}

/* Icônes (recherche, compte, panier) plus fines et espacées */
.header-icon svg, .header-icon i{
  font-size: 16px;
}
.header-icon + .header-icon{
  margin-left: 18px;
}

/* Quand le header devient blanc au scroll (voir JS), le texte
   et les icônes repassent en couleur foncée automatiquement
   car ils héritent de la couleur de texte normale du thème. */
#header.anaqa-header-scrolled .nav > li > a,
#header.anaqa-header-scrolled #logo a{
  color: #2B1F1E;
}


/* =========================================================
   SIGNATURE ANIMÉE "Anaqa Hair" — en bas du menu
   Effet inspiré de la signature "Manière D." de
   manieredevoir.com, recréée en CSS pur (écriture cursive
   fine qui se dessine en fondu, en boucle douce).
   Visible sur ordinateur ET tablette (pas de display:none
   ajouté ici) — placez le shortcode [anaqa_signature] ou
   le bloc HTML ci-dessous dans votre mega-menu Flatsome
   et/ou votre menu mobile pour qu'elle y apparaisse.
   ========================================================= */

.anaqa-signature{
  display: block;
  text-align: center;
  font-family: 'Alex Brush', cursive;
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  color: #8A7C79;
  padding: 18px 0 22px;
  -webkit-font-smoothing: antialiased;
  animation: anaqaSignatureLoop 6s ease-in-out infinite;
}

@keyframes anaqaSignatureLoop{
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  25%  { opacity: 1; clip-path: inset(0 0 0 0); }
  75%  { opacity: 1; clip-path: inset(0 0 0 0); }
  92%  { opacity: 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 100% 0 0); }
}

/* Sur tablette, on garde la même taille lisible (pas de réduction agressive) */
@media (max-width: 1024px){
  .anaqa-signature{ font-size: 36px; }
}


/* =========================================================
   SÉLECTEUR DE LANGUE (TranslatePress) — drapeaux ronds
   au lieu du rectangle par défaut.
   ========================================================= */
.trp-language-switcher-container img,
.trp-ls-shortcode-language img,
img.trp-flag-image{
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 1px solid rgba(0,0,0,.08);
}

/* Un peu d'espace entre le drapeau et le nom de la langue, plus propre en rond */
.trp-language-switcher-container a{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}