/* ===== Charte LMG CONSEIL =====
   Principale : #0e7c86 | Secondaire : #a35239 | Fond : #ede9de
   Police souhaitée : Graphie Book (licence desktop uniquement à ce stade).
   En attendant une licence web, remplacement par "Jost" (Google Fonts),
   proche dans l'esprit (géométrique, épurée). Pour utiliser Graphie Book
   sur le site, il faut une licence "web font" et charger le fichier via
   une règle @font-face, puis remplacer 'Jost' par 'Graphie Book' ci-dessous.
*/

:root {
  --color-primary: #0e7c86;
  --color-secondary: #a35239;
  --color-bg: #ede9de;
  --color-text: #2b2b2b;
  --color-white: #ffffff;
  --font-main: 'Jost', 'Graphie Book', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
}

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

h1, h2, h3 {
  font-weight: 600;
  color: var(--color-primary);
}

a { color: inherit; text-decoration: none; }

/* Header */
.site-header {
  background-color: var(--color-white);
  border-bottom: 1px solid #e2ded2;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { height: 48px; width: auto; }

.main-nav {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.2s;
}

.main-nav a:hover { color: var(--color-primary); }

.header-phone {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Hero */
.hero {
  background-color: var(--color-bg);
  padding: 100px 0;
  text-align: center;
}

.hero h1 {
  font-size: 2.4rem;
  max-width: 720px;
  margin: 0 auto 20px;
}

.hero-subtitle {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 36px;
  color: #4a4a4a;
}

.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.2s;
}

.btn-primary:hover { background-color: #0b636b; }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background-color: var(--color-bg); }

.section h2 {
  font-size: 1.9rem;
  text-align: center;
  margin-bottom: 12px;
}

.section-intro {
  text-align: center;
  color: #555;
  max-width: 560px;
  margin: 0 auto 48px;
}

/* Démarche - steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.step {
  padding: 24px;
  border-top: 3px solid var(--color-secondary);
}

.step-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 1px;
}

.step h3 {
  font-size: 1.15rem;
  margin: 8px 0 10px;
}

.step p { font-size: 0.95rem; color: #444; }

/* Secteurs */
.secteurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}

.secteur-card {
  background-color: var(--color-white);
  padding: 32px 24px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.secteur-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.secteur-card p { font-size: 0.95rem; color: #444; }

.zone {
  text-align: center;
  font-weight: 500;
  color: var(--color-secondary);
}

/* Contact */
.contact-section { text-align: center; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: left;
}

.contact-item { display: flex; flex-direction: column; gap: 4px; }

.contact-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-secondary);
  font-weight: 600;
}

.contact-item a:hover { color: var(--color-primary); }

/* Footer */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 32px 0;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer p { margin: 4px 0; opacity: 0.9; }

/* Responsive */
@media (max-width: 800px) {
  .main-nav { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .secteurs { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 1.9rem; }
}

@media (max-width: 500px) {
  .steps { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}