/*
Theme Name: Hélène Magard Thérapie
Theme URI: https://helenemagard.fr/
Author: Mica
Author URI: https://helenemagard.fr/
Description: Thème WordPress sobre et zen pour Hélène Magard — Thérapie Sonore & Psycho-Corporelle. Bannière personnalisable via le Personnalisateur, menu responsive, et animations douces (ondes / écho de gouttes d'eau) sur la bannière et le logo.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helenemagard
Tags: therapy, wellness, custom-logo, custom-menu, featured-images, responsive
*/

/* =========================================================
   1. VARIABLES & RESET
   ========================================================= */
:root{
  --cream:        #FAF6EC;
  --cream-2:      #F2EAD8;
  --cream-3:      #EDE3CE;
  --gold:         #C2A36B;
  --gold-dark:    #A98A50;
  --navy:         #243B57;
  --navy-light:   #3A5775;
  --text:         #3C3A35;
  --muted:        #837B6C;
  --white:        #FFFFFF;
  --shadow:       0 10px 30px rgba(36,59,87,.08);
  --shadow-soft:  0 6px 18px rgba(36,59,87,.06);
  --radius:       16px;
  --maxw:         1180px;
  --serif:        'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:         'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-decoration:none; transition:color .25s ease; }
a:hover{ color:var(--gold-dark); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; color:var(--navy); line-height:1.2; margin:0 0 .5em; }
h1{ font-size:clamp(2rem, 4vw, 3.1rem); }
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1.1em; }

.hm-container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* =========================================================
   2. BOUTONS
   ========================================================= */
.hm-btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.82rem;
  padding:14px 32px;
  border-radius:999px;
  border:1px solid var(--gold);
  color:var(--gold-dark);
  background:rgba(255,255,255,.6);
  cursor:pointer;
  transition:all .3s ease;
}
.hm-btn:hover{ background:var(--gold); color:var(--white); border-color:var(--gold); transform:translateY(-2px); }
.hm-btn--solid{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.hm-btn--solid:hover{ background:var(--navy-light); border-color:var(--navy-light); color:var(--white); }

/* =========================================================
   3. HEADER + NAV
   ========================================================= */
.hm-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cream-3);
}
.hm-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:150px; padding-top:2px; padding-bottom:2px;
}
.hm-logo{ flex:0 0 auto; line-height:0; }
.hm-logo img,
.hm-logo .custom-logo{
  height:auto; max-height:148px; width:auto;
  animation:hm-float 6s ease-in-out infinite;
  filter:drop-shadow(0 4px 10px rgba(194,163,107,.18));
}
.hm-logo a{ display:inline-block; }

.hm-nav .hm-menu{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px; margin:0; padding:0;
}
.hm-menu li{ position:relative; }
.hm-menu a{
  display:block; padding:10px 14px;
  font-size:.92rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy); font-weight:600;
}
.hm-menu a:hover{ color:var(--gold-dark); }
.hm-menu .current-menu-item > a{ color:var(--gold-dark); }
.hm-menu a::after{
  content:""; display:block; height:1px; width:0; margin-top:4px;
  background:var(--gold); transition:width .3s ease;
}
.hm-menu a:hover::after{ width:100%; }

/* Sous-menus */
.hm-menu ul.sub-menu{
  position:absolute; top:100%; left:0; min-width:200px;
  list-style:none; margin:0; padding:8px 0;
  background:var(--white); box-shadow:var(--shadow); border-radius:12px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .25s ease;
}
.hm-menu li:hover > ul.sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.hm-menu ul.sub-menu a{ text-transform:none; letter-spacing:0; }

/* Burger */
.hm-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.hm-burger span{ width:26px; height:2px; background:var(--navy); transition:all .3s ease; }
.hm-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hm-burger.is-active span:nth-child(2){ opacity:0; }
.hm-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   4. HERO / BANNIÈRE
   ========================================================= */
.hm-hero{
  position:relative; overflow:hidden;
  min-height:clamp(420px, 62vh, 640px);
  display:flex; align-items:center;
  background-color:var(--cream-2);
  background-size:cover; background-position:center;
}
.hm-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(36,59,87,.05) 0%, rgba(36,59,87,0) 45%, rgba(250,246,236,.35) 100%);
}
.hm-hero-inner{
  position:relative; z-index:3; width:100%;
  display:flex; justify-content:flex-end;
}
.hm-hero-content{
  max-width:480px; text-align:right;
  padding:28px 32px; border-radius:var(--radius);
  background:rgba(250,246,236,.55);
  backdrop-filter:blur(2px);
}
.hm-hero-content h1{ color:var(--gold-dark); margin-bottom:.2em; text-shadow:0 1px 12px rgba(255,255,255,.6); }
.hm-hero-content .hm-hero-sub{
  font-family:var(--serif); font-size:1.25rem; color:var(--navy);
  margin-bottom:1.4em; text-shadow:0 1px 10px rgba(255,255,255,.6);
}

/* Ondes / écho de gouttes d'eau */
.hm-ripples{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hm-ripples span{
  position:absolute; left:38%; top:64%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border:1px solid rgba(194,163,107,.5);
  border-radius:50%; transform:scale(0); opacity:0;
  animation:hm-ripple 7s ease-out infinite;
}
.hm-ripples span:nth-child(2){ animation-delay:2.3s; }
.hm-ripples span:nth-child(3){ animation-delay:4.6s; }
@keyframes hm-ripple{
  0%{ transform:scale(0); opacity:.75; }
  70%{ opacity:.18; }
  100%{ transform:scale(13); opacity:0; }
}
@keyframes hm-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

/* =========================================================
   5. SECTIONS
   ========================================================= */
.hm-section{ padding:84px 0; }
.hm-section--alt{ background:var(--cream-2); }
.hm-section-head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.hm-section-head .hm-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--gold-dark); font-weight:700; margin-bottom:12px;
}
.hm-section-head p{ color:var(--muted); }

/* Cartes pratiques */
.hm-practices{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:28px; max-width:760px; margin:0 auto;
}
.hm-practice{
  text-align:center; padding:40px 28px;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-soft); border:1px solid var(--cream-3);
  transition:transform .3s ease, box-shadow .3s ease;
}
.hm-practice:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.hm-practice .hm-ico{
  width:64px; height:64px; margin:0 auto 18px; color:var(--gold-dark);
}
.hm-practice h3{ margin-bottom:.3em; }
.hm-practice p{ color:var(--muted); font-size:.95rem; margin:0; }

/* =========================================================
   6. ARTICLES (grille)
   ========================================================= */
.hm-posts{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:30px;
}
.hm-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft); border:1px solid var(--cream-3);
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hm-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.hm-card-thumb{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--cream-3); }
.hm-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.hm-card:hover .hm-card-thumb img{ transform:scale(1.05); }
.hm-card-thumb--empty{
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-family:var(--serif); font-size:2rem;
  background:linear-gradient(135deg, var(--cream-2), var(--cream-3));
}
.hm-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.hm-card-meta{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--gold-dark); margin-bottom:10px;
}
.hm-card h3{ font-size:1.25rem; margin-bottom:.4em; }
.hm-card h3 a{ color:var(--navy); }
.hm-card h3 a:hover{ color:var(--gold-dark); }
.hm-card-excerpt{ color:var(--muted); font-size:.94rem; margin-bottom:18px; }
.hm-card-more{
  margin-top:auto; align-self:flex-start;
  font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gold-dark);
}
.hm-card-more::after{ content:" →"; transition:margin .25s ease; }
.hm-card-more:hover::after{ margin-left:5px; }

/* =========================================================
   7. CTA + FOOTER
   ========================================================= */
.hm-cta{
  text-align:center; padding:72px 0;
  background:linear-gradient(135deg, var(--navy), var(--navy-light));
  color:var(--cream);
}
.hm-cta h2{ color:var(--cream); }
.hm-cta p{ color:rgba(250,246,236,.8); max-width:560px; margin:0 auto 28px; }

.hm-footer{ background:var(--cream-3); padding:60px 0 24px; color:var(--text); }
.hm-footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:36px; margin-bottom:40px;
}
.hm-footer h4{ font-size:1.05rem; color:var(--navy); margin-bottom:14px; }
.hm-footer ul{ list-style:none; margin:0; padding:0; }
.hm-footer ul li{ margin-bottom:8px; }
.hm-footer a{ color:var(--text); }
.hm-footer a:hover{ color:var(--gold-dark); }
.hm-footer-bottom{
  text-align:center; padding-top:22px; border-top:1px solid rgba(36,59,87,.12);
  font-size:.85rem; color:var(--muted);
}

/* =========================================================
   8. CONTENU GÉNÉRIQUE (page / single)
   ========================================================= */
.hm-page{ padding:72px 0; }
.hm-content{ max-width:760px; margin:0 auto; }
.hm-content img{ border-radius:12px; margin:12px 0; }
.hm-content blockquote{
  border-left:3px solid var(--gold); margin:1.4em 0; padding:.4em 0 .4em 24px;
  font-family:var(--serif); font-size:1.2rem; color:var(--navy);
}
.hm-page-title{ text-align:center; margin-bottom:48px; }
.hm-pagination{ margin-top:48px; text-align:center; }
.hm-pagination .page-numbers{
  display:inline-block; padding:8px 14px; margin:0 3px;
  border-radius:8px; border:1px solid var(--cream-3); color:var(--navy);
}
.hm-pagination .current{ background:var(--gold); color:var(--white); border-color:var(--gold); }

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:880px){
  .hm-burger{ display:flex; }
  .hm-nav{
    position:fixed; inset:150px 0 auto 0;
    background:var(--cream); border-bottom:1px solid var(--cream-3);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
    box-shadow:var(--shadow);
  }
  .hm-nav.is-open{ max-height:80vh; overflow:auto; }
  .hm-nav .hm-menu{ flex-direction:column; align-items:stretch; gap:0; padding:8px 16px 18px; }
  .hm-menu a{ padding:14px 8px; border-bottom:1px solid var(--cream-3); }
  .hm-menu a::after{ display:none; }
  .hm-menu ul.sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; padding-left:14px; background:transparent;
  }
  .hm-hero-inner{ justify-content:center; }
  .hm-hero-content{ text-align:center; max-width:560px; }
  .hm-section{ padding:60px 0; }
}

/* Accessibilité : réduction des animations */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}