/* ============================================================
   SEPTIÈME SCÈNE — Custom CSS
   Palette + typographie + composants
   À coller dans Divi → Theme Options → General → Custom CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ss-ink: #0F1115;
  --ss-ink-soft: #1F232B;
  --ss-cream: #F5F1EA;
  --ss-cream-soft: #EDE7DA;
  --ss-paper: #FBF8F2;
  --ss-muted: #6B6B73;
  --ss-line: rgba(15, 17, 21, 0.14);
  --ss-line-soft: rgba(15, 17, 21, 0.08);
  --ss-orange: #E85A2B;
  --ss-blue: #2C3E9C;
  --ss-orange-soft: #FBE6DC;
}

/* ============ BASE ============ */
body, .et_pb_section, .et_pb_row, .et_pb_text, p, li, span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ss-ink);
}
body { background: var(--ss-cream); }

.ss-page h1, .ss-page h2, .ss-page h3,
.ss-page .et_pb_text h1, .ss-page .et_pb_text h2, .ss-page .et_pb_text h3 {
  font-family: 'Bebas Neue', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em;
  color: var(--ss-ink) !important;
  text-transform: uppercase;
}
.ss-page h1 { font-size: clamp(56px, 9.5vw, 132px); line-height: 0.96; }
.ss-page h2 { font-size: clamp(40px, 6vw, 84px); line-height: 0.98; }
.ss-page h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; letter-spacing: 0.02em; }
.ss-page h4 { font-size: 13px; line-height: 1.3; font-weight: 600; font-family: 'Inter', sans-serif !important; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ss-muted) !important; }

.ss-page p, .ss-page li {
  font-size: 17px; line-height: 1.65; color: var(--ss-ink);
}
.ss-page .ss-lede p, .ss-page p.ss-lede {
  font-size: 21px; line-height: 1.55; color: var(--ss-ink);
}
.ss-page p.ss-muted, .ss-page .ss-muted, .ss-page .ss-muted p { color: var(--ss-muted); }

/* ============ EYEBROW (label haut de section) ============ */
.ss-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ss-muted); margin-bottom: 24px;
}
.ss-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--ss-ink); display: inline-block;
}

/* ============ BUTTONS ============ */
.ss-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ss-btn, .ss-page .et_pb_button.ss-btn {
  display: inline-flex !important; align-items: center; gap: 10px;
  padding: 16px 28px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 500 !important;
  font-size: 14px !important; letter-spacing: 0.04em;
  text-transform: none; border-radius: 0 !important;
  transition: all .25s ease;
  text-decoration: none !important;
}
.ss-btn--primary {
  background: var(--ss-ink) !important; color: var(--ss-cream) !important;
  border: 1px solid var(--ss-ink) !important;
}
.ss-btn--primary:hover { background: var(--ss-orange) !important; border-color: var(--ss-orange) !important; color: #fff !important; }
.ss-btn--ghost {
  background: transparent !important; color: var(--ss-ink) !important;
  border: 1px solid var(--ss-ink) !important;
}
.ss-btn--ghost:hover { background: var(--ss-ink) !important; color: var(--ss-cream) !important; }
.ss-section--ink .ss-btn--ghost { color: var(--ss-cream) !important; border-color: rgba(245,241,234,0.45) !important; }
.ss-section--ink .ss-btn--ghost:hover { background: var(--ss-cream) !important; color: var(--ss-ink) !important; border-color: var(--ss-cream) !important; }
.ss-section--ink .ss-btn--primary { background: var(--ss-orange) !important; border-color: var(--ss-orange) !important; color: #fff !important; }
.ss-section--ink .ss-btn--primary:hover { background: var(--ss-cream) !important; color: var(--ss-ink) !important; border-color: var(--ss-cream) !important; }
.ss-btn::after { content: '→'; font-family: serif; transform: translateX(0); transition: transform .25s; }
.ss-btn:hover::after { transform: translateX(4px); }
.ss-page .et_pb_button.ss-btn::after { display: none; }

/* ============ SECTIONS ============ */
.ss-page .et_pb_section { padding: 0 !important; }
.ss-section { padding: clamp(80px, 10vw, 140px) 0 !important; }
.ss-section--ink { background: var(--ss-ink) !important; }
.ss-section--ink, .ss-section--ink h1, .ss-section--ink h2, .ss-section--ink h3, .ss-section--ink p, .ss-section--ink li {
  color: var(--ss-cream) !important;
}
.ss-section--ink .ss-eyebrow { color: rgba(245, 241, 234, 0.55); }
.ss-section--ink .ss-eyebrow::before { background: var(--ss-cream); }
.ss-section--paper { background: var(--ss-paper) !important; }
.ss-section--cream { background: var(--ss-cream) !important; }
.ss-section--cream-soft { background: var(--ss-cream-soft) !important; }

.ss-page .et_pb_row { padding: 0 !important; max-width: 1240px !important; width: 92% !important; }
.ss-page .et_pb_row.ss-row--narrow { max-width: 880px !important; }
.ss-page .et_pb_row.ss-row--wide { max-width: 1400px !important; }

/* ============ HAIRLINES ============ */
.ss-hr { border: 0; height: 1px; background: var(--ss-line); margin: 0; }
.ss-section--ink .ss-hr { background: rgba(245, 241, 234, 0.18); }

/* ============ HERO ============ */
.ss-hero { padding: clamp(120px, 14vw, 200px) 0 clamp(80px, 8vw, 120px) !important; position: relative; overflow: hidden; }
.ss-hero h1 em, .ss-hero h1 i { font-style: normal; color: var(--ss-orange); }
.ss-hero__lede { max-width: 720px; margin-top: 28px; }
.ss-hero__meta { display: flex; gap: 40px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ss-line); flex-wrap: wrap; }
.ss-hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.ss-hero__meta-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ss-muted); font-weight: 500; }
.ss-hero__meta-value { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.02em; line-height: 1; }

/* ============ PILLARS / KEY POINTS ============ */
.ss-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; border-top: 1px solid var(--ss-line); }
.ss-pillar { padding: 40px 32px 0 0; border-right: 1px solid var(--ss-line); position: relative; }
.ss-pillar:last-child { border-right: 0; padding-right: 0; }
.ss-pillar__num { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ss-orange); margin-bottom: 18px; display: block; font-weight: 600; }
.ss-pillar h3 { margin-bottom: 12px !important; }
.ss-pillar p { color: var(--ss-muted); font-size: 16px; }
@media (max-width: 900px) { .ss-pillars { grid-template-columns: 1fr; }
  .ss-pillar { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--ss-line); }
  .ss-pillar:last-child { border-bottom: 0; }
}

/* ============ TWO-COLUMN ============ */
.ss-two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.ss-two-col__title h2 { margin: 0 !important; }
@media (max-width: 900px) { .ss-two-col { grid-template-columns: 1fr; gap: 32px; } }

/* ============ FEATURE BLOCK (offre phare) ============ */
.ss-feature {
  background: var(--ss-paper); border: 1px solid var(--ss-line);
  padding: clamp(40px, 5vw, 72px); position: relative;
}
.ss-feature__tag {
  position: absolute; top: -1px; left: -1px;
  background: var(--ss-orange); color: #fff;
  padding: 10px 18px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.ss-feature h2 { margin-top: 24px !important; }
.ss-feature__sub { font-family: 'Inter', sans-serif; font-size: 19px; color: var(--ss-muted); margin-top: 12px; line-height: 1.45; font-weight: 400; max-width: 760px; }
.ss-feature__list { list-style: none !important; padding: 0 !important; margin: 32px 0 0 0 !important; columns: 2; column-gap: 40px; }
.ss-feature__list li { padding: 12px 0; border-bottom: 1px solid var(--ss-line-soft); break-inside: avoid; font-size: 15px; color: var(--ss-ink); }
.ss-feature__list li::before { content: '— '; color: var(--ss-orange); margin-right: 8px; }
@media (max-width: 700px) { .ss-feature__list { columns: 1; } }

/* ============ SERVICE GRID (5 blocs) — sur fond ink ============ */
.ss-services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 64px;
  border-top: 1px solid rgba(245, 241, 234, 0.18);
  border-left: 1px solid rgba(245, 241, 234, 0.18);
}
.ss-service {
  background: transparent; padding: 44px 36px;
  border-bottom: 1px solid rgba(245, 241, 234, 0.18);
  border-right: 1px solid rgba(245, 241, 234, 0.18);
  transition: background .3s;
  min-height: 220px; display: flex; flex-direction: column;
}
.ss-service:hover { background: rgba(245, 241, 234, 0.04); }
.ss-service__num {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.04em;
  color: var(--ss-orange); margin-bottom: 18px; display: block; line-height: 1;
}
.ss-service h3 { margin-bottom: 14px !important; font-size: 24px !important; color: var(--ss-cream) !important; }
.ss-service p { color: rgba(245, 241, 234, 0.65) !important; font-size: 15px; line-height: 1.55; }
.ss-service--cta { display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .ss-services { grid-template-columns: 1fr; } }

/* ============ STEPS (méthode) ============ */
.ss-steps { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
.ss-step { display: grid; grid-template-columns: 100px 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--ss-line); align-items: start; }
.ss-step:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-step__num { font-family: 'Bebas Neue', sans-serif; font-size: 56px; color: var(--ss-orange); line-height: 0.9; letter-spacing: 0.02em; }
.ss-step h3 { margin-bottom: 10px !important; }
.ss-step p { color: var(--ss-muted); }
@media (max-width: 700px) { .ss-step { grid-template-columns: 1fr; gap: 8px; } .ss-step__num { font-size: 40px; } }

/* ============ ZONES (liste villes) ============ */
.ss-zones { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--ss-line); }
.ss-zone { padding: 18px 28px 18px 0; margin-right: 28px; border-right: 1px solid var(--ss-line-soft); font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.03em; line-height: 1; }
.ss-zone:last-child { border-right: 0; margin-right: 0; }

/* ============ DIFFÉRENCIATION (4 blocs) ============ */
.ss-diff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ss-line); margin-top: 64px; border: 1px solid var(--ss-line); }
.ss-diff__item { background: var(--ss-cream); padding: 40px; }
.ss-diff__item h3 { margin-bottom: 12px !important; }
.ss-diff__item p { color: var(--ss-muted); }
@media (max-width: 700px) { .ss-diff { grid-template-columns: 1fr; } }

/* ============ CTA FINAL ============ */
.ss-cta-final { text-align: center; padding: clamp(80px, 12vw, 160px) 0 !important; }
.ss-cta-final h2 { max-width: 880px; margin: 0 auto 24px !important; }
.ss-cta-final p { max-width: 640px; margin: 0 auto; font-size: 19px; }
.ss-cta-final .ss-btn-row { justify-content: center; }

/* ============ SIGNATURE ============ */
.ss-signature {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
  color: var(--ss-muted); text-align: center; padding: 56px 0;
  border-top: 1px solid var(--ss-line); max-width: 720px; margin: 0 auto;
}

/* ============ Force certains contournements Divi ============ */
.ss-page .et_pb_section_video_bg { display: none; }
.ss-page .et_pb_text_inner { width: 100%; }
.ss-page ul { padding-left: 0 !important; list-style: none !important; }
.ss-page ul.ss-list li { padding: 8px 0 8px 24px; position: relative; }
.ss-page ul.ss-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 12px; height: 1px; background: var(--ss-orange); }