/* ══════════════════════════════════════════════════════════════
   L'Atelier du Rénovateur — Design System (Lot 9, 17-08-2026)
   Fichier séparé (n'écrase pas style.css) : ajoute une police
   display + des composants réutilisables (process, avis, badges).
   Réutilise les tokens couleur déjà validés WCAG dans style.css
   (--gold / --noir / --creme / --gris) plutôt que d'en recréer.
══════════════════════════════════════════════════════════════ */

:root {
  /* Police display "atelier" — un serif éditorial pour les grands
     titres uniquement (H1 hero, H2 de section). Le corps de texte
     reste en Montserrat (déjà chargé, coût perf nul supplémentaire
     hormis 3 graisses de Fraunces, chargées font-display:swap). */
  --font-display: 'Fraunces', 'Montserrat', serif;
  --gold-soft: rgba(184, 140, 92, .12);
  --ink-soft: rgba(13, 13, 13, .06);
}

/* Application ciblée : titres de section uniquement, jamais le corps
   de texte ni les boutons/labels (qui gardent Montserrat + tracking). */
h1,
.stitle,
.portrait-h2,
.services-h2,
.slider-h2,
.process-h2,
.zone-h2,
.diff-h2,
.avis-h2,
.faq-h2,
.cta-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1 strong,
.portrait-h2 strong,
.services-h2 strong,
.slider-h2 strong,
.process-h2 strong,
.cta-h2 strong {
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
}

/* ══════════════════════════════════════
   BADGE "flagship" réutilisable (déjà utilisé sur /realisations/,
   repris ici pour la mise en avant Maison JB sur la home)
══════════════════════════════════════ */
.flagship-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-btn);
  background: var(--gold-soft);
  padding: 6px 14px;
  border-radius: var(--radius);
}
.flagship-tag::before { content: '★'; font-size: .8em; }

/* ══════════════════════════════════════
   SECTION "NOTRE MÉTHODE" — process en étapes
   (comble le manque identifié au benchmark : aucune page/section
   n'explique concrètement ce que fait un courtier, étape par étape)
══════════════════════════════════════ */
.section-process {
  padding: 100px 0;
  background: var(--creme-dk);
  position: relative;
}
.process-intro { max-width: 640px; margin: 0 auto 64px; text-align: center; }
.process-h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 500; line-height: 1.2; margin-top: 12px; }
.process-lead { font-size: .95rem; color: var(--gris); font-weight: 300; margin-top: 16px; line-height: 1.8; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--gold) 0, var(--gold) 6px, transparent 6px, transparent 12px);
  z-index: 0;
}
.process-step {
  position: relative;
  z-index: 1;
  padding: 0 16px;
  text-align: center;
}
.process-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid var(--gris-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold-btn);
  transition: var(--tr);
}
.process-step:hover .process-num { background: var(--gold-btn); color: var(--blanc); border-color: var(--gold-btn); }
.process-step-title { font-size: .92rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 8px; }
.process-step-desc { font-size: .8rem; color: var(--gris); font-weight: 300; line-height: 1.7; }

@media (max-width: 899px) {
  .process-steps { grid-template-columns: 1fr; gap: 36px; max-width: 420px; }
  .process-steps::before { display: none; }
  .process-step { text-align: left; display: flex; gap: 20px; align-items: flex-start; }
  .process-num { flex-shrink: 0; margin: 0; }
}

/* ══════════════════════════════════════
   Réassurance micro-preuve sous CTA process
══════════════════════════════════════ */
.process-note {
  text-align: center;
  margin-top: 48px;
  font-size: .82rem;
  color: var(--gris);
  font-weight: 300;
}
.process-note strong { color: var(--noir); font-weight: 600; }