/* ============================================================
   ECO CONSO HABITAT — CSS Global
   ============================================================ */

/* ── 1. Reset thème WP 2025 ──────────────────────────────── */
.wp-site-blocks > header,
.wp-site-blocks > footer,
header.wp-block-template-part,
footer.wp-block-template-part,
.site-header,
.site-footer,
.wp-block-post-title,
.entry-title,
.page-title,
.entry-header { display: none !important; }

.wp-site-blocks,
.wp-block-post-content,
.entry-content,
.site-main,
#primary,
main,
.is-layout-constrained,
.wp-block-group.is-layout-constrained {
  margin:     0 !important;
  padding:    0 !important;
  max-width:  none !important;
  width:      100% !important;
  box-sizing: border-box !important;
}

/* ── 2. Variables globales ───────────────────────────────── */
:root {
  --eco-green:  #8ab935;
  --eco-lime:   #c8d42c;
  --eco-dark:   #1f3d1f;
  --eco-border: #e6ecd9;
  --eco-bg:     #f8faf5;
  --eco-text:   #1a1a1a;
}

/* ── 3. Base HTML/body ───────────────────────────────────── */
html, body {
  margin:      0 !important;
  padding:     0 !important;
  background:  var(--eco-bg) !important;
  color:       var(--eco-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif !important;
}

/* ── 4. Fix overflow parent WP (cause tablette Android) ─── */
.wp-block-html,
.wp-block-freeform { overflow: visible !important; }

/* ── 5. Header pleine largeur ────────────────────────────── */
.ech-header {
  position:      sticky !important;
  top:           0 !important;
  z-index:       1000 !important;
  background:    #fff !important;
  border-bottom: 1px solid var(--eco-border) !important;
  box-shadow:    0 2px 12px rgba(31,61,31,.07) !important;
  border-radius: 0 !important;
  width:         100vw !important;
  max-width:     100vw !important;
  margin-left:   calc(50% - 50vw) !important;
  margin-right:  calc(50% - 50vw) !important;
  box-sizing:    border-box !important;
}

/* ── 6. Header inner ─────────────────────────────────────── */
.ech-header-inner {
  max-width:       1100px !important;
  margin:          0 auto !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  gap:             12px !important;
  padding:         10px 18px !important;
  box-sizing:      border-box !important;
}

/* ── 7. Logo ─────────────────────────────────────────────── */
.ech-header .ech-logo {
  height:      56px !important;
  width:       auto !important;
  max-width:   220px !important;
  object-fit:  contain !important;
  display:     block !important;
  flex-shrink: 0 !important;
}

/* ── 8. Navigation ───────────────────────────────────────── */
.ech-nav {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
  flex-wrap:   nowrap !important;
}

.ech-nav a {
  color:           var(--eco-dark) !important;
  text-decoration: none !important;
  font-weight:     700 !important;
  font-size:       14px !important;
  padding:         8px 10px !important;
  border-radius:   8px !important;
  white-space:     nowrap !important;
  line-height:     1.2 !important;
  transition:      background .15s !important;
}

.ech-nav a:hover,
.ech-nav a.is-active { background: rgba(138,185,53,.12) !important; }

/* ── 9. Profil / Avatar ──────────────────────────────────── */
.ech-profile {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  flex-shrink: 0 !important;
}

.ech-avatar {
  width:         34px !important;
  height:        34px !important;
  border-radius: 50% !important;
  display:       grid !important;
  place-items:   center !important;
  background:    rgba(138,185,53,.14) !important;
  color:         #1f3d1f !important;
  font-weight:   900 !important;
  font-size:     13px !important;
  border:        1px solid var(--eco-border) !important;
  flex-shrink:   0 !important;
}

.ech-profile__name {
  font-weight: 800 !important;
  color:       #1f3d1f !important;
  font-size:   14px !important;
  white-space: nowrap !important;
}

/* ── 10. Footer commun ───────────────────────────────────── */
.ech-footer {
  background:  #fff !important;
  border-top:  1px solid var(--eco-border) !important;
  text-align:  center !important;
  padding:     14px !important;
  color:       #667085 !important;
  font-size:   13px !important;
  margin-top:  20px !important;
}

/* ── 11. Utilitaire commun ───────────────────────────────── */
.is-hidden { display: none !important; }

/* ── 12. Tablette (max 900px) ────────────────────────────── */
@media (max-width: 900px) {
  .ech-header-inner {
    padding: 10px 14px !important;
    gap:     8px !important;
  }
  .ech-header .ech-logo {
    height:    48px !important;
    max-width: 160px !important;
  }
  .ech-nav { gap: 2px !important; }
  .ech-nav a {
    padding:   8px 8px !important;
    font-size: 13px !important;
  }
}

/* ── 13. Mobile (max 640px) ──────────────────────────────── */
@media (max-width: 640px) {
  .ech-nav a {
    font-size: 12px !important;
    padding:   7px 6px !important;
  }
  .ech-profile__name { display: none !important; }
  .ech-avatar {
    width:  30px !important;
    height: 30px !important;
  }
}