/**
 * Module 02: En-tête Pleine Largeur avec fond BLANC
 * Thème Storefront Child - TAMISIER MACHINES AGRICOLES
 */

#masthead.site-header.tma-fullwidth-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1000;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.home.blog .site-header,
.home.page .site-header,
.site-header {
  margin-bottom: 2rem !important;
}

#page.hfeed.site {
  position: relative;
}

.tma-hero-section {
  padding-top: 5rem !important;
}

.tma-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  /* Padding vertical resserré : le logo image est plus haut que l'ancien texte */
  padding: 0.95rem 2.5rem !important;
  box-sizing: border-box !important;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .tma-header-inner {
    padding: 0.85rem 1.25rem !important;
    gap: 1rem;
  }
  .tma-hero-section {
    padding-top: 3rem !important;
  }
}

/* ==========================================================================
   ZONE 1: MARQUE / LOGO
   ========================================================================== */

.tma-brand-zone {
  flex-shrink: 0;
}

.tma-brand-link {
  text-decoration: none !important;
  display: inline-block;
  line-height: 0;
}

/* Logo image (assets/images/logo-tamisier*.png), généré depuis logos/logo-1-timon.svg */
.tma-brand-img {
  display: block;
  height: auto;
  max-width: 100%;
}

.tma-brand-img.tma-desktop-logo {
  width: 138px;
}

.tma-brand-img.tma-mobile-logo {
  width: 150px;
}

.tma-desktop-logo {
  display: block;
}

.tma-mobile-logo {
  display: none !important;
}

/* Le nom complet devient trop petit sur écran étroit : on passe à la version
   compacte (barre + feuille + TAMISIER), plus lisible qu'un wordmark réduit. */
@media (max-width: 1100px) {
  .tma-brand-img.tma-desktop-logo {
    width: 128px;
  }
}

@media (max-width: 700px) {
  .tma-desktop-logo {
    display: none !important;
  }
  .tma-mobile-logo {
    display: block !important;
  }

  /* Logo centré dans le header.
     En flex + space-between, le logo était décalé de ~36px vers la gauche :
     la zone des icônes (97px) est plus large que celle du burger (24px), donc
     les deux espaces autour du logo n'étaient pas égaux.
     Ici : grille à 3 colonnes, les deux colonnes latérales font exactement la
     même largeur, ce qui place le logo au centre réel du header.
     `gap` est neutralisé car la grille gère déjà la répartition. */
  .tma-header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center !important;
    gap: 0 !important;
  }

  .tma-burger-wrapper {
    grid-column: 1;
    justify-self: start;
  }

  .tma-brand-zone {
    grid-column: 2;
    justify-self: center;
  }

  .tma-utility-zone {
    grid-column: 3;
    justify-self: end;
  }

  /* Largeur calée pour que le logo centré ne touche jamais les icônes,
     même sur les écrans les plus étroits (360px). */
  .tma-brand-img.tma-mobile-logo {
    width: 120px;
  }
}

/* Très petits écrans (≤360px) : le logo centré et la rangée d'icônes ne
   peuvent pas cohabiter à taille pleine, on resserre les deux.
   Spécificité renforcée sur la rangée d'icônes : une règle `gap` plus bas dans
   le fichier (ZONE 3) s'applique sinon à la place de celle-ci. */
@media (max-width: 360px) {
  .tma-brand-img.tma-mobile-logo {
    width: 104px;
  }
  .tma-header-inner .tma-utility-zone {
    gap: 0.6rem !important;
  }
}

/* ==========================================================================
   ZONE 2: BARRE DE RECHERCHE EN LIGNE (desktop)
   Visible en permanence : plus besoin de cliquer sur une icône.
   L'icône loupe + popover reste la version mobile (voir media query plus bas).
   ========================================================================== */

.tma-search-inline {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 380px;
  margin-left: 2rem;
}

.tma-search-inline-form {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0 !important;
}

.tma-search-inline-input {
  width: 100% !important;
  height: 40px;
  padding: 0 2.6rem 0 0.95rem !important;
  border: 1px solid var(--agri-border-subtle, #e2e8f0) !important;
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  background: var(--agri-white, #ffffff) !important;
  color: #1f2937 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.tma-search-inline-input:focus {
  border-color: var(--agri-green-primary, #215833) !important;
  background: var(--agri-white, #ffffff) !important;
  box-shadow: 0 0 0 3px rgba(33, 88, 51, 0.12);
}

.tma-search-inline-input::placeholder {
  color: #9ca3af;
}

.tma-search-inline-submit {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border: none !important;
  border-radius: 50%;
  background: transparent !important;
  color: #6b7280 !important;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tma-search-inline-submit:hover,
.tma-search-inline-submit:focus-visible {
  color: var(--agri-green-primary, #215833) !important;
  background: rgba(33, 88, 51, 0.08) !important;
}

/* Écrans intermédiaires : on resserre pour laisser de la place à la navigation,
   avec une largeur plancher pour que le champ reste lisible et utilisable. */
@media (max-width: 1200px) {
  .tma-search-inline {
    max-width: 240px;
    min-width: 150px;
    margin-left: 1.25rem;
  }
}

/* Sous 992px, la navigation desktop disparaît : la recherche revient en icône + popover */
@media (max-width: 992px) {
  .tma-search-inline {
    display: none !important;
  }
}

/* ==========================================================================
   ZONE 3: NAVIGATION PRINCIPALE
   ========================================================================== */

.tma-navigation {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 1.5rem;
}

.tma-nav-list {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1.75rem !important;
}

.tma-nav-item {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.tma-nav-item a {
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.tma-nav-item a:hover {
  color: var(--agri-green-primary, #215833) !important;
}

@media (max-width: 992px) {
  .tma-navigation {
    display: none !important;
  }
}

/* ==========================================================================
   ZONE 3: OUTILS / ACTIONS
   ========================================================================== */

.tma-utility-zone {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .tma-utility-zone {
    gap: 1rem !important;
  }
}

.tma-locale-pill {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 576px) {
  .tma-locale-pill {
    display: none !important;
  }
}

/* --- Icône panier ---
 * Storefront remplace a.cart-contents par son balisage texte via les fragments
 * WooCommerce ; inc/cart-icon.php réinjecte le SVG du thème. On masque donc le
 * texte du compteur et on n'affiche que l'icône + le badge numérique.
 */
.tma-cart-action {
  position: relative;
}

.tma-cart-action .cart-contents {
  font-size: 0 !important;
  line-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  text-indent: 0 !important;
}

.tma-cart-action .cart-contents .amount,
.tma-cart-action .cart-contents .count {
  display: none !important;
}

.tma-cart-action .cart-contents svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.tma-cart-action .tma-cart-count {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background-color: var(--agri-amber-accent, #d97706);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
  animation: tma-cart-pop 0.35s ease;
}

.tma-cart-action .tma-cart-count:empty {
  display: none;
}

@keyframes tma-cart-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.tma-icon-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  color: #111827 !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  line-height: 1;
}

.tma-icon-btn:hover {
  color: var(--agri-green-primary, #215833) !important;
}

/* ==========================================================================
   ZONE 4: RECHERCHE MOBILE (icône loupe + panneau plein écran)
   Affichée uniquement sous 992px, là où la barre en ligne est masquée.
   Même principe que le menu burger : champ large, contraste net, bouton
   d'envoi explicite, fermeture à la croix ou à la touche Échap.
   ========================================================================== */

/* L'icône loupe n'a de sens que sous 992px : sur PC, la barre en ligne la remplace. */
.tma-search-dropdown-wrapper {
  display: none;
  position: relative;
}

@media (max-width: 992px) {
  .tma-search-dropdown-wrapper {
    display: block;
  }
}

/* Dépliant de recherche : même largeur que le header, ouvert vers le bas.
   L'animation se fait sur la hauteur (grid-template-rows 0fr -> 1fr), pas sur
   `visibility`, pour que le champ reste focusable dès le clic. */
.tma-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1005;
  background: var(--agri-white, #ffffff);
  box-shadow: 0 12px 20px -12px rgba(17, 24, 39, 0.28);
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}

/* Sans cela, le dépliant replié occuperait quand même de la place sur PC. */
@media (max-width: 992px) {
  .tma-search-panel {
    display: grid;
  }
}

.tma-search-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.tma-search-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.tma-search-panel-body {
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--agri-border-subtle, #e2e8f0);
}

.tma-search-panel-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
}

.tma-search-panel-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 1rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 9999px !important;
  background: var(--agri-white, #ffffff) !important;
  color: #1f2937 !important;
  font-size: 0.95rem !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tma-search-panel-input:focus {
  border-color: var(--agri-green-primary, #215833) !important;
  box-shadow: 0 0 0 3px rgba(33, 88, 51, 0.12);
}

.tma-search-panel-input::placeholder {
  color: #9ca3af;
}

.tma-search-panel-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border: none !important;
  border-radius: 9999px;
  background-color: var(--agri-green-primary, #215833) !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tma-search-panel-submit:hover,
.tma-search-panel-submit:focus-visible {
  background-color: var(--agri-green-dark, #163e23) !important;
  color: #ffffff !important;
}

@media (max-width: 480px) {
  .tma-search-panel-body {
    padding: 0.8rem 1rem 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tma-search-panel {
    transition: none;
  }
}

.tma-badge-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--agri-green-primary, #215833);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==========================================================================
   PAGES DE CONTENU : pas d'espace vide entre le fil d'Ariane et le titre
   Storefront applique `margin: 0 0 3.706em` au fil d'Ariane (≈59px sur PC),
   ce qui creuse un vide avant le titre. On le neutralise sur les pages
   (Contact, pages légales, etc.) en gardant le padding pour l'aération.
   ========================================================================== */

.page .storefront-breadcrumb {
  margin-bottom: 0 !important;
  padding-bottom: 0.9rem !important;
}

/* --------------------------------------------------------------------------
   MOBILE : marges latérales des pages de contenu
   Le header du thème enfant n'ouvre pas le conteneur `.col-full` de Storefront
   (c'est le header parent qui le fait, et son footer qui le referme). Résultat :
   le contenu des pages n'est encadré par rien et vient toucher les bords de
   l'écran — cartes, champs et titres collés aux extrémités sur mobile.
   On rétablit une marge latérale confortable, et on réduit le titre pour les
   libellés longs (« Politique de Retour et de Remboursement », etc.).
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .page .storefront-breadcrumb,
  .page .entry-header,
  .page .entry-content {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  .page .entry-title {
    font-size: 2rem !important;
    line-height: 1.25 !important;
  }
}