/* ======================================================
   BaZi Consultation — Thème "Sage Layout v5"
   Agencement proche du site de référence, code original.
   - Header clair, nav droite
   - Hero en deux colonnes (texte + image)
   - Sections aérées en cartes blanches
   - Grille "Pourquoi consulter" en cartes
   ====================================================== */

/* Variables */
:root{
  /* Palette froide, sobre et pro (couleurs uniquement) */
  --bg: #F8F9FB;                  /* fond général doux */
  --surface: #FFFFFF;             /* cartes blanches */
  --surface-alt: #F1F3F7;         /* bandeaux gris bleuté clair */
  --ink: #1E293B;                 /* texte anthracite lisible */
  --muted: #475569;               /* texte secondaire ardoise */
  --line: color-mix(in oklab, var(--ink) 12%, white);

  /* Accent bleu à la place de la terracotta (noms identiques) */
  --accent: #3B5CCC;              /* bleu profond pro */
  --accent-ink: #2B2B2B;          /* texte sur fond accent */
  --accent-soft: color-mix(in oklab, var(--accent) 14%, white);

  /* Tailles fluides identiques (inchangées) */
  --fz-0: clamp(15px, 1.8vw, 16px);
  --fz-1: clamp(16px, 2.2vw, 18px);
  --fz-2: clamp(18px, 2.6vw, 20px);
  --fz-3: clamp(22px, 3.4vw, 28px);
  --fz-4: clamp(32px, 5.2vw, 48px);

  --maxw: 1120px;
  --container-px: clamp(16px, 3vw, 32px);
  --section-py: clamp(32px, 7vw, 84px);
  --radius: 14px;
  --radius-lg: 18px;

  /* Ombres: même intensité, teinte adaptée (ne change pas la mise en page) */
  --shadow-1: 0 8px 24px rgba(30, 41, 59, .08);
  --shadow-2: 0 16px 44px rgba(30, 41, 59, .10);
}



/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  font-size:var(--fz-0);
}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}

/* Container */
.shell{max-width:var(--maxw); margin:0 auto; padding:0 var(--container-px)}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  min-height:72px; padding:8px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px}
/* Topbar : téléphone + email */
.topbar p {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 520px) {
  .topbar p {
    font-size: 12.5px;
    line-height: 1.1;
  }
}

.brand img{height:80px; width:auto}
.brand span{
  font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:600; font-size:20px; letter-spacing:.2px;
}
nav a{
  color:var(--ink); opacity:.82; margin-left:18px;
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:2px solid transparent;
}
nav a:hover{opacity:1; border-color: color-mix(in oklab, var(--accent) 40%, white)}
nav a.active{opacity:1; border-color:var(--accent)}
@media (max-width:900px){ nav{display:none} }

/* HERO — deux colonnes */
.hero{padding:var(--section-py) 0}
.hero-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding: clamp(28px, 6vw, 80px) clamp(18px, 5vw, 64px);
}
.hero-grid{
  display:grid; gap: clamp(16px, 3vw, 40px);
  grid-template-columns: 1.05fr .95fr;  /* texte un peu plus large */
  align-items:center;
}
.hero-text{}
.kicker{
  display:inline-block; font-size:13px; letter-spacing:.3px;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border:1px solid color-mix(in oklab, var(--accent) 28%, white);
  border-radius:999px; padding:8px 14px; margin-bottom:10px;
}
h1{
  font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:600; font-size:var(--fz-4); line-height:1.15;
  margin:12px 0 10px;
}
.tagline{
  color:var(--muted); font-size:var(--fz-1); max-width: 60ch;
  margin: 0 0 18px;
}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top: 4px}
.btn{
  display:inline-block; border-radius:12px; padding:12px 18px;
  min-height:44px; font-weight:600; border:1px solid var(--line);
  background:#f5f7f9; color:var(--ink);
}
.btn.alt{background:var(--accent); color:#fff; border-color: color-mix(in oklab, var(--accent) 60%, black)}

.hero-media{
  display:block;
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-1);
  background: var(--surface-alt);
  border:1px solid var(--line);
}
.hero-media img{width:100%; height:auto; display:block}

/* Sections standard */
main{padding-bottom:28px}
section{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding: clamp(18px, 3.6vw, 34px);
  margin-bottom:24px;
}
.section--band{background:var(--surface-alt)}

h2{
  font-family:"Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:600; font-size:var(--fz-3); margin:0 0 12px;
}
h3{font-weight:600; font-size:var(--fz-2); margin:18px 0 10px}
p{margin:10px 0; color:#2b3241; font-size:var(--fz-1)}
ul{margin:8px 0 0 0; padding-left:22px; color:#2b3241}
li{margin:6px 0; font-size:var(--fz-1)}
.note{color:var(--muted); font-size:14px}

/* Grille "Pourquoi consulter" en cartes */
.grid-why{
  display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
.why{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-1); padding:16px 16px 18px;
}
.why b{display:block; margin-bottom:6px}

/* Footer */
footer{
  margin:44px 0 16px; border-top:1px solid var(--line);
  padding-top:20px; text-align:center; color:var(--muted); font-size:14px;
}
.footer-links a{color:var(--muted); margin:0 8px}

/* Responsive */
@media (max-width:1040px){
  :root{ --maxw: 1000px }
  .hero-card{ padding: clamp(26px, 6vw, 68px) clamp(18px, 5vw, 50px) }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1 } /* photo au-dessus sur mobile */
  .cta-row .btn{ width:100%; justify-content:center }
  .tagline{ max-width:44ch }
  section{ padding:24px }
  .grid-why{ grid-template-columns: 1fr }
}
@media (max-width:520px){
  .shell{ padding:0 16px }
  .hero{ padding:28px 0 }
  .hero-card{ padding:22px 16px; border-radius:16px; box-shadow:var(--shadow-2) }
  h1{ font-size: clamp(26px, 7.6vw, 34px) }
  h2{ font-size: clamp(20px, 5.8vw, 24px) }
  h3{ font-size: clamp(16px, 4.8vw, 18px) }
  p, li{ font-size: 15.5px }
  .btn{ padding:12px 14px; border-radius:10px }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 10px; }
  nav {
    display: flex !important;         /* au lieu de display:none */
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 6px;
    gap: 8px;
  }
  nav a {
    padding: 8px 10px;
    border: 1px solid #3B5CCC;    /* bordure assortie au bleu du site */
    border-radius: 10px;
    margin: 0;
    color: #FFFFFF;               /* texte blanc lisible */
    background: #3B5CCC;          /* fond bleu profond */
}

  .brand img { height: 36px; }
  .brand span { font-size: 18px; }
}