/* ===========================================================
   H Tools Wood — Styles partagés : Sur-mesure / Notre atelier
   =========================================================== */

.page-hero{
  padding:64px 24px 50px;text-align:center;max-width:680px;margin:0 auto;
}
.page-hero h1{
  font-family:'Fraunces',serif;font-weight:500;font-size:40px;line-height:1.12;letter-spacing:-.015em;margin:14px 0 16px;
}
.page-hero p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;}

.content-section{padding:50px 24px;}
.content-section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- Étapes (Sur-mesure) ---------- */
.steps{display:flex;flex-direction:column;gap:0;max-width:760px;margin:0 auto;}
.step{
  display:flex;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none;}
.step-num{
  font-family:'Fraunces',serif;font-size:22px;color:var(--ochre);flex:none;width:44px;
}
.step-body h3{font-size:16px;font-weight:600;margin-bottom:6px;}
.step-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:520px;}

/* ---------- Grille bois (Sur-mesure) ---------- */
.wood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;}
@media (max-width:700px){.wood-grid{grid-template-columns:1fr 1fr;}}
.wood-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  display:flex;align-items:center;gap:12px;
}
.wood-swatch{width:34px;height:34px;border-radius:50%;flex:none;}
.wood-card .wname{font-size:13.5px;font-weight:600;}
.wood-card .wdesc{font-size:11.5px;color:var(--ink-soft);}

/* ---------- Valeurs / chiffres (Notre atelier) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;}
@media (max-width:780px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.value-card h3{font-family:'Fraunces',serif;font-size:18px;font-weight:500;margin-bottom:8px;}
.value-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

.story{max-width:680px;margin:0 auto;}
.story p{font-size:14.5px;color:var(--ink-soft);line-height:1.8;margin-bottom:18px;}
.story p:last-child{margin-bottom:0;}

.stat-row{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;max-width:900px;margin:0 auto;text-align:center;}
.stat-row .stat-num{font-family:'Fraunces',serif;font-size:32px;color:var(--accent);margin-bottom:4px;}
.stat-row .stat-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}

/* ---------- Galerie photos du processus (Sur-mesure) ---------- */
.process-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto;
}
.process-photos .photo-ph{aspect-ratio:4/3;}
.process-photos .ph-cap{
  position:absolute;left:14px;bottom:14px;z-index:1;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(28,26,23,.5);
}
@media (max-width:760px){.process-photos{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.process-photos{grid-template-columns:1fr;}}

/* ---------- Tagline matières & finitions ---------- */
.materials-tagline{
  text-align:center;font-family:'Fraunces',serif;font-size:17px;color:var(--ink-soft);
  max-width:560px;margin:0 auto 8px;font-style:italic;
}