/* ============================================================
   DA « Bloc fort » — couche finale, chargée après les autres styles.
   Palette : beige #f2f1e6, bleu #314696, bleu nuit #1f2446, orange #ff7a3d.
   Règles : traits 4-5 px, ombres pleines 8-10 px, titres Montserrat 900
   en capitales, orange en aplat (jamais en texte sur beige).
   Les logos (o-bleu.svg, favicons) et la marque texte ne sont pas modifiés.
   Charte complète : vault Obsidian, note « DA Bloc fort ».
   ============================================================ */

:root {
  --orange: #ff7a3d;
  --orange-deep: #e8622a;
  --brut-border: 4px;
  --brut-border-heavy: 5px;
  --brut-shadow: 8px 8px 0 var(--bleu-nuit);
  --brut-shadow-lg: 10px 10px 0 var(--bleu-nuit);
  --brut-shadow-sm: 4px 4px 0 var(--bleu-nuit);
  --sh-md: 8px 8px 0 var(--bleu-nuit);
  --sh-lg: 10px 10px 0 var(--bleu-nuit);
}

/* ---------- Titres ---------- */
.hero h1,
.section-head h2,
.cta-final h2,
.founder-text h2,
.esq-hero h1,
.esq-split h2,
.auto-hero h1,
.role-intro h2, .section-heading h2, .tools-grid h2, .faq-heading h2,
.white-label h2,
.final-cta h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.section-head h2 { font-size: clamp(34px, 4.6vw, 60px); }
.offer-card h3,
.step-card h3,
.seq-card h3,
.audience-card h3,
.esq-card h3,
.esq-steps h3,
.scope-item h3,
.process-list h3 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Le surlignage du titre devient un bloc orange encadré */
.hero h1 .marker,
.esq-hero h1 .marker,
.auto-hero h1 span {
  background: var(--orange);
  color: var(--bleu-nuit);
  border: 5px solid var(--bleu-nuit);
  box-shadow: 9px 9px 0 var(--bleu-nuit);
  padding: 0 12px;
  margin-top: 10px;
  transform: none;
  display: inline-block;
}
.hero h1 .accent { color: var(--bleu-electrique); font-style: normal; font-weight: 900; }

/* Étiquettes */
.eyebrow,
.section-head .eyebrow,
.offer-kicker,
.auto-kicker {
  font-weight: 900;
  letter-spacing: 0.14em;
}
.inverse .eyebrow,
.inverse .section-head .eyebrow,
.auto-kicker--light { color: var(--orange); }

/* ---------- Boutons ---------- */
.btn {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-width: 4px;
  box-shadow: 6px 6px 0 var(--bleu-nuit);
}
.btn:hover { box-shadow: 9px 9px 0 var(--bleu-nuit); }
.btn-primary { box-shadow: 6px 6px 0 var(--orange); }
.btn-primary:hover { box-shadow: 9px 9px 0 var(--orange); }
.inverse .btn { box-shadow: 6px 6px 0 var(--beige); }
.inverse .btn-primary { background: var(--orange); color: var(--bleu-nuit); border-color: var(--beige); box-shadow: 6px 6px 0 var(--beige); }
.auto-button {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-width: 4px;
  box-shadow: 6px 6px 0 var(--orange);
}
.auto-button:hover { box-shadow: 9px 9px 0 var(--orange); }

/* ---------- Navigation ---------- */
.navbar, .auto-nav { border-bottom-width: 5px; }
.nav-links a { font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }

/* ---------- Hero ---------- */
.hero-badge {
  border-width: 4px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--bleu-nuit);
}
.hero-badge .dot { background: var(--orange); }
.hero-price .amount { font-weight: 900; letter-spacing: -0.04em; }
.hero-types { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-reassure span:not(.sep) { font-weight: 800; }

/* ---------- Bandeau outils : version « bandeau défilant » ---------- */
.compat-strip {
  background: var(--bleu-nuit);
  border-top: 5px solid var(--bleu-nuit);
  border-bottom: 5px solid var(--bleu-nuit);
  color: var(--orange);
}
.compat-label { color: var(--beige); font-weight: 900; }
.compat-logos span { font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); }
.compat-logos span::before { content: '✦'; width: auto; height: auto; background: none; color: var(--beige); font-size: 12px; }

/* ---------- Cartes ---------- */
.seq-card, .step-card, .audience-card, .offer-card, .partner-block, .esq-card {
  border-width: 5px;
  box-shadow: var(--brut-shadow);
}
.step-num {
  background: var(--orange);
  color: var(--bleu-nuit);
  border: 4px solid var(--bleu-nuit);
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--bleu-nuit);
}

/* Offre principale : aplat orange */
.offer-card-main {
  background: var(--orange);
  color: var(--bleu-nuit);
  box-shadow: 10px 10px 0 var(--bleu-nuit);
}
.offer-card-main .offer-kicker,
.offer-card-main > p,
.offer-card-main li,
.offer-card-main li::before { color: var(--bleu-nuit); }
.offer-card-main > p { font-weight: 600; }
.offer-card-main li { border-color: rgba(31, 36, 70, .22); }
.offer-card-main .btn { background: var(--bleu-nuit); color: var(--beige); box-shadow: 6px 6px 0 var(--beige); }
.offer-price { font-weight: 900; letter-spacing: -0.03em; }

/* Témoignages sur fond nuit : ombre orange */
.testi-card, .inverse .testi-card { box-shadow: 10px 10px 0 var(--orange); }

/* FAQ (styles en ligne dans la page) */
#faq details, .esq-faq details, .faq-list details {
  border-width: 4px !important;
  box-shadow: 8px 8px 0 var(--bleu-nuit) !important;
}
#faq summary, .esq-faq summary, .faq-list summary { font-weight: 800; }

/* ---------- Appel final : aplat orange ---------- */
.cta-final.inverse { background: var(--orange); color: var(--bleu-nuit); border-top: 5px solid var(--bleu-nuit); border-bottom: 5px solid var(--bleu-nuit); }
.cta-final.inverse h2, .cta-final.inverse p, .cta-final.inverse .cta-guarantee { color: var(--bleu-nuit); }
.cta-final .marker-dark {
  background: var(--bleu-nuit);
  color: var(--beige);
  padding: 0 12px 4px;
  display: inline-block;
  margin-top: 12px;
}
.cta-final.inverse .cta-guarantee { background: var(--beige); border: 4px solid var(--bleu-nuit); box-shadow: 6px 6px 0 var(--bleu-nuit); font-weight: 800; }
.cta-final.inverse .cta-guarantee span { color: var(--bleu-electrique); }
.cta-final.inverse p[style] { opacity: .9 !important; }
.cta-final.inverse .btn { background: var(--beige); color: var(--bleu-nuit); border-color: var(--bleu-nuit); box-shadow: 6px 6px 0 var(--bleu-nuit); }
.cta-final.inverse .btn-primary { background: var(--bleu-electrique); color: var(--beige); }
.final-cta { border-top: 5px solid var(--bleu-nuit); }

/* ---------- Pied de page ---------- */
.footer { border-top-width: 5px; }
.footer h5 { font-weight: 900; letter-spacing: 0.12em; }

@media (max-width: 720px) {
  .hero h1 .marker, .esq-hero h1 .marker, .auto-hero h1 span { border-width: 4px; box-shadow: 6px 6px 0 var(--bleu-nuit); padding: 0 8px; }
  .section-head h2 { font-size: clamp(30px, 8vw, 42px); }
}