/* ══════════════════════════════════════════════════════════
   ETHERIKMIND — FRONT PAGE v4.0
   Direction artistique : page 100% fond noir #0E0B06, titres
   Cinzel dorés #FFD050, texte body ivoire #FDFAF5, boutons pill
   50px fond #FFD050/texte #0E0B06, prix toujours en #B8860B,
   cards arrondies 14px sur fond noir.
   Chargé uniquement sur la page d'accueil (is_front_page()).
   Namespace: toutes les classes sont préfixées "emh-" pour ne
   jamais entrer en collision avec le reste du thème.
══════════════════════════════════════════════════════════ */

/* EtherikMind DA v4 */

:root {
  --emh-bg:     #0E0B06;
  --emh-gold-1: #C07818;
  --emh-gold-2: #E09820;
  --emh-gold-3: #FFD050;
  --emh-ivory:  #FDFAF5;
  --emh-price:  #B8860B;

  --emh-cinzel:     "Cinzel", Georgia, serif;
  --emh-outfit:     "Outfit", system-ui, -apple-system, sans-serif;
  --emh-cormorant:  "Cormorant Garamond", Georgia, serif;

  --emh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset local (portée uniquement aux sections emh-*) ── */
.emh-hero, .emh-proof, .emh-products, .emh-footer {
  box-sizing: border-box;
}
.emh-hero *, .emh-proof *, .emh-products *, .emh-footer * {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.emh-hero {
  position: relative;
  background:
    radial-gradient(ellipse 60% 55% at 50% 32%, rgba(255, 208, 80, 0.09), transparent 70%),
    var(--emh-bg);
  /* 92vh puis 92svh (small viewport height) juste après : sur mobile,
     100vh/92vh est calculé sur la hauteur MAXIMALE du viewport, barre
     d'adresse Safari/Chrome masquée comprise — au premier chargement
     (barre visible), le hero déborde alors sous la ligne de flottaison
     réellement visible, et un léger saut de mise en page se produit
     quand la barre se cache/réapparaît au scroll. svh se cale sur la
     hauteur réellement visible en permanence. Fallback 92vh conservé en
     premier pour les navigateurs qui ne supportent pas svh. */
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 96px;
  overflow: hidden;
}

.emh-hero-orn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emh-gold-2);
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.emh-hero-orn svg {
  width: min(560px, 90vw);
  height: min(560px, 90vw);
}

.emh-eyebrow {
  position: relative;
  font-family: var(--emh-outfit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--emh-gold-3);
  /* !important : le kit global Elementor (actif sitewide dès qu'Elementor
     est installé, même sans l'utiliser) impose ".elementor-kit-840 p{
     margin-block-end:0}" — spécificité classe+élément (0,1,1), supérieure
     à une simple classe (0,1,0). Sans !important, TOUS les margin-bottom
     posés sur une balise <p> ci-dessous sont silencieusement écrasés à 0,
     quelle que soit la valeur écrite ici. Découvert le 2026-08-10 : c'est
     la cause réelle du footer "collé" malgré un CSS pourtant correct.
     2026-08-10 (v2) : 20px → 16px — remis sur la grille 8px (2×8) dans
     le cadre de l'audit de rythme du hero (voir .emh-subtitle,
     .emh-btn-gold, .emh-badge, .emh-hero-proof pour la suite de la
     gamme : 16 · 24(mobile)/32(desktop) · 80/96 · 24 · 16). */
  margin: 0 0 16px !important;
}
.emh-eyebrow em {
  font-style: normal;
  color: var(--emh-ivory);
  opacity: 0.7;
}

.emh-title {
  position: relative;
  font-family: var(--emh-cinzel);
  font-weight: 600;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1.15;
  letter-spacing: clamp(2px, 0.35vw, 4px);
  /* 26px → 24px (3×8) : aligné sur la grille 8px, cf. audit rythme hero
     2026-08-10. Palier desktop (32px, déjà 4×8) inchangé, voir media
     query ≥900px plus bas. */
  margin: 0 0 24px;
  color: var(--emh-gold-3);
}

.emh-subtitle {
  position: relative;
  font-family: var(--emh-cormorant);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.7;
  color: var(--emh-ivory);
  opacity: 0.82;
  max-width: 560px;
  /* Respiration visuelle avant le CTA — 80px mobile / 96px desktop.
     Renforcé le 2026-08-09 : le sous-titre gardait déjà une marge, mais
     on l'augmente et on ajoute une marge miroir sur .emh-btn-gold
     ci-dessous (ceinture + bretelles) pour qu'aucune combinaison de
     police/zoom navigateur ne puisse jamais recoller les deux blocs.
     2026-08-10 : !important ajouté — ce margin-bottom était en réalité
     réduit à 0px en production depuis le début par le kit global
     Elementor (voir commentaire détaillé sur .emh-eyebrow ci-dessus).
     Vérifié au navigateur headless : sans !important, gap réel = 0px
     malgré cette règle.
     2026-08-10 (v2) : 80px → 72px — gap réel visé 80px une fois ajouté
     le margin-top:8px de .emh-btn-gold juste en dessous (72+8=80, sur
     la grille 8px). Palier desktop : voir media query ≥900px. */
  margin: 0 0 72px !important;
}

/* Badge "Prix de lancement" — remplace l'ancien countdown.
   2026-08-10 : contour renforcé (0.35→0.6 d'opacité) + léger fond doré
   semi-transparent ajouté, pour qu'il se détache mieux du fond sombre
   tout en restant clairement secondaire face au bouton plein
   .emh-btn-gold juste au-dessus. */
.emh-badge {
  position: relative;
  display: inline-block;
  /* 20px → 24px (3×8), grille cf. audit rythme hero 2026-08-10. */
  margin: 24px 0 0;
  /* Padding et taille réduits (2026-08-10, audit) : mesuré à 240px de
     large, ce badge secondaire dépassait le bouton principal
     .emh-btn-gold (217px desktop / 193px mobile) — un badge de
     réassurance ne doit jamais être visuellement plus imposant que le
     CTA principal. Rétréci pour rester clairement subordonné, sur les
     deux gabarits (pas de palier desktop dédié à ce badge). */
  padding: 6px 14px;
  border: 1px solid rgba(255, 208, 80, 0.6);
  background: rgba(255, 208, 80, 0.08);
  border-radius: 50px;
  font-family: var(--emh-outfit);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--emh-gold-3);
  opacity: 1;
}

/* Preuve sociale hero — discrète, sous le badge. Donnée réelle
   (commandes WooCommerce "completed"), jamais un chiffre inventé.
   margin-top (pas -bottom) : sur cette page, tout margin-bottom posé
   sur une balise <p> est écrasé à 0 par le kit global Elementor sauf à
   ajouter !important (voir .emh-footer-url) — en espaçant par le haut,
   ce nouvel élément n'a pas ce problème à gérer. */
.emh-hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 14px → 16px (2×8), grille cf. audit rythme hero 2026-08-10. */
  margin: 16px 0 0;
  font-family: var(--emh-outfit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--emh-ivory);
  opacity: 0.65;
}
.emh-hero-proof svg {
  flex-shrink: 0;
  color: var(--emh-gold-3);
  opacity: 0.85;
}

/* ── Boutons pill ── */
.emh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--emh-outfit);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 50px;
  transition: transform 0.35s var(--emh-ease), box-shadow 0.35s var(--emh-ease), opacity 0.35s var(--emh-ease), background-color 0.35s var(--emh-ease);
}
.emh-btn-gold {
  position: relative;
  margin-top: 8px;
  padding: 14px 32px;
  font-size: 13px;
  color: var(--emh-bg);
  background: var(--emh-gold-3);
  box-shadow: 0 8px 28px rgba(224, 152, 32, 0.22);
}
.emh-btn-gold:hover {
  background: var(--emh-gold-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(224, 152, 32, 0.3);
}
.emh-btn-sm {
  /* min-height:44px : cible tactile Apple HIG — le padding seul
     (10px 24px + 13px de texte) ne donnait qu'environ 35px de haut. */
  min-height: 44px;
  padding: 10px 24px;
  font-size: 13px;
  color: var(--emh-bg);
  background: var(--emh-gold-3);
}
.emh-btn-sm:hover {
  background: var(--emh-gold-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(192, 120, 24, 0.3);
}

/* ══════════════════════════════════════════════
   NOS ENGAGEMENTS (remplace l'ancienne section "avis clients"
   fictifs — voir commentaire dans front-page.php)
══════════════════════════════════════════════ */
.emh-trust {
  background: var(--emh-bg);
  padding: 96px 24px;
  border-bottom: 1px solid rgba(224, 152, 32, 0.14);
}
.emh-trust .emh-head { margin-bottom: 48px; }

.emh-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.emh-trust-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: #17130d;
  border: 1px solid rgba(224, 152, 32, 0.2);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color 0.3s var(--emh-ease), transform 0.3s var(--emh-ease);
}
.emh-trust-cell:hover {
  border-color: rgba(224, 152, 32, 0.45);
  transform: translateY(-2px);
}

.emh-trust-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(224, 152, 32, 0.3);
  color: var(--emh-gold-3);
}

.emh-trust-txt { display: flex; flex-direction: column; gap: 3px; }
.emh-trust-txt b {
  font-family: var(--emh-outfit);
  font-size: 14px;
  font-weight: 500;
  color: var(--emh-ivory);
}
.emh-trust-txt span {
  font-family: var(--emh-outfit);
  font-size: 12.5px;
  color: var(--emh-ivory);
  opacity: 0.55;
}

/* ══════════════════════════════════════════════
   COLLECTION / PRODUITS
══════════════════════════════════════════════ */
.emh-products {
  background: var(--emh-bg);
  padding: 96px 24px 112px;
}
.emh-products-in {
  max-width: 1180px;
  margin: 0 auto;
}

.emh-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}
.emh-eyebrow-dark {
  color: var(--emh-gold-3);
}
.emh-h2 {
  font-family: var(--emh-cinzel);
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: 2px;
  color: var(--emh-gold-3);
  margin: 0 0 18px;
}
.emh-lead {
  font-family: var(--emh-cormorant);
  font-size: clamp(16px, 2vw, 19px);
  font-style: italic;
  line-height: 1.7;
  color: var(--emh-ivory);
  opacity: 0.78;
  margin: 0;
}

/* ── Grille ── */
.emh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

/* ── Card ── */
.emh-card {
  display: flex;
  flex-direction: column;
  background: #17130d;
  border: 1px solid rgba(224, 152, 32, 0.2);
  /* 22px : même arrondi que les cards cross-sell (produit) et panier —
     cohérence sitewide, 2026-08-08. L'image (.emh-card-img) suit
     automatiquement grâce à l'overflow:hidden ci-dessous. */
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.4s var(--emh-ease), box-shadow 0.4s var(--emh-ease), border-color 0.4s var(--emh-ease);
}
.emh-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(196, 151, 58, 0.12);
  border-color: rgba(224, 152, 32, 0.45);
}
/* Le bouton "Obtenir" réagit aussi au survol de toute la carte (pas
   seulement à son propre survol) : la carte se comporte comme une
   seule unité interactive, façon Apple, cohérent sur les 4 cartes. */
.emh-card:hover .emh-btn-sm {
  background: var(--emh-gold-2);
  box-shadow: 0 8px 20px rgba(192, 120, 24, 0.3);
}

/* ── Card mise en avant : Pack Complet ── */
.emh-card-featured {
  position: relative;
  border: 2px solid rgba(255, 208, 80, 0.55);
}
.emh-card-featured:hover {
  box-shadow: 0 10px 30px rgba(224, 152, 32, 0.22);
  border-color: var(--emh-gold-3);
}

/* Rangée de badges — 2026-08-09 : déplacés de l'intérieur de l'image
   (position absolute en coin) vers la card-body, au-dessus du titre.
   Les 4 couvertures produit portent leur propre titre imprimé en haut
   du visuel ("LE LIVRE DU SAVOIR", "LE TEMPLE INTÉRIEUR"...) ; un badge
   plein en overlay à cet endroit le masquait partiellement et le
   rendait illisible (ex. "-37%" sur la couverture Pack Complet).
   Ancrés ici, dans le flux normal du texte, les badges ne peuvent plus
   jamais chevaucher ni l'image ni aucun texte, quelle que soit la
   couverture utilisée — sur les 4 cartes, desktop comme mobile. */
.emh-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.emh-badge-best {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 50px;
  background: var(--emh-gold-3);
  color: var(--emh-bg);
  font-family: var(--emh-outfit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(255, 208, 80, 0.25);
}

/* Contour (et non plein) : distingue visuellement le badge secondaire
   "-37%" du badge principal "Best-seller" plutôt que de dupliquer le
   même pastille pleine deux fois côte à côte. */
.emh-badge-promo {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 50px;
  border: 1px solid rgba(255, 208, 80, 0.55);
  background: transparent;
  color: var(--emh-gold-3);
  font-family: var(--emh-outfit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.emh-card-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1e1710;
}
.emh-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--emh-ease);
}
.emh-card:hover .emh-card-img img {
  transform: scale(1.045);
}

.emh-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.emh-card-title {
  font-family: var(--emh-cinzel);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 1.5px;
  color: var(--emh-gold-3);
  margin: 0 0 10px;
}

/* 2026-08-10 : Cormorant Garamond italique remplacée par Outfit — trop
   décorative/peu lisible en petit corps dans une card. Cinzel reste
   la seule serif d'appel (card-title, H1, H2) ; tout le texte de
   support de la card (badges, pages, prix, bouton) est déjà en Outfit
   — la description rejoint donc ce même registre, cohérent avec le
   reste du site plutôt qu'isolé sur cette section. */
.emh-card-desc {
  font-family: var(--emh-outfit);
  font-weight: 400;
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.6;
  color: var(--emh-ivory);
  opacity: 0.78;
  /* !important : nécessaire contre le kit global Elementor qui écrase
     margin-bottom à 0 sur toute balise <p> (voir commentaire complet
     sur .emh-eyebrow). */
  margin: 0 0 14px !important;
  flex: 1;
}

/* Nombre de pages — argument de valeur, donnée réelle du produit
   (_em_pages), déjà présente en tout petit sur la couverture : reprise
   ici en texte lisible, cohérente sur les 4 cartes. */
.emh-card-pages {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px !important;
  font-family: var(--emh-outfit);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--emh-gold-3);
  opacity: 0.85;
}
.emh-card-pages svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.emh-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(224, 152, 32, 0.18);
}

.emh-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.emh-price-old {
  font-family: var(--emh-outfit);
  font-size: 0.85em;
  color: #888888;
  text-decoration: line-through;
}

.emh-price {
  font-family: var(--emh-outfit);
  font-weight: 700;
  font-size: 20px;
  color: var(--emh-price);
}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.emh-faq {
  background: var(--emh-bg);
  padding: 0 24px 112px;
  border-top: 1px solid rgba(224, 152, 32, 0.14);
}
.emh-faq-in {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 96px;
}

.emh-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emh-faq-item {
  background: #17130d;
  border: 1px solid rgba(224, 152, 32, 0.2);
  border-radius: 14px;
  padding: 4px 24px;
}
.emh-faq-item + .emh-faq-item {
  margin-top: 0;
}
.emh-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 28px 18px 0;
  position: relative;
  font-family: var(--emh-outfit);
  font-size: 16px;
  font-weight: 500;
  color: var(--emh-ivory);
}
.emh-faq-item summary::-webkit-details-marker {
  display: none;
}
.emh-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--emh-cinzel);
  font-size: 20px;
  color: var(--emh-gold-3);
  transition: transform 0.3s var(--emh-ease);
}
.emh-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.emh-faq-item p {
  font-family: var(--emh-cormorant);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--emh-ivory);
  opacity: 0.75;
  /* !important : jusqu'ici cette règle gagnait "par chance" contre le
     reset <p> du kit Elementor (spécificité classe+élément identique,
     départage par ordre d'impression) — fragile, cassable par un futur
     changement de plugin. Sécurisé explicitement. */
  margin: 0 0 20px !important;
}

/* ══════════════════════════════════════════════
   FOOTER — déplacé dans site-footer.css (2026-08-21)
   Le footer .emh-footer est désormais commun à toutes les pages
   (footer.php n'a plus de branche is_front_page()), donc ses styles
   vivent dans un fichier chargé globalement plutôt qu'ici, qui ne
   charge que sur l'accueil. Voir site-footer.css.
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   FADE-IN AU SCROLL — override dédié aux sections emh-*
   (surcharge la règle globale [data-r] : 0.6s / 20px)
══════════════════════════════════════════════ */
.emh-hero[data-r],
.emh-trust[data-r],
.emh-head[data-r],
.emh-card[data-r] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.emh-hero[data-r].in,
.emh-trust[data-r].in,
.emh-head[data-r].in,
.emh-card[data-r].in {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════
   STICKY CTA MOBILE
══════════════════════════════════════════════ */
.emh-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--emh-bg);
  border-top: 1px solid rgba(255, 208, 80, 0.2);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.35s var(--emh-ease);
  display: none;
}
@media (max-width: 768px) {
  .emh-sticky-cta {
    display: block;
  }
}
.emh-sticky-cta.emh-sticky-visible {
  transform: translateY(0);
}
.emh-sticky-cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.emh-sticky-cta-txt {
  font-family: var(--emh-cinzel);
  font-weight: 600;
  font-size: 14px;
  color: var(--emh-gold-3);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — mobile-first, paliers vers le haut
══════════════════════════════════════════════ */

/* ≥ 640px : la grille passe à 2 colonnes */
@media (min-width: 640px) {
  .emh-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .emh-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≥ 900px : hero plus aéré, grille à 4 colonnes */
@media (min-width: 900px) {
  .emh-hero {
    padding: 160px 24px 120px;
  }
  .emh-title {
    margin-bottom: 32px;
  }
  .emh-subtitle {
    /* !important : doit rester au-dessus du !important déjà posé sur la
       règle de base (sinon celle-ci, plus prioritaire par nature, empêche
       ce palier desktop de jamais s'appliquer).
       2026-08-10 (v2) : 96px → 88px — gap réel visé 96px une fois ajouté
       le margin-top:8px de .emh-btn-gold (88+8=96, grille 8px). */
    margin-bottom: 88px !important;
  }
  .emh-btn-gold {
    padding: 17px 42px;
    font-size: 14px;
  }
  .emh-products {
    padding: 128px 40px 140px;
  }
  .emh-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .emh-trust-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .emh-btn, .emh-card, .emh-card-img img, .emh-footer-socials a, .emh-sticky-cta {
    transition: none !important;
  }
  .emh-btn-gold::after {
    animation: none !important;
    display: none;
  }
}