/*
Theme Name: Petit-Hyla
Theme URI: https://petit-hyla.fr
Author: Rosnel François
Author URI: https://haiti-digital.com
Description: Thème WordPress premium pour Petit-Hyla — Purification d'exception par l'eau. Palette bleu nuit & or, typographies Playfair Display / Plus Jakarta Sans / Cinzel.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: petit-hyla
*/

:root {
  --ph-navy: #0A192F;
  --ph-navy-2: #0F2341;
  --ph-gold: #C5A059;
  --ph-blue: #0091DA;
  --ph-white: #FAFAFA;
  --ph-muted: #CBD5E1;
  --ph-border: rgba(197, 160, 89, 0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--ph-navy);
  color: var(--ph-white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

a { color: var(--ph-gold); }

.ph-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- HEADER ---------- */
.ph-site-header {
  border-bottom: 1px solid var(--ph-border);
  padding: 22px 0;
}
.ph-site-header .ph-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ph-logo {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--ph-white);
  text-decoration: none;
}
.ph-logo span { color: var(--ph-gold); }
.ph-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ph-nav a {
  color: var(--ph-white);
  text-decoration: none;
  font-size: 0.95rem;
}
.ph-nav a:hover { color: var(--ph-gold); }

/* ---------- FOOTER ---------- */
.ph-site-footer {
  border-top: 1px solid var(--ph-border);
  padding: 40px 0;
  margin-top: 60px;
  text-align: center;
  color: var(--ph-muted);
  font-size: 0.85rem;
}

/* ---------- HERO ---------- */
.ph-hero {
  padding: 96px 0 88px;
  text-align: center;
  border-bottom: 1px solid var(--ph-border);
}
.ph-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  max-width: 720px;
  margin: 0 auto 24px;
}
.ph-hero p.ph-sub {
  max-width: 620px;
  margin: 0 auto 40px;
  color: var(--ph-muted);
  font-size: 1.05rem;
}
.ph-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.ph-btn-primary {
  background: var(--ph-gold);
  color: var(--ph-navy);
  padding: 15px 32px;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
}
.ph-btn-primary:hover { opacity: 0.88; }
.ph-btn-secondary {
  background: transparent;
  color: var(--ph-white);
  padding: 15px 32px;
  border: 1px solid var(--ph-border);
  border-radius: 2px;
  text-decoration: none;
  font-weight: 500;
}
.ph-btn-secondary:hover { border-color: var(--ph-gold); }
.ph-metrics {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.ph-metric {
  color: var(--ph-muted);
  font-size: 0.92rem;
  padding-left: 20px;
  border-left: 2px solid var(--ph-gold);
  text-align: left;
}

/* ---------- SECTIONS GENERIQUES ---------- */
.ph-section {
  padding: 88px 0;
  border-bottom: 1px solid var(--ph-border);
}
.ph-section.ph-no-border { border-bottom: none; }
.ph-badge {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ph-gold);
  margin-bottom: 18px;
}
.ph-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 760px;
  margin-bottom: 48px;
}

/* Comparatif */
.ph-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.ph-compare-card {
  background: var(--ph-navy-2);
  padding: 32px;
  border-radius: 4px;
}
.ph-compare-card.ph-old { border-top: 3px solid var(--ph-muted); opacity: 0.75; }
.ph-compare-card.ph-new { border-top: 3px solid var(--ph-gold); }
.ph-compare-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.ph-compare-card p { color: var(--ph-muted); font-size: 0.95rem; margin: 0; }

/* Grilles (piliers, produits, cas d'usage) */
.ph-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ph-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.ph-card-top {
  padding: 28px 0 0;
  border-top: 1px solid var(--ph-border);
}
.ph-card-top h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ph-gold);
}
.ph-card-top p { color: var(--ph-muted); font-size: 0.95rem; margin: 0; }

/* Étapes numérotées (process démo) */
.ph-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ph-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--ph-border);
}
.ph-step-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--ph-gold);
}
.ph-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.ph-step p { color: var(--ph-muted); font-size: 0.95rem; margin: 0; }

/* Formulaire réservation */
.ph-form-wrap {
  background: var(--ph-navy-2);
  padding: 40px;
  border-radius: 4px;
  border: 1px solid var(--ph-border);
}
.ph-form-wrap label {
  display: block;
  font-size: 0.85rem;
  color: var(--ph-muted);
  margin-bottom: 6px;
}
.ph-form-wrap input, .ph-form-wrap select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--ph-navy);
  border: 1px solid var(--ph-border);
  color: var(--ph-white);
  border-radius: 2px;
  font-family: inherit;
}
.ph-form-wrap button {
  background: var(--ph-gold);
  color: var(--ph-navy);
  padding: 15px 32px;
  border: none;
  border-radius: 2px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
}
.ph-form-note {
  color: var(--ph-muted);
  font-size: 0.85rem;
  margin-top: 16px;
}

/* ---------- IMAGES PRODUIT ---------- */
.ph-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.ph-hero-visual img {
  max-width: 380px;
  width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
}
.ph-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
.ph-hero-grid .ph-hero-text { text-align: left; }
.ph-hero-grid .ph-hero-text h1,
.ph-hero-grid .ph-hero-text p.ph-sub { margin-left: 0; text-align: left; }
.ph-hero-grid .ph-cta-row,
.ph-hero-grid .ph-metrics { justify-content: flex-start; }
.ph-hero-grid .ph-metric:first-child { padding-left: 0; border-left: none; }

.ph-card-top img,
.ph-compare-card img {
  width: 100%;
  max-width: 180px;
  display: block;
  margin: 0 auto 16px;
}
.ph-card-top.ph-has-img,
.ph-compare-card.ph-has-img { text-align: center; }
.ph-card-top.ph-has-img h3 { text-align: left; }
.ph-card-top.ph-has-img p { text-align: left; }

@media (max-width: 768px) {
  .ph-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ph-hero-grid .ph-hero-text { text-align: center; }
  .ph-hero-grid .ph-hero-text h1, .ph-hero-grid .ph-hero-text p.ph-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .ph-hero-grid .ph-cta-row, .ph-hero-grid .ph-metrics { justify-content: center; }
  .ph-hero-grid .ph-metric:first-child { padding-left: 20px; border-left: 2px solid var(--ph-gold); }
}

@media (max-width: 768px) {
  .ph-compare, .ph-grid-3, .ph-grid-2, .ph-step { grid-template-columns: 1fr; }
  .ph-hero { padding: 64px 0 56px; }
  .ph-section { padding: 56px 0; }
  .ph-nav ul { gap: 16px; flex-wrap: wrap; justify-content: center; }
}