/* ===================== MAXDEV PIX — CHARTE CLAIRE PARTAGÉE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #F5F6F4;
  --bg2: #EDEFEB;
  --surface: #ffffff;
  --surface2: #EFF1EE;
  --border: #D8DDD9;
  --border2: #C5CBC5;
  --text: #10201C;
  --text2: #44554E;
  --text3: #7C8B84;
  --accent: #1F7A5C;
  --accent-hover: #14513C;
  --accent-bg: #E4F1EB;
  --green: #1F7A5C;
  --green-light: #54C79B;
  --green-bg: #E4F1EB;
  --red: #B23A2E;
  --red-bg: #F7E7E5;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --purple: #B5622A;
  --purple-bg: #F6E9DE;
  --tag-bg: #EDEFEB;
  --hero-bg: #0E1A17;
  --r: 0px;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgba(16,32,28,.06);
  --shadow-md: 0 8px 24px rgba(16,32,28,.09);
  --shadow-lg: 0 20px 60px rgba(16,32,28,.14);
}
/* ===================== DA#3 (2026-09-03) — réhabillage cohérent du site ===
   entier avec la 3e direction artistique de la home (voir Étape 11/12 de
   claude/charte-graphique-2026-09-02.md) : coins vifs (--r:0), cartes à
   bordure fine + accent de couleur en haut plutôt qu'à ombre portée, kickers
   IBM Plex Mono en majuscules plutôt que badges pilule, bloc CTA plein et
   footer sombres. Ces classes étant partagées par les 16 autres pages HTML
   du site, ce fichier seul suffit à propager la nouvelle identité sans
   modifier leur HTML — seul le SVG du logo de pied de page (fill codé en dur
   dans chaque fichier) a dû être corrigé en vert pour rester visible sur le
   nouveau fond sombre. =========================================== */
html { color-scheme: light; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.pro-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: white; background: var(--purple); border-radius: 0; padding: 2px 6px; letter-spacing: 0.4px; }

/* ===================== HEADER PARTAGÉ ===================== */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(245,246,244,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header-inner { max-width: 1180px; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 20px; }
.site-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text); flex-shrink: 0; }
.site-logo .logo-box { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.site-logo .logo-box svg { width: 22px; height: 22px; }
.site-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.site-nav a { font-size: 13px; font-weight: 600; color: var(--text2); transition: color .12s; white-space: nowrap; }
.site-nav a:hover, .site-nav a.active { color: var(--accent); }

/* Menu "Plus" du header — regroupe Solutions/Intégrations/Ressources/Blog,
   retirés de la nav principale à l'Étape 13 (header allégé), puis réintroduits
   ici (Étape 15) après retour de l'utilisateur : plus accessibles en un clic
   depuis aucune page. Sur mobile, ces liens restent listés à plat dans
   .mobile-nav-panel (pas de sous-menu, déjà une liste complète). */
.nav-more-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-more-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text2); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body); transition: color .12s; }
.nav-more-toggle:hover, .nav-more-wrap.open .nav-more-toggle, .nav-more-toggle.active { color: var(--accent); }
.nav-more-toggle svg { transition: transform .12s; flex-shrink: 0; }
.nav-more-wrap.open .nav-more-toggle svg { transform: rotate(180deg); }
.nav-more-panel {
  display: none; flex-direction: column; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 172px; background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 150;
}
.nav-more-wrap.open .nav-more-panel { display: flex; }
.nav-more-panel a { padding: 9px 10px; font-size: 13px; font-weight: 600; color: var(--text2); transition: color .12s, background .12s; }
.nav-more-panel a:hover, .nav-more-panel a.active { color: var(--accent); background: var(--surface2); }
.site-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.btn-text { font-size: 13px; font-weight: 600; color: var(--text2); padding: 8px 10px; }
.btn-text:hover { color: var(--text); }
.btn-text-muted { font-size: 12.5px; font-weight: 500; color: var(--text3); padding: 8px 4px; }
.btn-text-muted:hover { color: var(--text2); }
.btn-primary-sm { font-size: 13px; font-weight: 700; color: white; background: var(--accent); padding: 9px 16px; border-radius: 0; transition: background .12s; }
.btn-primary-sm:hover { background: var(--accent-hover); }
/* Compte connecté : email + badge de plan groupés en une seule "puce" visuelle,
   distincte des boutons d'action (Ouvrir l'outil / Se déconnecter) qui suivent. */
.account-chip { display: flex; align-items: center; gap: 7px; background: var(--tag-bg); border-radius: 0; padding: 5px 12px; }
.account-email { font-size: 12.5px; color: var(--text2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Popup de connexion ancré au header */
.login-dropdown-wrap { position: relative; display: flex; align-items: center; gap: 10px; }
.login-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: 18px; z-index: 150;
}
.login-dropdown::before {
  content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.login-dropdown input {
  width: 100%; box-sizing: border-box; padding: 9px 10px; margin-bottom: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 0;
  font-size: 12.5px; color: var(--text); font-family: var(--font-body);
}
.login-dropdown input:focus { outline: none; border-color: var(--accent); }
.ld-sub { font-size: 11.5px; color: var(--text2); margin-bottom: 12px; line-height: 1.6; }
.ld-error { color: var(--red); font-size: 11px; margin-top: 8px; min-height: 14px; }
.ld-success { color: var(--green); font-size: 11px; margin-top: 8px; min-height: 14px; }
.ld-link { display: block; width: 100%; text-align: center; background: none; border: none; font-size: 11.5px; color: var(--accent); cursor: pointer; margin-top: 12px; font-family: var(--font-body); }
.ld-link:hover { text-decoration: underline; }

/* Bouton plein largeur générique (utilisé aussi dans le popup de connexion) */
.btn-run { width: 100%; padding: 10px; background: var(--accent); color: white; border: none; border-radius: 0; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s; font-family: var(--font-body); }
.btn-run:hover { background: var(--accent-hover); }

/* Page dédiée d'inscription (inscription.html) */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 64px 24px 96px; }
.auth-card { background: var(--surface); border: 1px solid rgba(16,32,28,.14); border-top: 3px solid var(--accent); border-radius: 0; padding: 32px; box-shadow: none; }
.auth-card h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); margin: 0 0 8px; text-align: center; }
.auth-card .auth-sub { font-size: 13px; color: var(--text2); text-align: center; margin: 0 0 26px; line-height: 1.6; }
.auth-card input { width: 100%; box-sizing: border-box; padding: 11px 12px; margin-bottom: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 0; font-size: 13.5px; color: var(--text); font-family: var(--font-body); }
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .auth-hint { font-size: 11px; color: var(--text3); margin: -4px 0 14px; line-height: 1.5; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--text2); margin-top: 18px; }
.auth-foot a { color: var(--accent); font-weight: 600; }
.plan-pill-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: white; background: var(--purple); border-radius: 0; padding: 2px 6px; letter-spacing: 0.4px; }
.mobile-nav-toggle {
  display: none; width: 36px; height: 36px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 0; cursor: pointer;
  color: var(--text); flex-shrink: 0; padding: 0;
}
.mobile-nav-toggle svg { width: 18px; height: 18px; }
.mobile-nav-panel {
  display: none; flex-direction: column; padding: 6px 24px 14px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.mobile-nav-panel a {
  padding: 12px 2px; font-size: 14.5px; font-weight: 600; color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.mobile-nav-panel a:last-child { border-bottom: none; }
.mobile-nav-panel a.active, .mobile-nav-panel a:hover { color: var(--accent); }
.mobile-nav-panel.open { display: flex; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  /* Connecté (compte Pro/Free), le header partagé affiche email + pill + liens
     en plus du bouton menu : sur mobile c'est trop de contenu pour une seule
     ligne. On masque l'email et le badge de plan (redondants sur mobile) et on
     autorise le retour à la ligne en dernier recours pour ne plus jamais
     pousser le bouton menu hors de l'écran, quel que soit le contenu injecté
     par site-nav.js. */
  .site-header-inner { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 8px; justify-content: flex-start; }
  .site-header-actions .account-chip { display: none; }
  /* Le nav du milieu est retiré du flux (display:none) : sans ça, space-between
     répartit les 3 éléments restants et fait flotter le bloc de compte au
     centre du header au lieu de le coller au bouton menu. On pousse le logo à
     gauche et on colle compte + bouton menu ensemble à droite. */
  .site-header-actions { margin-left: auto; }
}
@media (max-width: 480px) {
  /* Sur petit mobile, logo + "Se connecter" + "S'inscrire" + le bouton menu
     ne tiennent plus tous sur une ligne : on masque le texte du logo (l'icône
     suffit à identifier la marque) pour éviter que le bouton menu soit poussé
     hors de l'écran. */
  .site-logo .site-logo-text { display: none; }
  .site-header-inner { padding: 0 14px; gap: 8px; }
  .site-header-actions { gap: 6px; }
}
@media (min-width: 861px) {
  .mobile-nav-panel { display: none !important; }
}

/* ===================== FOOTER PARTAGÉ (sombre, DA#3) ===================== */
.site-footer { border-top: 0; background: var(--hero-bg); margin-top: 80px; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #FFFFFF; }
.site-footer-copy { font-size: 12px; color: rgba(245,246,244,.5); margin-top: 6px; }
.site-footer-copy a { color: rgba(245,246,244,.7); }
.site-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer-links a { font-size: 12.5px; color: rgba(245,246,244,.6); font-weight: 500; }
.site-footer-links a:hover { color: var(--green-light); }
.site-footer-legal { max-width: 1180px; margin: 0 auto; padding: 18px 24px 28px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: rgba(245,246,244,.4); }
.site-footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer-legal-links a { color: rgba(245,246,244,.4); }
.site-footer-legal-links a:hover { color: var(--green-light); }

/* ===================== SECTIONS MARKETING GÉNÉRIQUES ===================== */
.marketing { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.marketing-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-align: center; margin-bottom: 16px; }
.marketing-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.005em; text-align: center; color: var(--text); margin-bottom: 14px; line-height: 1.35; }
.marketing-sub { font-size: 14.5px; color: var(--text2); text-align: center; max-width: 640px; margin: 0 auto 48px; line-height: 1.7; }

.btn-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: white; background: var(--accent); padding: 14px 26px; border-radius: 0; box-shadow: none; transition: background .12s; }
.btn-cta:hover { background: var(--accent-hover); }
.btn-cta-outline { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--text); background: white; border: 1px solid var(--text); padding: 13px 24px; border-radius: 0; transition: all .12s; }
.btn-cta-outline:hover { background: var(--text); color: white; }

/* Hero */
.hero { max-width: 1180px; margin: 0 auto; padding: 76px 24px 40px; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: none; padding: 0; border-radius: 0; margin-bottom: 22px; }
.hero h1 { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.008em; line-height: 1.28; color: var(--text); max-width: 780px; margin: 0 auto 20px; }
.hero h1 span { color: var(--accent); }
.hero p { font-size: 16px; color: var(--text2); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text3); }

/* Drop zone simplifiée (accueil) */
.hero-drop { max-width: 640px; margin: 44px auto 0; border: 2px dashed var(--border2); border-radius: 0; padding: 44px 24px; text-align: center; background: var(--bg2); transition: border-color .15s, background .15s; cursor: pointer; }
.hero-drop:hover, .hero-drop.dragover { border-color: var(--accent); background: var(--accent-bg); }
.hero-drop .icon { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--accent); }
.hero-drop .title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.hero-drop .sub { font-size: 12.5px; color: var(--text3); }

/* Comparateur avant/après */
.compare-wrap { max-width: 640px; margin: 0 auto; }
.compare-slider { position: relative; width: 100%; aspect-ratio: 960 / 640; border-radius: 0; overflow: hidden; border: 1px solid rgba(16,32,28,.14); cursor: ew-resize; user-select: none; box-shadow: none; background: var(--surface2); }
.compare-slider img.img-base {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.compare-after-wrap {
  position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; width: 50%;
}
.compare-after-wrap img {
  position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none;
  object-fit: cover; display: block; pointer-events: none;
}
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: white;
  transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); z-index: 2;
}
.compare-handle::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; background: var(--text); border-radius: 0; box-shadow: none;
}
.compare-handle::after {
  content: '◂▸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: white; font-size: 9px; letter-spacing: 3px;
}
.compare-slider.hint .compare-handle { animation: compareHint 1.6s ease-in-out 1; }
@keyframes compareHint {
  0% { left: 50%; }
  30% { left: 38%; }
  65% { left: 62%; }
  100% { left: 50%; }
}
.compare-tag { position: absolute; top: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 0; background: rgba(247,248,246,.9); color: var(--text2); z-index: 3; }
.compare-tag.before { left: 10px; }
.compare-tag.after { right: 10px; color: var(--accent); }
.compare-hint-label {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: white; background: rgba(16,19,26,0.72);
  padding: 5px 12px; border-radius: 0; z-index: 3; pointer-events: none;
}
.compare-stats { display: flex; justify-content: center; gap: 32px; margin-top: 22px; flex-wrap: wrap; }
.compare-stat { text-align: center; }
.compare-stat .v { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text); }
.compare-stat .v.reduc { color: var(--green); }
.compare-stat .l { font-family: var(--font-mono); font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.compare-note { font-family: var(--font-mono); text-align: center; font-size: 11px; letter-spacing: .04em; color: var(--text3); margin-top: 16px; }

/* Grille de fonctionnalités */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.feature-card { background: var(--surface); border: 1px solid rgba(16,32,28,.13); border-top: 3px solid var(--accent); border-radius: 0; padding: 22px; box-shadow: none; transition: border-color .16s ease; }
.feature-card:hover { border-color: rgba(16,32,28,.3); border-top-color: var(--accent); }
.feature-card .fi { width: 36px; height: 36px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.feature-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.feature-card p { font-size: 12.5px; color: var(--text2); line-height: 1.7; }

/* Grille de cartes génériques (Solutions / Intégrations) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.info-card { background: var(--surface); border: 1px solid rgba(16,32,28,.13); border-top: 3px solid var(--accent); border-radius: 0; padding: 28px; box-shadow: none; transition: border-color .16s ease; }
.info-card:hover { border-color: rgba(16,32,28,.3); border-top-color: var(--accent); }
.info-card .tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: none; padding: 0; border-radius: 0; margin-bottom: 16px; }
.info-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.info-card p { font-size: 13px; color: var(--text2); line-height: 1.75; margin-bottom: 14px; }
.info-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.info-card li { font-size: 12.5px; color: var(--text2); padding-left: 18px; position: relative; }
.info-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.info-card a.card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: 4px; }

.badge-soon { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); padding: 3px 9px; border-radius: 0; margin-left: 8px; }

/* FAQ accordéon */
.faq-list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: none; text-align: left; padding: 20px 4px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-body); }
.faq-q .chev { color: var(--text3); font-size: 13px; transition: transform 0.15s; flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a-inner { padding: 0 4px 20px; font-size: 13px; color: var(--text2); line-height: 1.8; }

/* Blog : liste d'articles */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.blog-card { background: var(--surface); border: 1px solid rgba(16,32,28,.13); border-top: 3px solid var(--accent); border-radius: 0; padding: 26px; box-shadow: none; display: flex; flex-direction: column; text-decoration: none; transition: border-color .16s ease; }
.blog-card:hover { border-color: rgba(16,32,28,.3); border-top-color: var(--accent); }
.blog-card .blog-date { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.blog-card h3 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.35; }
.blog-card p { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 0; }
.blog-card .blog-read { margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 700; color: var(--accent); }

/* Article : contenu long format */
.article-wrap { max-width: 720px; margin: 0 auto; padding: 60px 24px 30px; }
.article-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text2); text-decoration: none; margin-bottom: 24px; }
.article-back:hover { color: var(--accent); }
.article-meta { font-size: 12px; color: var(--text3); margin-bottom: 12px; }
.article-wrap h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); margin-bottom: 28px; }
.article-body { font-size: 15px; line-height: 1.85; color: var(--text2); }
.article-body p { margin-bottom: 20px; }
.article-body h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); margin: 40px 0 14px; }
.article-body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text); margin: 28px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body code { font-family: var(--font-mono); background: var(--tag-bg); border-radius: 0; padding: 2px 6px; font-size: 13px; }
.article-body strong { color: var(--text); }
.article-cta { margin-top: 44px; padding: 24px; background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: 0; text-align: center; }
.article-cta p { margin-bottom: 14px; font-size: 13.5px; color: var(--text); }

/* Bandeau CTA de fin de page (bloc plein, sombre — DA#3) */
.cta-banner { max-width: 1100px; margin: 0 auto 72px; background: var(--accent); border-radius: 0; padding: 56px 32px; text-align: center; color: white; }
.cta-banner h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.cta-banner p { font-size: 14px; opacity: .85; margin-bottom: 26px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-cta { background: var(--text); color: white; }
.cta-banner .btn-cta:hover { background: #FFFFFF; color: var(--text); }

/* Toast (réutilisé sur outil.html) */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); border: 1px solid var(--border2); color: white; padding: 10px 18px; border-radius: 0; font-size: 12px; z-index: 400; box-shadow: var(--shadow-md); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.toast.show { opacity: 1; }

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .marketing-title { font-size: 24px; }
}