@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* line 24, app/assets/stylesheets/refonte.scss */
:root {
  --bg:#ffffff;
  --surface-2:#f5f6f9;
  --ink:#12131a;
  --ink-muted:#5c5f6c;
  --line:#e6e7ee;
  --accent:#2b3fe0;
  --accent-soft:#eceefb;
  --accent-ink:#ffffff;
  --good:#1f7a52;
  --good-soft:#e5f3ec;
  --warn:#9a5b12;
  --warn-soft:#faf0df;
  --danger:#a3271f;
  --danger-soft:#fbeae8;
  --shadow: 0 1px 2px rgba(15,16,26,.04), 0 12px 32px -16px rgba(15,16,26,.14);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
}

@media (prefers-color-scheme: dark) {
  /* line 45, app/assets/stylesheets/refonte.scss */
  :root:not([data-theme="light"]) {
    --bg:#0b0c11;
    --surface-2:#14151d;
    --ink:#eef0f6;
    --ink-muted:#9ba0b3;
    --line:#262836;
    --accent:#7c8bff;
    --accent-soft:#1b1f3d;
    --accent-ink:#0b0c11;
    --good:#4fbf8e;
    --good-soft:#123023;
    --warn:#e0ab5c;
    --warn-soft:#2e2412;
    --danger:#e28079;
    --danger-soft:#301715;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}

/* line 54, app/assets/stylesheets/refonte.scss */
[data-theme="dark"]:root {
  --bg:#0b0c11;
  --surface-2:#14151d;
  --ink:#eef0f6;
  --ink-muted:#9ba0b3;
  --line:#262836;
  --accent:#7c8bff;
  --accent-soft:#1b1f3d;
  --accent-ink:#0b0c11;
  --good:#4fbf8e;
  --good-soft:#123023;
  --warn:#e0ab5c;
  --warn-soft:#2e2412;
  --danger:#e28079;
  --danger-soft:#301715;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
}

/* ---------- reset & base ---------- */
/* line 64, app/assets/stylesheets/refonte.scss */
* {
  box-sizing: border-box;
}

/* line 65, app/assets/stylesheets/refonte.scss */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* line 66, app/assets/stylesheets/refonte.scss */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo",system-ui,sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* line 67, app/assets/stylesheets/refonte.scss */
img {
  max-width: 100%;
  display: block;
}

/* line 68, app/assets/stylesheets/refonte.scss */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* line 69, app/assets/stylesheets/refonte.scss */
.wrap-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

/* line 70, app/assets/stylesheets/refonte.scss */
.mono {
  font-family: "JetBrains Mono",ui-monospace,monospace;
}

/* line 71, app/assets/stylesheets/refonte.scss */
a {
  color: inherit;
}

/* line 72, app/assets/stylesheets/refonte.scss */
h1, h2, h3, h4 {
  text-wrap: balance;
  letter-spacing: -.02em;
  margin: 0;
}

/* line 73, app/assets/stylesheets/refonte.scss */
p {
  margin: 0;
}

/* line 74, app/assets/stylesheets/refonte.scss */
ul, ol {
  margin: 0;
  padding: 0;
}

/* line 75, app/assets/stylesheets/refonte.scss */
li {
  list-style: none;
}

/* line 76, app/assets/stylesheets/refonte.scss */
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* line 77, app/assets/stylesheets/refonte.scss */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  /* line 79, app/assets/stylesheets/refonte.scss */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* line 82, app/assets/stylesheets/refonte.scss */
main {
  display: block;
}

/* line 83, app/assets/stylesheets/refonte.scss */
section {
  padding: 88px 0;
}

/* line 84, app/assets/stylesheets/refonte.scss */
section.tight {
  padding: 56px 0;
}

/* line 85, app/assets/stylesheets/refonte.scss */
section + section {
  border-top: 1px solid var(--line);
}

/* line 86, app/assets/stylesheets/refonte.scss */
.section-head {
  max-width: 900px;
  margin-bottom: 44px;
}

/* line 87, app/assets/stylesheets/refonte.scss */
.section-head h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  margin-top: 14px;
}

/* line 88, app/assets/stylesheets/refonte.scss */
.section-head p {
  color: var(--ink-muted);
  font-size: 16.5px;
  margin-top: 10px;
}

/* line 89, app/assets/stylesheets/refonte.scss */
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- eyebrow / section label ---------- */
/* line 92, app/assets/stylesheets/refonte.scss */
.eyebrow {
  font-family: "JetBrains Mono",monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* line 97, app/assets/stylesheets/refonte.scss */
.eyebrow::before {
  content: "{ }";
}

/* ---------- breadcrumb ---------- */
/* line 100, app/assets/stylesheets/refonte.scss */
.breadcrumb {
  font-family: "JetBrains Mono",monospace;
  font-size: 12.5px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* line 104, app/assets/stylesheets/refonte.scss */
.breadcrumb a {
  text-decoration: none;
  color: var(--ink-muted);
}

/* line 105, app/assets/stylesheets/refonte.scss */
.breadcrumb a:hover {
  color: var(--accent);
}

/* line 106, app/assets/stylesheets/refonte.scss */
.breadcrumb .sep {
  opacity: .5;
}

/* line 107, app/assets/stylesheets/refonte.scss */
.breadcrumb .current {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- buttons / links ---------- */
/* line 110, app/assets/stylesheets/refonte.scss */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: var(--radius-s);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease;
}

/* line 116, app/assets/stylesheets/refonte.scss */
.btn:hover {
  opacity: .92;
}

/* line 117, app/assets/stylesheets/refonte.scss */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 19px;
  border-radius: var(--radius-s);
  text-decoration: none;
  border: 1.5px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease;
}

/* line 123, app/assets/stylesheets/refonte.scss */
.btn-secondary:hover {
  border-color: var(--ink);
}

/* line 124, app/assets/stylesheets/refonte.scss */
.text-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* line 128, app/assets/stylesheets/refonte.scss */
.text-link::after {
  content: "→";
  transition: transform .15s ease;
}

/* line 129, app/assets/stylesheets/refonte.scss */
.text-link:hover::after {
  transform: translateX(2px);
}

/* ---------- CTA flottante (retour du 2026-09-14, inspirée de la position/
   du principe de tagexpert.fr — couleur et forme propres au site, cf.
   commit sur le bloc outils pour la même logique de différenciation) ---------- */
/* line 134, app/assets/stylesheets/refonte.scss */
.floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* line 139, app/assets/stylesheets/refonte.scss */
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* line 140, app/assets/stylesheets/refonte.scss */
.floating-cta .btn {
  border-radius: 999px;
  padding: 14px 24px 14px 20px;
  box-shadow: var(--shadow);
}

/* line 141, app/assets/stylesheets/refonte.scss */
.floating-cta .btn svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 640px) {
  /* line 143, app/assets/stylesheets/refonte.scss */
  .floating-cta {
    right: 16px;
    bottom: 16px;
  }
  /* line 144, app/assets/stylesheets/refonte.scss */
  .floating-cta .btn {
    padding: 13px 20px 13px 17px;
    font-size: 14px;
  }
}

/* ---------- header / nav ---------- */
/* position:sticky doit être sur le <header> de nav (body > header, celui
   qui contient nav.top) et pas sur nav.top lui-même : ce <header> fait
   exactement la hauteur de nav.top (aucun autre enfant en flux), donc un
   sticky posé sur nav.top n'avait aucune marge pour "coller" — il défilait
   avec la page dès le premier pixel de scroll (vérifié : header sortait du
   viewport dès qu'on scrollait, jamais visible au-delà de ~69px de
   scroll). Sélecteur "body > header" et pas juste "header" : la homepage a
   son propre <header class="hero"> imbriqué dans <main> pour la section
   hero — un sélecteur générique le rendrait sticky aussi et le ferait se
   superposer au contenu qui suit (repéré en testant, corrigé avant commit).
   Corrigé le 2026-09-14. */
/* line 159, app/assets/stylesheets/refonte.scss */
body > header {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* line 160, app/assets/stylesheets/refonte.scss */
nav.top {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* line 164, app/assets/stylesheets/refonte.scss */
nav.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* line 165, app/assets/stylesheets/refonte.scss */
.brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

/* line 166, app/assets/stylesheets/refonte.scss */
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* line 167, app/assets/stylesheets/refonte.scss */
.navlinks {
  display: flex;
  gap: 32px;
  font-size: 14.5px;
  font-weight: 500;
  align-items: center;
}

/* line 168, app/assets/stylesheets/refonte.scss */
.navlinks > .hasmega > a {
  text-decoration: none;
  color: var(--ink-muted);
}

/* line 169, app/assets/stylesheets/refonte.scss */
.navlinks > .hasmega > a:hover {
  color: var(--ink);
}

/* line 170, app/assets/stylesheets/refonte.scss */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* line 171, app/assets/stylesheets/refonte.scss */
.nav-cta .btn svg, .mobile-panel .btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* line 172, app/assets/stylesheets/refonte.scss */
.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* line 173, app/assets/stylesheets/refonte.scss */
.nav-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
}

/* line 175, app/assets/stylesheets/refonte.scss */
.hasmega {
  position: relative;
}

/* Comble l'espace entre le lien et le megamenu (top:calc(100% + 16px) plus
   bas) : sans ce pont invisible, la souris perd le survol en traversant ce
   vide et le megamenu se ferme avant que le curseur n'atteigne les liens. */
/* line 179, app/assets/stylesheets/refonte.scss */
.hasmega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

/* line 180, app/assets/stylesheets/refonte.scss */
.hasmega > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* line 181, app/assets/stylesheets/refonte.scss */
.hasmega > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

/* line 182, app/assets/stylesheets/refonte.scss */
.megamenu {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 28px;
  display: grid;
  gap: 32px;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

/* line 189, app/assets/stylesheets/refonte.scss */
.megamenu.cols-4 {
  grid-template-columns: repeat(3, 168px) 148px;
}

/* line 190, app/assets/stylesheets/refonte.scss */
.megamenu.cols-3 {
  grid-template-columns: repeat(3, 178px);
}

/* line 191, app/assets/stylesheets/refonte.scss */
.megamenu.cols-2 {
  grid-template-columns: repeat(2, 200px);
}

/* line 192, app/assets/stylesheets/refonte.scss */
.hasmega:hover .megamenu, .hasmega:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* line 195, app/assets/stylesheets/refonte.scss */
.megacol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 196, app/assets/stylesheets/refonte.scss */
.megacol + .megacol {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

/* line 197, app/assets/stylesheets/refonte.scss */
.megatitle {
  font-family: "JetBrains Mono",monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

/* étiquette au-dessus d'une rangée de chip-row, utile dès qu'une page a
   plus d'un groupe de filtres (ex. secteur + catégorie sur
   /customer_cases, retour du 2026-09-14) pour distinguer les rangées */
/* line 202, app/assets/stylesheets/refonte.scss */
.chip-row-label {
  font-family: "JetBrains Mono",monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin: 14px 0 6px;
}

/* line 203, app/assets/stylesheets/refonte.scss */
.chip-row-label:first-child {
  margin-top: 0;
}

/* line 204, app/assets/stylesheets/refonte.scss */
.megacol a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

/* line 205, app/assets/stylesheets/refonte.scss */
.megacol a:hover {
  color: var(--accent);
}

/* line 206, app/assets/stylesheets/refonte.scss */
.megacol.who a {
  color: var(--ink-muted);
  font-weight: 500;
}

/* line 207, app/assets/stylesheets/refonte.scss */
.megacol.who a:hover {
  color: var(--accent);
}

/* line 208, app/assets/stylesheets/refonte.scss */
.megafoot {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* line 209, app/assets/stylesheets/refonte.scss */
.megafoot a {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* line 210, app/assets/stylesheets/refonte.scss */
.megafoot a::after {
  content: "→";
  margin-left: 5px;
}

/* mobile nav panel */
/* line 213, app/assets/stylesheets/refonte.scss */
.mobile-panel {
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--bg);
  z-index: 19;
  padding: 24px 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .2s ease;
  /* flex + gap plutôt qu'un margin-bottom individuel par type d'enfant
     (mgroup en avait un, mtop/btn non) : ça donnait un écart de 0px entre
     "Accueil" et le premier groupe contre 28px entre les groupes suivants,
     un espacement visiblement irrégulier signalé par l'utilisateur
     (retour du 2026-09-14) — gap uniforme quel que soit le type d'enfant. */
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* line 223, app/assets/stylesheets/refonte.scss */
.mobile-panel.open {
  transform: translateX(0);
}

/* line 224, app/assets/stylesheets/refonte.scss */
.mobile-panel .mgroup summary {
  font-weight: 700;
  font-size: 15px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 225, app/assets/stylesheets/refonte.scss */
.mobile-panel .mgroup summary::-webkit-details-marker {
  display: none;
}

/* line 226, app/assets/stylesheets/refonte.scss */
.mobile-panel .mgroup summary::after {
  content: "+";
  color: var(--ink-muted);
  font-weight: 400;
}

/* line 227, app/assets/stylesheets/refonte.scss */
.mobile-panel .mgroup[open] summary::after {
  content: "–";
}

/* line 228, app/assets/stylesheets/refonte.scss */
.mobile-panel .mgroup a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  color: var(--ink-muted);
  text-decoration: none;
}

/* line 229, app/assets/stylesheets/refonte.scss */
.mobile-panel > a.mtop {
  display: block;
  padding: 14px 0;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

/* line 230, app/assets/stylesheets/refonte.scss */
.mobile-panel .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  /* line 233, app/assets/stylesheets/refonte.scss */
  .navlinks {
    display: none;
  }
  /* line 234, app/assets/stylesheets/refonte.scss */
  .nav-toggle {
    display: flex;
  }
  /* line 235, app/assets/stylesheets/refonte.scss */
  .nav-cta .btn {
    display: none;
  }
}

/* ---------- footer ---------- */
/* line 239, app/assets/stylesheets/refonte.scss */
footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* line 240, app/assets/stylesheets/refonte.scss */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

/* line 241, app/assets/stylesheets/refonte.scss */
.footer-brand .brand {
  margin-bottom: 10px;
}

/* line 242, app/assets/stylesheets/refonte.scss */
.footer-brand p {
  color: var(--ink-muted);
  font-size: 13.5px;
  max-width: 32ch;
  margin-bottom: 16px;
}

/* line 243, app/assets/stylesheets/refonte.scss */
.footer-col h4 {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 14px;
}

/* line 244, app/assets/stylesheets/refonte.scss */
.footer-col a {
  display: block;
  text-decoration: none;
  color: var(--ink-muted);
  padding: 6px 0;
  font-size: 14px;
}

/* line 245, app/assets/stylesheets/refonte.scss */
.footer-col a:hover {
  color: var(--accent);
}

/* line 246, app/assets/stylesheets/refonte.scss */
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

/* line 247, app/assets/stylesheets/refonte.scss */
.footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

/* line 248, app/assets/stylesheets/refonte.scss */
.footer-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* line 249, app/assets/stylesheets/refonte.scss */
.footer-newsletter {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* line 250, app/assets/stylesheets/refonte.scss */
.footer-newsletter strong {
  color: var(--ink);
  font-size: 14.5px;
}

/* line 251, app/assets/stylesheets/refonte.scss */
.footer-newsletter form {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 380px;
  min-width: 260px;
}

/* line 252, app/assets/stylesheets/refonte.scss */
.footer-newsletter input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}

/* line 253, app/assets/stylesheets/refonte.scss */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* line 254, app/assets/stylesheets/refonte.scss */
.footer-bottom a {
  color: var(--ink-muted);
  text-decoration: none;
  margin-left: 18px;
}

/* line 255, app/assets/stylesheets/refonte.scss */
.footer-bottom a:hover {
  color: var(--accent);
}

@media (max-width: 860px) {
  /* line 257, app/assets/stylesheets/refonte.scss */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* line 258, app/assets/stylesheets/refonte.scss */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 259, app/assets/stylesheets/refonte.scss */
  .footer-bottom .legal a {
    margin-left: 0;
    margin-right: 16px;
  }
}

/* ---------- chips ---------- */
/* line 263, app/assets/stylesheets/refonte.scss */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono",monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}

/* line 268, app/assets/stylesheets/refonte.scss */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* line 269, app/assets/stylesheets/refonte.scss */
.chip-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
}

/* line 270, app/assets/stylesheets/refonte.scss */
.filter-chip {
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

/* line 275, app/assets/stylesheets/refonte.scss */
.filter-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* line 276, app/assets/stylesheets/refonte.scss */
.filter-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* ---------- search field ---------- */
/* line 279, app/assets/stylesheets/refonte.scss */
.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 16px 20px;
}

/* line 283, app/assets/stylesheets/refonte.scss */
.search-field svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-muted);
  flex: none;
}

/* line 284, app/assets/stylesheets/refonte.scss */
.search-field input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
}

/* line 287, app/assets/stylesheets/refonte.scss */
.search-field input::placeholder {
  color: var(--ink-muted);
}

/* ---------- cards ---------- */
/* line 290, app/assets/stylesheets/refonte.scss */
.card-grid {
  display: grid;
  gap: 24px;
}

/* line 291, app/assets/stylesheets/refonte.scss */
.card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* line 292, app/assets/stylesheets/refonte.scss */
.card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  /* line 294, app/assets/stylesheets/refonte.scss */
  .card-grid.cols-3, .card-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* line 297, app/assets/stylesheets/refonte.scss */
.expertise-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 32px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .15s ease;
}

/* line 301, app/assets/stylesheets/refonte.scss */
.expertise-card:hover {
  border-color: var(--ink);
}

/* line 302, app/assets/stylesheets/refonte.scss */
.expertise-card h3 {
  font-size: 19px;
  font-weight: 700;
}

/* line 303, app/assets/stylesheets/refonte.scss */
.expertise-card p {
  color: var(--ink-muted);
  font-size: 14.5px;
}

/* line 304, app/assets/stylesheets/refonte.scss */
.expertise-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}

/* line 305, app/assets/stylesheets/refonte.scss */
.expertise-card li {
  font-size: 13.5px;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* line 306, app/assets/stylesheets/refonte.scss */
.expertise-card li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex: none;
}

/* line 308, app/assets/stylesheets/refonte.scss */
.article-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}

/* line 313, app/assets/stylesheets/refonte.scss */
.article-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* line 314, app/assets/stylesheets/refonte.scss */
.article-card img.thumb {
  width: calc(100% + 52px);
  margin: -26px -26px 4px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

/* line 318, app/assets/stylesheets/refonte.scss */
.article-card .cat {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  font-weight: 600;
}

/* line 319, app/assets/stylesheets/refonte.scss */
.article-card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

/* line 320, app/assets/stylesheets/refonte.scss */
.article-card p {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* line 321, app/assets/stylesheets/refonte.scss */
.article-card .meta {
  font-family: "JetBrains Mono",monospace;
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

/* line 322, app/assets/stylesheets/refonte.scss */
.article-card .meta .dot {
  opacity: .5;
}

/* line 324, app/assets/stylesheets/refonte.scss */
.article-card.featured {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  padding: 36px;
  align-items: center;
}

/* line 325, app/assets/stylesheets/refonte.scss */
.article-card.featured h3 {
  font-size: 24px;
}

@media (max-width: 760px) {
  /* line 327, app/assets/stylesheets/refonte.scss */
  .article-card.featured {
    grid-template-columns: 1fr;
  }
}

/* line 330, app/assets/stylesheets/refonte.scss */
.case-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 32px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}

/* line 334, app/assets/stylesheets/refonte.scss */
.case-card .logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 335, app/assets/stylesheets/refonte.scss */
.case-card .logo-row img {
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
}

/* line 336, app/assets/stylesheets/refonte.scss */
.case-card .badge {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 5px 12px;
}

/* line 337, app/assets/stylesheets/refonte.scss */
.case-card h3 {
  font-size: 19px;
  font-weight: 700;
}

/* line 338, app/assets/stylesheets/refonte.scss */
.case-card .kv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

/* line 339, app/assets/stylesheets/refonte.scss */
.case-card .kv b {
  color: var(--ink);
  font-weight: 700;
  display: block;
  font-size: 12px;
  font-family: "JetBrains Mono",monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

/* line 340, app/assets/stylesheets/refonte.scss */
.case-card .kv span {
  color: var(--ink-muted);
}

/* line 341, app/assets/stylesheets/refonte.scss */
.case-card .stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* line 343, app/assets/stylesheets/refonte.scss */
.case-card-compact {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}

/* line 348, app/assets/stylesheets/refonte.scss */
.case-card-compact:hover {
  border-color: var(--ink);
}

/* line 349, app/assets/stylesheets/refonte.scss */
.case-card-compact img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* line 350, app/assets/stylesheets/refonte.scss */
.case-card-compact h4 {
  font-size: 15.5px;
  font-weight: 700;
}

/* line 351, app/assets/stylesheets/refonte.scss */
.case-card-compact p {
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* ---------- KPI / stat ---------- */
/* line 354, app/assets/stylesheets/refonte.scss */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* line 355, app/assets/stylesheets/refonte.scss */
.stat {
  background: var(--bg);
  padding: 20px 18px;
}

/* line 356, app/assets/stylesheets/refonte.scss */
.stat b {
  font-family: "JetBrains Mono",monospace;
  font-size: 28px;
  font-weight: 600;
  display: block;
}

/* line 357, app/assets/stylesheets/refonte.scss */
.stat span {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* ---------- testimonial ---------- */
/* line 360, app/assets/stylesheets/refonte.scss */
.testimonial {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  background: var(--surface-2);
}

/* line 361, app/assets/stylesheets/refonte.scss */
.testimonial .stars {
  display: flex;
  gap: 1px;
  color: #e0a52c;
  margin-bottom: 14px;
}

/* line 362, app/assets/stylesheets/refonte.scss */
.testimonial p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* line 363, app/assets/stylesheets/refonte.scss */
.testimonial cite {
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* line 364, app/assets/stylesheets/refonte.scss */
.testimonial.dark {
  background: var(--ink);
  color: #fff;
}

/* line 365, app/assets/stylesheets/refonte.scss */
.testimonial.dark p {
  font-size: 17.5px;
}

/* line 366, app/assets/stylesheets/refonte.scss */
.testimonial.dark cite {
  color: #ffffffa8;
}

/* line 368, app/assets/stylesheets/refonte.scss */
.testimonials {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}

/* line 369, app/assets/stylesheets/refonte.scss */
.section-foot-link {
  margin-top: 28px;
}

/* line 370, app/assets/stylesheets/refonte.scss */
.testimonials .testimonial:nth-child(1) {
  grid-column: 1;
  grid-row: 1/3;
}

/* line 371, app/assets/stylesheets/refonte.scss */
.testimonials .testimonial:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* line 372, app/assets/stylesheets/refonte.scss */
.testimonials .testimonial:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 860px) {
  /* line 374, app/assets/stylesheets/refonte.scss */
  .testimonials {
    grid-template-columns: 1fr;
  }
  /* line 375, app/assets/stylesheets/refonte.scss */
  .testimonials .testimonial:nth-child(1), .testimonials .testimonial:nth-child(2), .testimonials .testimonial:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---------- back to top ---------- */
/* line 379, app/assets/stylesheets/refonte.scss */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  text-decoration: none;
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color .15s ease,color .15s ease;
}

/* line 385, app/assets/stylesheets/refonte.scss */
.back-to-top:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* line 386, app/assets/stylesheets/refonte.scss */
.back-to-top svg {
  width: 15px;
  height: 15px;
}

/* ---------- code block ---------- */
/* line 389, app/assets/stylesheets/refonte.scss */
.code-block {
  background: #14151d;
  border-radius: var(--radius-m);
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid var(--line);
}

/* line 393, app/assets/stylesheets/refonte.scss */
.code-block .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: #1b1c26;
  border-bottom: 1px solid #2a2b38;
}

/* line 397, app/assets/stylesheets/refonte.scss */
.code-block .code-lang {
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  color: #8b8fa3;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* line 398, app/assets/stylesheets/refonte.scss */
.code-block .copy-btn {
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  color: #c7c9d9;
  background: none;
  border: 1px solid #333548;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

/* line 402, app/assets/stylesheets/refonte.scss */
.code-block .copy-btn:hover {
  border-color: #6f77ff;
  color: #fff;
}

/* line 403, app/assets/stylesheets/refonte.scss */
.code-block .copy-btn.copied {
  color: #4fbf8e;
  border-color: #4fbf8e;
}

/* line 404, app/assets/stylesheets/refonte.scss */
.code-block pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
}

/* line 405, app/assets/stylesheets/refonte.scss */
.code-block code {
  font-family: "JetBrains Mono",monospace;
  font-size: 13.5px;
  line-height: 1.65;
  color: #e3e5f2;
  white-space: pre;
}

/* line 406, app/assets/stylesheets/refonte.scss */
code.inline {
  font-family: "JetBrains Mono",monospace;
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

/* ---------- callout / quote ---------- */
/* line 412, app/assets/stylesheets/refonte.scss */
.callout {
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin: 28px 0;
  display: flex;
  gap: 14px;
  border: 1px solid var(--line);
}

/* line 413, app/assets/stylesheets/refonte.scss */
.callout .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

/* line 414, app/assets/stylesheets/refonte.scss */
.callout .body b {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: "JetBrains Mono",monospace;
  margin-bottom: 6px;
}

/* line 415, app/assets/stylesheets/refonte.scss */
.callout .body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* line 416, app/assets/stylesheets/refonte.scss */
.callout.info {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* line 417, app/assets/stylesheets/refonte.scss */
.callout.info .icon {
  color: var(--accent);
}

/* line 418, app/assets/stylesheets/refonte.scss */
.callout.info b {
  color: var(--accent);
}

/* line 419, app/assets/stylesheets/refonte.scss */
.callout.tip {
  background: var(--good-soft);
  border-color: var(--good);
}

/* line 420, app/assets/stylesheets/refonte.scss */
.callout.tip .icon {
  color: var(--good);
}

/* line 421, app/assets/stylesheets/refonte.scss */
.callout.tip b {
  color: var(--good);
}

/* line 422, app/assets/stylesheets/refonte.scss */
.callout.warn {
  background: var(--warn-soft);
  border-color: var(--warn);
}

/* line 423, app/assets/stylesheets/refonte.scss */
.callout.warn .icon {
  color: var(--warn);
}

/* line 424, app/assets/stylesheets/refonte.scss */
.callout.warn b {
  color: var(--warn);
}

/* line 426, app/assets/stylesheets/refonte.scss */
blockquote.pull-quote {
  border-left: 3px solid var(--accent);
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- table of contents ---------- */
/* line 432, app/assets/stylesheets/refonte.scss */
.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  position: sticky;
  top: 88px;
}

/* line 433, app/assets/stylesheets/refonte.scss */
.toc-title {
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

/* line 434, app/assets/stylesheets/refonte.scss */
.toc ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: toc;
}

/* line 435, app/assets/stylesheets/refonte.scss */
.toc li {
  counter-increment: toc;
}

/* line 436, app/assets/stylesheets/refonte.scss */
.toc a {
  display: flex;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}

/* line 440, app/assets/stylesheets/refonte.scss */
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "JetBrains Mono",monospace;
  font-size: 12px;
  color: var(--ink-muted);
  flex: none;
}

/* line 441, app/assets/stylesheets/refonte.scss */
.toc a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* line 442, app/assets/stylesheets/refonte.scss */
.toc a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* line 443, app/assets/stylesheets/refonte.scss */
.toc a.active::before {
  color: var(--accent);
}

/* line 445, app/assets/stylesheets/refonte.scss */
.toc-mobile {
  display: none;
}

@media (max-width: 980px) {
  /* line 447, app/assets/stylesheets/refonte.scss */
  .toc {
    display: none;
  }
  /* line 448, app/assets/stylesheets/refonte.scss */
  .toc-mobile {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    margin-bottom: 32px;
  }
  /* line 449, app/assets/stylesheets/refonte.scss */
  .toc-mobile summary {
    padding: 16px 20px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* line 450, app/assets/stylesheets/refonte.scss */
  .toc-mobile summary::-webkit-details-marker {
    display: none;
  }
  /* line 451, app/assets/stylesheets/refonte.scss */
  .toc-mobile summary::after {
    content: "▾";
    color: var(--ink-muted);
  }
  /* line 452, app/assets/stylesheets/refonte.scss */
  .toc-mobile[open] summary::after {
    content: "▴";
  }
  /* line 453, app/assets/stylesheets/refonte.scss */
  .toc-mobile ol {
    padding: 0 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    counter-reset: toc;
  }
  /* line 454, app/assets/stylesheets/refonte.scss */
  .toc-mobile a {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--ink-muted);
    font-size: 14px;
  }
  /* line 455, app/assets/stylesheets/refonte.scss */
  .toc-mobile a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: "JetBrains Mono",monospace;
    font-size: 12px;
    flex: none;
  }
}

/* ---------- FAQ accordion ---------- */
/* line 459, app/assets/stylesheets/refonte.scss */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}

/* line 460, app/assets/stylesheets/refonte.scss */
.faq-item {
  border-bottom: 1px solid var(--line);
}

/* line 461, app/assets/stylesheets/refonte.scss */
.faq-item summary {
  padding: 22px 4px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* line 465, app/assets/stylesheets/refonte.scss */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* line 466, app/assets/stylesheets/refonte.scss */
.faq-item summary::after {
  content: "+";
  color: var(--ink-muted);
  font-size: 22px;
  font-weight: 400;
  flex: none;
  transition: transform .15s ease;
}

/* line 467, app/assets/stylesheets/refonte.scss */
.faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* line 468, app/assets/stylesheets/refonte.scss */
.faq-item .faq-a {
  padding: 0 4px 22px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
}

/* ---------- CTA block ---------- */
/* line 471, app/assets/stylesheets/refonte.scss */
.cta-block {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-l);
  padding: 56px;
  text-align: center;
}

/* line 474, app/assets/stylesheets/refonte.scss */
.cta-block h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  max-width: 24ch;
  margin: 0 auto 24px;
  color: #fff;
}

/* line 475, app/assets/stylesheets/refonte.scss */
.cta-block .btn {
  background: #fff;
  color: var(--ink);
}

/* line 476, app/assets/stylesheets/refonte.scss */
.cta-block-inline {
  border: 1px dashed var(--line);
  border-radius: var(--radius-m);
  padding: 22px 26px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* line 480, app/assets/stylesheets/refonte.scss */
.cta-block-inline p {
  font-weight: 600;
  font-size: 15px;
}

/* ---------- prose (article body) ---------- */
/* line 483, app/assets/stylesheets/refonte.scss */
.prose {
  max-width: 720px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink);
}

/* line 484, app/assets/stylesheets/refonte.scss */
.prose h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 48px 0 18px;
  scroll-margin-top: 100px;
}

/* line 485, app/assets/stylesheets/refonte.scss */
.prose h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 32px 0 14px;
  scroll-margin-top: 100px;
}

/* line 486, app/assets/stylesheets/refonte.scss */
.prose p {
  margin: 0 0 20px;
  color: var(--ink);
}

/* line 487, app/assets/stylesheets/refonte.scss */
.prose p.chapo {
  font-size: 19px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* line 488, app/assets/stylesheets/refonte.scss */
.prose ul, .prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

/* line 489, app/assets/stylesheets/refonte.scss */
.prose li {
  list-style: disc;
  margin-bottom: 8px;
  color: var(--ink);
}

/* line 490, app/assets/stylesheets/refonte.scss */
.prose ol > li {
  list-style: decimal;
}

/* line 491, app/assets/stylesheets/refonte.scss */
.prose a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* line 492, app/assets/stylesheets/refonte.scss */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14.5px;
}

/* line 493, app/assets/stylesheets/refonte.scss */
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
}

/* line 494, app/assets/stylesheets/refonte.scss */
.prose th {
  background: var(--surface-2);
  font-weight: 700;
  font-family: "JetBrains Mono",monospace;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* line 495, app/assets/stylesheets/refonte.scss */
.prose figure {
  margin: 32px 0;
}

/* line 496, app/assets/stylesheets/refonte.scss */
.prose figcaption {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 10px;
  text-align: center;
}

/* ---------- contact person ---------- */
/* line 499, app/assets/stylesheets/refonte.scss */
.contact-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* line 500, app/assets/stylesheets/refonte.scss */
.contact-person img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* line 501, app/assets/stylesheets/refonte.scss */
.contact-person b {
  display: block;
  font-size: 14.5px;
}

/* line 502, app/assets/stylesheets/refonte.scss */
.contact-person span {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------- utility ---------- */
/* line 505, app/assets/stylesheets/refonte.scss */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* line 506, app/assets/stylesheets/refonte.scss */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* line 510, app/assets/stylesheets/refonte.scss */
.skip-link:focus {
  left: 0;
}

/* line 511, app/assets/stylesheets/refonte.scss */
.center {
  text-align: center;
}

/* line 512, app/assets/stylesheets/refonte.scss */
.mt-0 {
  margin-top: 0;
}

@media (max-width: 760px) {
  /* line 515, app/assets/stylesheets/refonte.scss */
  .hide-mobile {
    display: none;
  }
  /* line 516, app/assets/stylesheets/refonte.scss */
  section {
    padding: 56px 0;
  }
}

/* ==========================================================================
   Homepage (Phase 3.1) — porté depuis chridubois-refonte/maquette-homepage.html
   Classes propres à la homepage, non partagées avec les autres templates.
   Le nav/footer de la maquette ne sont PAS repris ici : la homepage utilise
   header_v2/footer_v2 (Phase 2) comme toutes les pages v2.
   ========================================================================== */
/* ---------- hero ---------- */
/* line 527, app/assets/stylesheets/refonte.scss */
.hero {
  padding: 76px 0 64px;
}

/* line 528, app/assets/stylesheets/refonte.scss */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
}

/* line 529, app/assets/stylesheets/refonte.scss */
.hero h1 {
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  margin: 18px 0 20px;
}

/* line 530, app/assets/stylesheets/refonte.scss */
.hero .lede {
  font-size: 19px;
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: 28px;
}

/* line 531, app/assets/stylesheets/refonte.scss */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* line 532, app/assets/stylesheets/refonte.scss */
.proof {
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  color: var(--ink-muted);
}

/* line 533, app/assets/stylesheets/refonte.scss */
.proof-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  text-decoration: none;
}

/* line 534, app/assets/stylesheets/refonte.scss */
.proof-rating:hover {
  color: var(--ink);
}

/* line 535, app/assets/stylesheets/refonte.scss */
.proof-rating .stars {
  display: inline-flex;
  gap: 1px;
  color: #e0a52c;
}

/* line 536, app/assets/stylesheets/refonte.scss */
.proof b {
  color: var(--ink);
  font-weight: 600;
}

/* line 538, app/assets/stylesheets/refonte.scss */
.hero-visual {
  position: relative;
}

/* line 539, app/assets/stylesheets/refonte.scss */
.hero-photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: block;
}

/* line 540, app/assets/stylesheets/refonte.scss */
.code-panel {
  position: absolute;
  left: -28px;
  bottom: -28px;
  width: 280px;
  max-width: 72%;
  background: var(--ink);
  color: #dfe3ff;
  border-radius: 12px;
  padding: 18px 18px 15px;
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  line-height: 1.7;
  box-shadow: var(--shadow);
}

/* line 545, app/assets/stylesheets/refonte.scss */
.code-panel .dots {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

/* line 546, app/assets/stylesheets/refonte.scss */
.code-panel .dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff30;
}

/* line 547, app/assets/stylesheets/refonte.scss */
.code-panel .tag {
  color: #8fa0ff;
}

/* line 548, app/assets/stylesheets/refonte.scss */
.code-panel .str {
  color: #9be3b8;
}

/* line 549, app/assets/stylesheets/refonte.scss */
.code-panel .key {
  color: #c9cdf2;
}

/* line 550, app/assets/stylesheets/refonte.scss */
.code-panel .fired {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9be3b8;
  font-weight: 600;
  font-size: 11px;
  border-top: 1px dashed #ffffff22;
  padding-top: 10px;
}

/* ---------- logo strip (réassurance) ---------- */
/* line 556, app/assets/stylesheets/refonte.scss */
.logostrip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  text-align: center;
}

/* line 557, app/assets/stylesheets/refonte.scss */
.logostrip .lbl {
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: .04em;
  white-space: nowrap;
  margin-bottom: 20px;
  display: block;
}

/* line 558, app/assets/stylesheets/refonte.scss */
.logos {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* line 559, app/assets/stylesheets/refonte.scss */
.logomark {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* line 560, app/assets/stylesheets/refonte.scss */
.logomark.featured {
  height: 44px;
}

/* line 561, app/assets/stylesheets/refonte.scss */
.logomark-more {
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 500;
}

/* line 562, app/assets/stylesheets/refonte.scss */
.logomark-more:hover {
  color: var(--accent);
}

/* ---------- problem grid ---------- */
/* line 565, app/assets/stylesheets/refonte.scss */
.problems {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* line 566, app/assets/stylesheets/refonte.scss */
.problem {
  background: var(--bg);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 567, app/assets/stylesheets/refonte.scss */
.problem .q {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
}

/* line 568, app/assets/stylesheets/refonte.scss */
.problem .a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* line 572, app/assets/stylesheets/refonte.scss */
.problem .a::after {
  content: "→";
}

/* ---------- 3 pillars ---------- */
/* line 575, app/assets/stylesheets/refonte.scss */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* line 576, app/assets/stylesheets/refonte.scss */
.pillar {
  border-top: 3px solid var(--ink);
  padding-top: 20px;
}

/* line 577, app/assets/stylesheets/refonte.scss */
.pillar .n {
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  color: var(--ink-muted);
}

/* line 578, app/assets/stylesheets/refonte.scss */
.pillar h3 {
  font-size: 21px;
  font-weight: 800;
  margin: 8px 0 10px;
}

/* line 579, app/assets/stylesheets/refonte.scss */
.pillar .promise {
  font-size: 15px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

/* line 580, app/assets/stylesheets/refonte.scss */
.pillar .stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

/* line 581, app/assets/stylesheets/refonte.scss */
.pillar a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ---------- stack (outils) ---------- */
/* line 584, app/assets/stylesheets/refonte.scss */
.tools-marquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* line 587, app/assets/stylesheets/refonte.scss */
.marquee-row {
  overflow: hidden;
}

/* line 588, app/assets/stylesheets/refonte.scss */
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-left 78s linear infinite;
}

/* line 589, app/assets/stylesheets/refonte.scss */
.marquee-row--reverse .marquee-track {
  animation-name: marquee-right;
}

/* line 590, app/assets/stylesheets/refonte.scss */
.marquee-row:nth-child(1) .marquee-track {
  animation-duration: 72s;
}

/* line 591, app/assets/stylesheets/refonte.scss */
.marquee-row:nth-child(2) .marquee-track {
  animation-duration: 88s;
}

/* line 592, app/assets/stylesheets/refonte.scss */
.marquee-row:nth-child(3) .marquee-track {
  animation-duration: 100s;
}

/* line 593, app/assets/stylesheets/refonte.scss */
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 596, app/assets/stylesheets/refonte.scss */
  .marquee-track {
    animation: none;
  }
}

/* Tuile carrée à ombre portée, sans contour — délibérément différent des
   cartes fines à bordure de tagexpert.fr (référence de l'animation, pas
   du style de carte). Nommée .tool-logo et pas .tool-card : ce nom était
   déjà pris par les vraies cartes-outil de /outils (tools.scss,
   type/h3/p/cta) — collision de classe qui cassait complètement la mise
   en page de /outils (repéré et corrigé le 2026-09-14). */
/* line 604, app/assets/stylesheets/refonte.scss */
.tool-logo {
  flex: none;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background: var(--surface);
  padding: 20px;
  border: 1px solid var(--accent-soft);
  box-shadow: 0 2px 4px rgba(15, 16, 26, 0.05), 0 16px 32px -18px rgba(43, 63, 224, 0.28);
}

/* line 610, app/assets/stylesheets/refonte.scss */
.tool-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  /* line 611, app/assets/stylesheets/refonte.scss */
  .tool-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    padding: 15px;
  }
}

/* variante réduite — stack technique d'un cas client (customer_cases/show),
   affichée en liste courte statique, pas besoin de la taille pleine */
/* line 614, app/assets/stylesheets/refonte.scss */
.tool-logo--sm {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  padding: 12px;
}

/* variante statique (sans défilement) du bloc outils, réservée aux pages
   /expertises/* — retour du 2026-09-14 */
/* line 618, app/assets/stylesheets/refonte.scss */
.tools-static {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

/* tuile texte (pas de logo réel disponible, ex. consentement-rgpd) —
   même forme que .tool-logo avec image, pour rester visuellement
   cohérent sans fabriquer de logo inexistant */
/* line 622, app/assets/stylesheets/refonte.scss */
.tool-logo-txt {
  font-family: "JetBrains Mono",monospace;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* ---------- pourquoi moi ---------- */
/* line 625, app/assets/stylesheets/refonte.scss */
.why {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 48px;
}

/* line 626, app/assets/stylesheets/refonte.scss */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* line 627, app/assets/stylesheets/refonte.scss */
.why h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 14px;
}

/* line 628, app/assets/stylesheets/refonte.scss */
.why-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* line 629, app/assets/stylesheets/refonte.scss */
.why-item {
  display: flex;
  gap: 14px;
}

/* line 630, app/assets/stylesheets/refonte.scss */
.why-item .num {
  font-family: "JetBrains Mono",monospace;
  font-weight: 600;
  color: var(--accent);
  flex: none;
  width: 24px;
}

/* line 631, app/assets/stylesheets/refonte.scss */
.why-item p {
  margin: 0;
}

/* line 632, app/assets/stylesheets/refonte.scss */
.why-item .t {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

/* line 633, app/assets/stylesheets/refonte.scss */
.why-item .d {
  color: var(--ink-muted);
  font-size: 14.5px;
}

/* ---------- photo placeholder (décision ouverte, brief §8) ---------- */
/* line 636, app/assets/stylesheets/refonte.scss */
.photo-slot {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--ink-muted);
  font-size: 12.5px;
  background: var(--surface-2);
}

/* ---------- slider horizontal générique (cas clients, ressources liées) ---------- */
/* line 643, app/assets/stylesheets/refonte.scss */
.hslider {
  position: relative;
}

/* line 644, app/assets/stylesheets/refonte.scss */
.hslider-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}

/* line 645, app/assets/stylesheets/refonte.scss */
.hslider-track::-webkit-scrollbar {
  display: none;
}

/* line 646, app/assets/stylesheets/refonte.scss */
.hslider-track > * {
  flex: 0 0 calc((100% - 44px)/3);
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  /* line 647, app/assets/stylesheets/refonte.scss */
  .hslider-track > * {
    flex: 0 0 85%;
  }
}

/* line 648, app/assets/stylesheets/refonte.scss */
.hslider-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* line 649, app/assets/stylesheets/refonte.scss */
.hslider-nav button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease;
}

/* line 653, app/assets/stylesheets/refonte.scss */
.hslider-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* line 654, app/assets/stylesheets/refonte.scss */
.hslider-nav svg {
  width: 18px;
  height: 18px;
}

/* line 656, app/assets/stylesheets/refonte.scss */
.case {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: border-color .15s ease;
}

/* line 660, app/assets/stylesheets/refonte.scss */
.case:hover {
  border-color: var(--accent);
}

/* line 661, app/assets/stylesheets/refonte.scss */
.case .case-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  object-position: left;
  margin-bottom: 16px;
}

/* line 662, app/assets/stylesheets/refonte.scss */
.case .client {
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 16px;
}

/* line 663, app/assets/stylesheets/refonte.scss */
.case .row {
  margin-bottom: 14px;
}

/* line 664, app/assets/stylesheets/refonte.scss */
.case .row:last-of-type {
  margin-bottom: 16px;
}

/* line 665, app/assets/stylesheets/refonte.scss */
.case .lbl {
  font-family: "JetBrains Mono",monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 3px;
}

/* line 666, app/assets/stylesheets/refonte.scss */
.case .val {
  font-size: 14.5px;
}

/* line 667, app/assets/stylesheets/refonte.scss */
.case .text-link {
  font-size: 13.5px;
}

/* ---------- méthode ---------- */
/* line 670, app/assets/stylesheets/refonte.scss */
.method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* line 671, app/assets/stylesheets/refonte.scss */
.step {
  background: var(--bg);
  padding: 24px 22px;
}

/* line 672, app/assets/stylesheets/refonte.scss */
.step .n {
  font-family: "JetBrains Mono",monospace;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

/* line 673, app/assets/stylesheets/refonte.scss */
.step h4 {
  font-size: 17px;
  font-weight: 800;
  margin: 8px 0 8px;
}

/* line 674, app/assets/stylesheets/refonte.scss */
.step p {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0 0 10px;
}

/* line 675, app/assets/stylesheets/refonte.scss */
.step .deliv {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

/* ---------- closer (CTA final) ---------- */
/* line 678, app/assets/stylesheets/refonte.scss */
.closer {
  text-align: center;
  padding: 80px 0;
}

/* line 679, app/assets/stylesheets/refonte.scss */
.closer h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  max-width: 18ch;
  margin: 0 auto 24px;
}

@media (max-width: 820px) {
  /* line 682, app/assets/stylesheets/refonte.scss */
  .hero-grid, .why-grid {
    grid-template-columns: 1fr;
  }
  /* line 683, app/assets/stylesheets/refonte.scss */
  .problems, .pillars, .cases, .method, .stackgrid {
    grid-template-columns: 1fr;
  }
  /* line 684, app/assets/stylesheets/refonte.scss */
  .testimonials {
    grid-template-columns: 1fr;
  }
  /* line 685, app/assets/stylesheets/refonte.scss */
  .testimonials .testimonial:nth-child(1), .testimonials .testimonial:nth-child(2), .testimonials .testimonial:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Photo hero repassée avant le texte + réduite sur mobile (retour du
   2026-09-14) : en pile 1-colonne, .hero-visual arrivait après
   eyebrow/h1/lede/cta/proof dans le flux, donc invisible sans scroller —
   order:-1 la remonte au-dessus de tout sans toucher l'ordre DOM (lu
   normalement par un lecteur d'écran). Volontairement petite plutôt que
   pleine largeur comme sur desktop. */
@media (max-width: 640px) {
  /* line 695, app/assets/stylesheets/refonte.scss */
  .hero {
    padding: 32px 0 40px;
  }
  /* line 696, app/assets/stylesheets/refonte.scss */
  .hero-grid {
    gap: 20px;
  }
  /* line 697, app/assets/stylesheets/refonte.scss */
  .hero-visual {
    order: -1;
  }
  /* line 698, app/assets/stylesheets/refonte.scss */
  .hero-photo {
    width: 112px;
    margin: 0;
  }
  /* l'eyebrow du hero ("{ } Consultant tracking & data — freelance
     senior") débordait sa largeur disponible et retombait sur 2 lignes
     (parfois en coupant "{ }" lui-même au niveau de l'espace interne) —
     réduit pour tenir sur une ligne. */
  /* line 703, app/assets/stylesheets/refonte.scss */
  .hero .eyebrow {
    font-size: 9.5px;
    letter-spacing: .01em;
  }
}

/* ==========================================================================
   Template Expertise (Phase 3.2) — porté depuis
   chridubois-refonte/design-prototypes/expertise-server-side.html, gabarit
   de référence pour les ~15 pages /expertises/* (le plus abouti, 2 rounds de
   feedback). Classes scopées sous .tpl-expertise car section{padding:72px 0}
   resserre l'espacement vertical de ~18% par rapport au design system par
   défaut — retour spécifique à ce template, pas à généraliser sans validation
   (brief §8, "décisions encore ouvertes").
   ========================================================================== */
/* line 715, app/assets/stylesheets/refonte.scss */
.tpl-expertise section {
  padding: 72px 0;
}

/* line 716, app/assets/stylesheets/refonte.scss */
.tpl-expertise section.tight {
  padding: 46px 0;
}

/* line 718, app/assets/stylesheets/refonte.scss */
.hero-expertise {
  padding: 48px 0 0;
}

/* line 719, app/assets/stylesheets/refonte.scss */
.hero-expertise .hero-grid {
  grid-template-columns: 1.7fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 48px;
}

@media (max-width: 820px) {
  /* line 720, app/assets/stylesheets/refonte.scss */
  .hero-expertise .hero-grid {
    grid-template-columns: 1fr;
  }
}

/* line 721, app/assets/stylesheets/refonte.scss */
.hero-expertise h1 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 0;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  /* line 725, app/assets/stylesheets/refonte.scss */
  .hero-expertise h1 {
    white-space: normal;
  }
}

/* line 726, app/assets/stylesheets/refonte.scss */
.hero-expertise .lede {
  font-size: 19px;
  color: var(--ink-muted);
  max-width: 48ch;
  margin: 18px 0 28px;
}

/* line 727, app/assets/stylesheets/refonte.scss */
.hero-expertise .cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Illustration (pas une photo) depuis le 2026-09-14 : object-fit:contain
   dans une carte au lieu de cover, pour ne jamais rogner les icônes dans
   les coins du schéma — contrairement à un portrait, ces compositions
   n'ont pas de marge de sécurité pour un recadrage. */
/* line 732, app/assets/stylesheets/refonte.scss */
.hero-expertise .hero-photo {
  aspect-ratio: 4/4.6;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px;
  box-sizing: border-box;
}

/* le bloc "aperçu du processus" juste après le hero est volontairement
   compact (padding réduit + libellé) : un résumé visuel avant le détail
   de la section "Une méthode en 4 étapes" plus bas, pas une redite floue
   sans contexte (retour du 2026-09-14). */
/* line 737, app/assets/stylesheets/refonte.scss */
.tpl-expertise section:has(.flow-row) {
  padding: 40px 0;
}

/* la description "Concrètement, en quoi consiste..." n'a pas besoin d'être
   bridée à la largeur de lecture d'un article (720px, cf. .prose global) :
   c'est un seul paragraphe d'intro, pas un corps de texte long, et le
   rester cantonné à 720px sur une page dont toutes les autres sections
   font 1120px de large paraissait incohérent (retour du 2026-09-14). */
/* line 744, app/assets/stylesheets/refonte.scss */
.tpl-expertise section.tight .prose {
  max-width: none;
}

/* line 745, app/assets/stylesheets/refonte.scss */
.schema-fig {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 36px 24px;
  margin-bottom: 0;
}

/* line 746, app/assets/stylesheets/refonte.scss */
.schema-fig svg {
  width: 100%;
  height: auto;
  display: block;
}

/* line 747, app/assets/stylesheets/refonte.scss */
.schema-fig figcaption {
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: 18px;
}

/* line 749, app/assets/stylesheets/refonte.scss */
.symptom-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}

/* line 750, app/assets/stylesheets/refonte.scss */
.symptom-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

/* line 754, app/assets/stylesheets/refonte.scss */
.symptom-list li svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--danger);
  margin-top: 2px;
}

/* Variante positive (ex. "Ce que je fais" sur consultant-tracking-*) : même
   grille 2 colonnes, mais des coches vertes plutôt que des points d'alerte
   rouges — bug de rendu réel corrigé lors de l'audit des 6 pages villes
   (LEGACY-PAGES.md §4), le composant .symptom-list était réutilisé pour un
   contenu positif sans variante de couleur. */
/* line 760, app/assets/stylesheets/refonte.scss */
.symptom-list.positive li svg {
  color: var(--good);
}

@media (max-width: 760px) {
  /* line 761, app/assets/stylesheets/refonte.scss */
  .symptom-list {
    grid-template-columns: 1fr;
  }
}

/* line 763, app/assets/stylesheets/refonte.scss */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* line 764, app/assets/stylesheets/refonte.scss */
.outcome-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px;
}

/* line 765, app/assets/stylesheets/refonte.scss */
.outcome-card svg {
  width: 24px;
  height: 24px;
  color: var(--good);
  margin-bottom: 14px;
}

/* line 766, app/assets/stylesheets/refonte.scss */
.outcome-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* line 767, app/assets/stylesheets/refonte.scss */
.outcome-card p {
  font-size: 14px;
  color: var(--ink-muted);
}

@media (max-width: 980px) {
  /* line 768, app/assets/stylesheets/refonte.scss */
  .outcome-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 769, app/assets/stylesheets/refonte.scss */
  .outcome-grid {
    grid-template-columns: 1fr;
  }
}

/* line 771, app/assets/stylesheets/refonte.scss */
.setup-list {
  counter-reset: setup;
  display: flex;
  flex-direction: column;
}

/* line 772, app/assets/stylesheets/refonte.scss */
.setup-list li {
  counter-increment: setup;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

/* line 776, app/assets/stylesheets/refonte.scss */
.setup-list li::before {
  content: counter(setup, decimal-leading-zero);
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

/* line 780, app/assets/stylesheets/refonte.scss */
.setup-list h4 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* line 781, app/assets/stylesheets/refonte.scss */
.setup-list p {
  font-size: 14px;
  color: var(--ink-muted);
}

/* line 783, app/assets/stylesheets/refonte.scss */
.deliverable-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* line 784, app/assets/stylesheets/refonte.scss */
.deliverable-row .card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  background: var(--bg);
}

/* line 785, app/assets/stylesheets/refonte.scss */
.deliverable-row .card b {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

/* line 786, app/assets/stylesheets/refonte.scss */
.deliverable-row .card span {
  font-size: 13.5px;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  /* line 787, app/assets/stylesheets/refonte.scss */
  .deliverable-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 788, app/assets/stylesheets/refonte.scss */
  .deliverable-row {
    grid-template-columns: 1fr;
  }
}

/* line 790, app/assets/stylesheets/refonte.scss */
.method-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* line 791, app/assets/stylesheets/refonte.scss */
.method-row .step {
  border-left: 2px solid var(--line);
  padding-left: 18px;
}

/* line 792, app/assets/stylesheets/refonte.scss */
.method-row .step .n {
  font-family: "JetBrains Mono",monospace;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

/* line 793, app/assets/stylesheets/refonte.scss */
.method-row .step h4 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 6px 0 6px;
}

/* line 794, app/assets/stylesheets/refonte.scss */
.method-row .step p {
  font-size: 13.5px;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  /* line 795, app/assets/stylesheets/refonte.scss */
  .method-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 796, app/assets/stylesheets/refonte.scss */
  .method-row {
    grid-template-columns: 1fr;
  }
}

/* line 798, app/assets/stylesheets/refonte.scss */
.related-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  /* line 799, app/assets/stylesheets/refonte.scss */
  .related-articles {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Template Article (Phase 3.3) — porté depuis
   chridubois-refonte/design-prototypes/article-pardot.html.
   ========================================================================== */
/* line 805, app/assets/stylesheets/refonte.scss */
.article-hero {
  padding: 40px 0 0;
}

/* line 806, app/assets/stylesheets/refonte.scss */
.article-hero .meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono",monospace;
  font-size: 13px;
  color: var(--ink-muted);
  margin: 20px 0 32px;
}

/* line 810, app/assets/stylesheets/refonte.scss */
.article-hero .meta-row .dot {
  opacity: .5;
}

/* line 811, app/assets/stylesheets/refonte.scss */
.article-hero h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0;
}

/* line 812, app/assets/stylesheets/refonte.scss */
.author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
}

/* line 813, app/assets/stylesheets/refonte.scss */
.author-row img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* line 814, app/assets/stylesheets/refonte.scss */
.author-row .who b {
  display: block;
  font-size: 14.5px;
}

/* line 815, app/assets/stylesheets/refonte.scss */
.author-row .who span {
  font-size: 13px;
  color: var(--ink-muted);
}

/* line 816, app/assets/stylesheets/refonte.scss */
.author-row .social {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* line 817, app/assets/stylesheets/refonte.scss */
.author-row .social a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: none;
}

/* line 818, app/assets/stylesheets/refonte.scss */
.author-row .social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* line 820, app/assets/stylesheets/refonte.scss */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
}

@media (max-width: 980px) {
  /* line 821, app/assets/stylesheets/refonte.scss */
  .article-layout {
    grid-template-columns: 1fr;
  }
}

/* line 823, app/assets/stylesheets/refonte.scss */
.end-author {
  display: flex;
  gap: 16px;
  padding: 26px;
  background: var(--surface-2);
  border-radius: var(--radius-m);
  margin: 48px 0;
}

/* line 826, app/assets/stylesheets/refonte.scss */
.end-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* line 827, app/assets/stylesheets/refonte.scss */
.end-author b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

/* line 828, app/assets/stylesheets/refonte.scss */
.end-author p {
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* line 830, app/assets/stylesheets/refonte.scss */
.related-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

@media (max-width: 900px) {
  /* line 831, app/assets/stylesheets/refonte.scss */
  .related-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Template Cas client (Phase 3.4) — porté depuis
   chridubois-refonte/design-prototypes/cas-client-pickup.html. Structure
   Contexte/Stack/Missions/Feedback calquée sur les 4 blocs Strapi réels
   (rendus conditionnellement — un bloc vide n'affiche pas son h2), cf.
   CONTENT-INVENTORY.md §2.
   ========================================================================== */
/* line 840, app/assets/stylesheets/refonte.scss */
.case-hero {
  padding: 44px 0 0;
}

/* logo client à gauche du h1, plutôt qu'au-dessus — retour du 2026-09-14 */
/* line 842, app/assets/stylesheets/refonte.scss */
.case-hero-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px;
}

/* line 843, app/assets/stylesheets/refonte.scss */
.case-hero-head img.client-logo {
  flex: none;
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* line 844, app/assets/stylesheets/refonte.scss */
.case-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 560px) {
  /* line 846, app/assets/stylesheets/refonte.scss */
  .case-hero-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* line 849, app/assets/stylesheets/refonte.scss */
.schema-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* line 850, app/assets/stylesheets/refonte.scss */
.schema-compare figure {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 24px;
  margin: 0;
}

/* line 851, app/assets/stylesheets/refonte.scss */
.schema-compare figcaption {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 14px;
}

/* line 852, app/assets/stylesheets/refonte.scss */
.schema-compare .tag {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  /* line 853, app/assets/stylesheets/refonte.scss */
  .schema-compare {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Listing Ressources (Phase 3.5) — porté depuis
   chridubois-refonte/design-prototypes/ressources.html. Chips/cat-grid basés
   sur les 9 vraies catégories Strapi (pas la taxonomie à 8 thèmes du
   prototype, qui n'existe pas encore côté CMS — cf. note dans le code de la
   vue).
   ========================================================================== */
/* line 862, app/assets/stylesheets/refonte.scss */
.res-hero {
  padding: 48px 0 0;
}

/* line 863, app/assets/stylesheets/refonte.scss */
.res-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
}

/* line 864, app/assets/stylesheets/refonte.scss */
.res-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 56ch;
  margin-bottom: 32px;
}

/* line 865, app/assets/stylesheets/refonte.scss */
.res-hero .search-field {
  max-width: 640px;
  margin-bottom: 24px;
}

/* line 867, app/assets/stylesheets/refonte.scss */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* line 868, app/assets/stylesheets/refonte.scss */
.cat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s ease;
}

/* line 869, app/assets/stylesheets/refonte.scss */
.cat-card:hover {
  border-color: var(--ink);
}

/* line 870, app/assets/stylesheets/refonte.scss */
.cat-card b {
  font-size: 15.5px;
  font-weight: 700;
}

/* line 871, app/assets/stylesheets/refonte.scss */
.cat-card span {
  font-family: "JetBrains Mono",monospace;
  font-size: 12px;
  color: var(--ink-muted);
}

@media (max-width: 980px) {
  /* line 872, app/assets/stylesheets/refonte.scss */
  .cat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 873, app/assets/stylesheets/refonte.scss */
  .cat-grid {
    grid-template-columns: 1fr;
  }
}

/* line 875, app/assets/stylesheets/refonte.scss */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* line 876, app/assets/stylesheets/refonte.scss */
.is-hidden[data-batch] {
  display: none;
}

/* ==========================================================================
   Listing Cas clients (Phase 3.6) — porté depuis
   chridubois-refonte/design-prototypes/cas-clients.html. Sans les chips de
   filtre par secteur du prototype : contrairement aux articles (9 vraies
   catégories Strapi), les cas clients n'ont aujourd'hui aucun champ Secteur
   en base (brief §5 point 3) — filtrer sur une catégorie inventée aurait été
   pire que pas de filtre du tout. À ajouter une fois ce champ créé.
   ========================================================================== */
/* line 886, app/assets/stylesheets/refonte.scss */
.cc-hero {
  padding: 48px 0 0;
}

/* line 887, app/assets/stylesheets/refonte.scss */
.cc-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
}

/* line 888, app/assets/stylesheets/refonte.scss */
.cc-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 56ch;
  margin-bottom: 28px;
}

/* line 889, app/assets/stylesheets/refonte.scss */
.cc-hero .stats-row {
  max-width: 420px;
  margin-bottom: 32px;
}

/* line 891, app/assets/stylesheets/refonte.scss */
.compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 980px) {
  /* line 892, app/assets/stylesheets/refonte.scss */
  .compact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 893, app/assets/stylesheets/refonte.scss */
  .compact-grid {
    grid-template-columns: 1fr;
  }
}

/* grille de cartes .case (même carte que le slider Cas clients), pour le
   listing complet /customer_cases — retour du 2026-09-14 */
/* line 897, app/assets/stylesheets/refonte.scss */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* line 898, app/assets/stylesheets/refonte.scss */
.case-grid .case {
  height: 100%;
}

@media (max-width: 980px) {
  /* line 899, app/assets/stylesheets/refonte.scss */
  .case-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 900, app/assets/stylesheets/refonte.scss */
  .case-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Page Contact (Phase 3.7) — porté depuis
   chridubois-refonte/design-prototypes/contact.html. Embed Calendly réel
   (shared/_calendly_form), contenu réel (checklist, fit/pas-fit, FAQ) déjà
   présent sur /prendre-rendez-vous en prod (extrait du JSON-LD FAQPage, cf.
   CONTENT-INVENTORY.md). Pas de mécanisme de rareté factice (brief §3).
   ========================================================================== */
/* line 909, app/assets/stylesheets/refonte.scss */
.contact-hero {
  padding: 48px 0;
}

/* line 910, app/assets/stylesheets/refonte.scss */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 980px) {
  /* line 911, app/assets/stylesheets/refonte.scss */
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* line 912, app/assets/stylesheets/refonte.scss */
.contact-hero h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.14;
  margin: 16px 0 18px;
}

/* line 913, app/assets/stylesheets/refonte.scss */
.contact-hero .lede {
  font-size: 17.5px;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

/* line 914, app/assets/stylesheets/refonte.scss */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

/* line 915, app/assets/stylesheets/refonte.scss */
.check-list li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}

/* line 916, app/assets/stylesheets/refonte.scss */
.check-list li svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--good);
  margin-top: 2px;
}

/* line 918, app/assets/stylesheets/refonte.scss */
.calendly-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 20px;
  background: var(--surface-2);
  min-height: 640px;
}

/* line 919, app/assets/stylesheets/refonte.scss */
.calendly-frame .calendly_bloc {
  min-height: 600px;
}

/* line 920, app/assets/stylesheets/refonte.scss */
.calendly-frame .calendly-inline-widget {
  min-width: 280px;
  height: 600px;
}

/* line 922, app/assets/stylesheets/refonte.scss */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 860px) {
  /* line 923, app/assets/stylesheets/refonte.scss */
  .fit-grid {
    grid-template-columns: 1fr;
  }
}

/* line 924, app/assets/stylesheets/refonte.scss */
.fit-col h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* line 925, app/assets/stylesheets/refonte.scss */
.fit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 926, app/assets/stylesheets/refonte.scss */
.fit-list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
}

/* line 927, app/assets/stylesheets/refonte.scss */
.fit-list.good li svg {
  color: var(--good);
}

/* line 928, app/assets/stylesheets/refonte.scss */
.fit-list.bad li svg {
  color: var(--danger);
}

/* line 929, app/assets/stylesheets/refonte.scss */
.fit-list li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* line 931, app/assets/stylesheets/refonte.scss */
.flow-row {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

/* line 932, app/assets/stylesheets/refonte.scss */
.flow-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 700;
  flex: 1;
  min-width: 140px;
  text-align: center;
}

/* line 933, app/assets/stylesheets/refonte.scss */
.flow-arrow {
  color: var(--ink-muted);
  padding: 0 14px;
  font-size: 18px;
}

@media (max-width: 760px) {
  /* line 934, app/assets/stylesheets/refonte.scss */
  .flow-row {
    flex-direction: column;
  }
  /* line 934, app/assets/stylesheets/refonte.scss */
  .flow-arrow {
    transform: rotate(90deg);
    padding: 6px 0;
  }
  /* line 934, app/assets/stylesheets/refonte.scss */
  .flow-step {
    width: 100%;
  }
}

/* ==========================================================================
   Page Qui suis-je — porté depuis
   chridubois-refonte/design-prototypes/qui-suis-je.html. Contenu réel
   (parcours, stats +13 ans/+309 clients/+11 agences, storytelling
   frustration Meta/GA4/back-office, bloc "je ne suis pas / je suis"), cf.
   CONTENT-INVENTORY.md.
   ========================================================================== */
/* line 943, app/assets/stylesheets/refonte.scss */
.about-hero {
  padding: 48px 0 0;
}

/* line 944, app/assets/stylesheets/refonte.scss */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  /* line 945, app/assets/stylesheets/refonte.scss */
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* line 946, app/assets/stylesheets/refonte.scss */
.about-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 14px;
}

/* line 947, app/assets/stylesheets/refonte.scss */
.about-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  margin-bottom: 28px;
}

/* line 948, app/assets/stylesheets/refonte.scss */
.about-photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}

/* line 950, app/assets/stylesheets/refonte.scss */
.mismatch-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 28px 0;
}

/* line 951, app/assets/stylesheets/refonte.scss */
.mismatch-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px 20px;
  text-align: center;
}

/* line 952, app/assets/stylesheets/refonte.scss */
.mismatch-item b {
  display: block;
  font-family: "JetBrains Mono",monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
}

/* line 953, app/assets/stylesheets/refonte.scss */
.mismatch-item span {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* line 954, app/assets/stylesheets/refonte.scss */
.mismatch-sep {
  font-size: 20px;
  color: var(--ink-muted);
}

/* line 956, app/assets/stylesheets/refonte.scss */
.stat-detail-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  /* line 957, app/assets/stylesheets/refonte.scss */
  .stat-detail-row {
    grid-template-columns: 1fr;
  }
}

/* line 958, app/assets/stylesheets/refonte.scss */
.stat-detail {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 28px;
}

/* line 959, app/assets/stylesheets/refonte.scss */
.stat-detail b {
  display: block;
  font-family: "JetBrains Mono",monospace;
  font-size: 34px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

/* line 960, app/assets/stylesheets/refonte.scss */
.stat-detail h4 {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* line 961, app/assets/stylesheets/refonte.scss */
.stat-detail p {
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* line 963, app/assets/stylesheets/refonte.scss */
.pillar-mini {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}

/* line 964, app/assets/stylesheets/refonte.scss */
.pillar-mini:hover {
  border-color: var(--ink);
}

/* line 965, app/assets/stylesheets/refonte.scss */
.pillar-mini .n {
  font-family: "JetBrains Mono",monospace;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* line 966, app/assets/stylesheets/refonte.scss */
.pillar-mini h3 {
  font-size: 18px;
  font-weight: 800;
}

/* line 967, app/assets/stylesheets/refonte.scss */
.pillar-mini ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* line 968, app/assets/stylesheets/refonte.scss */
.pillar-mini li {
  font-size: 13.5px;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
}

/* line 969, app/assets/stylesheets/refonte.scss */
.pillar-mini li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex: none;
}

/* line 971, app/assets/stylesheets/refonte.scss */
.work-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 860px) {
  /* line 972, app/assets/stylesheets/refonte.scss */
  .work-photo-row {
    grid-template-columns: 1fr;
  }
}

/* line 973, app/assets/stylesheets/refonte.scss */
.work-photo-row img {
  width: 100%;
  border-radius: var(--radius-l);
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ==========================================================================
   Page Méthodologie — porté depuis
   chridubois-refonte/design-prototypes/methodologie.html. Contenu réel
   intégral (4 étapes, libellés et livrables exacts déjà utilisés sur la
   homepage et le template Expertise), en timeline verticale.
   ========================================================================== */
/* line 981, app/assets/stylesheets/refonte.scss */
.method-hero {
  padding: 48px 0;
}

/* line 982, app/assets/stylesheets/refonte.scss */
.method-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
}

/* line 983, app/assets/stylesheets/refonte.scss */
.method-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* line 985, app/assets/stylesheets/refonte.scss */
.method-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 44px 0;
}

/* line 986, app/assets/stylesheets/refonte.scss */
.method-step + .method-step {
  border-top: 1px solid var(--line);
}

/* line 987, app/assets/stylesheets/refonte.scss */
.method-step .icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* line 988, app/assets/stylesheets/refonte.scss */
.method-step .emoji {
  font-size: 30px;
  line-height: 1;
}

/* line 989, app/assets/stylesheets/refonte.scss */
.method-step .n {
  font-family: "JetBrains Mono",monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

/* line 990, app/assets/stylesheets/refonte.scss */
.method-step h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* line 991, app/assets/stylesheets/refonte.scss */
.method-step p {
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 64ch;
  margin-bottom: 16px;
}

/* line 992, app/assets/stylesheets/refonte.scss */
.method-step .livrables {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
}

/* line 996, app/assets/stylesheets/refonte.scss */
.method-step .livrables b {
  font-family: "JetBrains Mono",monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  /* line 997, app/assets/stylesheets/refonte.scss */
  .method-step {
    grid-template-columns: 1fr;
  }
  /* line 997, app/assets/stylesheets/refonte.scss */
  .method-step .icon-col {
    flex-direction: row;
  }
}

/* ==========================================================================
   Page Expertises (hub) — porté depuis
   chridubois-refonte/design-prototypes/expertises.html. Nouvelle page,
   n'existe pas sur le live : introduit les 3 piliers avec leurs sous-pages
   réelles (sitemap-v2.md), sert de page d'atterrissage pour le lien
   "Expertises" de la nav.
   ========================================================================== */
/* line 1006, app/assets/stylesheets/refonte.scss */
.exp-hero {
  padding: 48px 0;
}

/* line 1007, app/assets/stylesheets/refonte.scss */
.exp-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
  max-width: 32ch;
  text-wrap: balance;
}

/* line 1008, app/assets/stylesheets/refonte.scss */
.exp-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* line 1010, app/assets/stylesheets/refonte.scss */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 980px) {
  /* line 1011, app/assets/stylesheets/refonte.scss */
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

/* line 1012, app/assets/stylesheets/refonte.scss */
.pillar-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* line 1013, app/assets/stylesheets/refonte.scss */
.pillar-card .n {
  font-family: "JetBrains Mono",monospace;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* line 1014, app/assets/stylesheets/refonte.scss */
.pillar-card h3 {
  font-size: 19px;
  font-weight: 800;
}

/* line 1015, app/assets/stylesheets/refonte.scss */
.pillar-card p {
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* line 1016, app/assets/stylesheets/refonte.scss */
.pillar-card .sublinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* line 1017, app/assets/stylesheets/refonte.scss */
.pillar-card .sublinks a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

/* line 1018, app/assets/stylesheets/refonte.scss */
.pillar-card .sublinks a:first-child {
  border-top: none;
  padding-top: 0;
}

/* line 1019, app/assets/stylesheets/refonte.scss */
.pillar-card .sublinks a:hover {
  color: var(--accent);
}

/* line 1021, app/assets/stylesheets/refonte.scss */
.solutions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* line 1022, app/assets/stylesheets/refonte.scss */
.solution-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}

/* line 1027, app/assets/stylesheets/refonte.scss */
.solution-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* line 1029, app/assets/stylesheets/refonte.scss */
.method-teaser {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 36px 40px;
}

@media (max-width: 760px) {
  /* line 1033, app/assets/stylesheets/refonte.scss */
  .method-teaser {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* line 1034, app/assets/stylesheets/refonte.scss */
.method-teaser .steps-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: "JetBrains Mono",monospace;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* line 1035, app/assets/stylesheets/refonte.scss */
.method-teaser .steps-inline span {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* line 1036, app/assets/stylesheets/refonte.scss */
.method-teaser .steps-inline b {
  color: var(--ink);
}

/* ==========================================================================
   Pages Solutions (/solutions/*) — porté depuis
   chridubois-refonte/design-prototypes/solution-*.html. Gabarit plus léger
   que les pages Expertise (hero, symptômes sectoriels, 3 piliers mobilisés
   ensemble via .pillar-mini, stack, FAQ, CTA) : ces pages mobilisent les 3
   piliers ensemble plutôt qu'une seule expertise, cf. sitemap-v2.md.
   ========================================================================== */
/* line 1045, app/assets/stylesheets/refonte.scss */
.sol-hero {
  padding: 48px 0;
}

/* line 1046, app/assets/stylesheets/refonte.scss */
.sol-hero h1 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 18px;
  max-width: 36ch;
  text-wrap: balance;
}

/* line 1047, app/assets/stylesheets/refonte.scss */
.sol-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* illustration hero, même traitement que .hero-expertise (2026-09-14) :
   object-fit:contain dans une carte, pas de recadrage des icônes */
/* line 1050, app/assets/stylesheets/refonte.scss */
.sol-hero .hero-grid {
  grid-template-columns: 1.7fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 820px) {
  /* line 1051, app/assets/stylesheets/refonte.scss */
  .sol-hero .hero-grid {
    grid-template-columns: 1fr;
  }
}

/* line 1052, app/assets/stylesheets/refonte.scss */
.sol-hero .hero-photo {
  aspect-ratio: 4/4.6;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 32px;
  box-sizing: border-box;
}

/* ==========================================================================
   Pages utilitaires v2 (mentions légales, confidentialité, newsletter,
   sitemap HTML) — pas de prototype dédié dans design-prototypes/, gabarit
   simple cohérent avec le reste du design system (hero + .prose, ou
   formulaire court) plutôt qu'une maquette bespoke.
   ========================================================================== */
/* line 1060, app/assets/stylesheets/refonte.scss */
.util-hero {
  padding: 48px 0 32px;
}

/* line 1061, app/assets/stylesheets/refonte.scss */
.util-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  margin: 16px 0 0;
}

/* line 1062, app/assets/stylesheets/refonte.scss */
.util-hero .lede {
  font-size: 16.5px;
  color: var(--ink-muted);
  margin-top: 14px;
  max-width: 60ch;
}

/* line 1064, app/assets/stylesheets/refonte.scss */
.form-field {
  margin-bottom: 18px;
  max-width: 420px;
}

/* line 1065, app/assets/stylesheets/refonte.scss */
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

/* line 1066, app/assets/stylesheets/refonte.scss */
.form-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}

/* line 1070, app/assets/stylesheets/refonte.scss */
.form-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* line 1072, app/assets/stylesheets/refonte.scss */
.sitemap-section {
  margin-bottom: 40px;
}

/* line 1073, app/assets/stylesheets/refonte.scss */
.sitemap-section h2 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* line 1074, app/assets/stylesheets/refonte.scss */
.sitemap-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}

@media (max-width: 760px) {
  /* line 1075, app/assets/stylesheets/refonte.scss */
  .sitemap-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  /* line 1076, app/assets/stylesheets/refonte.scss */
  .sitemap-links {
    grid-template-columns: 1fr;
  }
}

/* line 1077, app/assets/stylesheets/refonte.scss */
.sitemap-links a {
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1078, app/assets/stylesheets/refonte.scss */
.sitemap-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ==========================================================================
   Pages legacy /services/* (LEGACY-PAGES.md) — porté depuis
   chridubois-refonte/design-prototypes/legacy-service-gtm.html. Contenu
   réel intégral conservé (filet de sécurité long-tail), juste reskinné +
   bandeau vers la page /expertises/* la plus proche.
   ========================================================================== */
/* line 1086, app/assets/stylesheets/refonte.scss */
.legacy-hero {
  padding: 44px 0 0;
}

/* line 1087, app/assets/stylesheets/refonte.scss */
.legacy-hero h1 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  margin: 16px 0 18px;
  max-width: 38ch;
  text-wrap: balance;
}

/* line 1088, app/assets/stylesheets/refonte.scss */
.legacy-hero .lede {
  font-size: 17px;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

/* line 1089, app/assets/stylesheets/refonte.scss */
.migrate-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 18px 24px;
  margin-top: 24px;
}

/* line 1094, app/assets/stylesheets/refonte.scss */
.migrate-callout p {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* line 1095, app/assets/stylesheets/refonte.scss */
.migrate-callout p b {
  color: var(--accent);
}

/* ==========================================================================
   Page Consultant tracking (LEGACY-PAGES.md) — porté depuis
   chridubois-refonte/design-prototypes/consultant-tracking.html.
   ========================================================================== */
/* line 1101, app/assets/stylesheets/refonte.scss */
.ct-hero {
  padding: 48px 0;
}

/* line 1102, app/assets/stylesheets/refonte.scss */
.ct-hero h1 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  margin: 16px 0 18px;
  max-width: 38ch;
  text-wrap: balance;
}

/* line 1103, app/assets/stylesheets/refonte.scss */
.ct-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 64ch;
  margin-bottom: 18px;
}

/* line 1104, app/assets/stylesheets/refonte.scss */
.business-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 980px) {
  /* line 1105, app/assets/stylesheets/refonte.scss */
  .business-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* line 1106, app/assets/stylesheets/refonte.scss */
  .business-grid {
    grid-template-columns: 1fr;
  }
}

/* line 1107, app/assets/stylesheets/refonte.scss */
.result-quote-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
}

/* line 1108, app/assets/stylesheets/refonte.scss */
.result-quote {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  display: flex;
  gap: 12px;
}

/* line 1109, app/assets/stylesheets/refonte.scss */
.result-quote:last-child {
  border-bottom: none;
}

/* line 1110, app/assets/stylesheets/refonte.scss */
.result-quote svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--good);
  margin-top: 2px;
}

/* line 1111, app/assets/stylesheets/refonte.scss */
.result-quote b {
  color: var(--ink);
}

/* ==========================================================================
   Page Tracking pour agences (LEGACY-PAGES.md) — porté depuis
   chridubois-refonte/design-prototypes/tracking-pour-agences.html.
   ========================================================================== */
/* line 1117, app/assets/stylesheets/refonte.scss */
.ag-hero {
  padding: 48px 0;
}

/* line 1118, app/assets/stylesheets/refonte.scss */
.ag-hero h1 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  margin: 16px 0 18px;
  max-width: 36ch;
  text-wrap: balance;
}

/* line 1119, app/assets/stylesheets/refonte.scss */
.ag-hero .lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* line 1120, app/assets/stylesheets/refonte.scss */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}

/* line 1121, app/assets/stylesheets/refonte.scss */
.logo-strip img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* Groupes de liens internes réels (ex. "Ressources pour aller plus loin"
   sur /consultant-tracking) — plus dense qu'une grille de .article-card,
   pour un grand nombre de liens organisés par thème. */
/* line 1126, app/assets/stylesheets/refonte.scss */
.resource-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  /* line 1127, app/assets/stylesheets/refonte.scss */
  .resource-groups {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  /* line 1128, app/assets/stylesheets/refonte.scss */
  .resource-groups {
    grid-template-columns: 1fr;
  }
}

/* line 1129, app/assets/stylesheets/refonte.scss */
.resource-groups h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* line 1130, app/assets/stylesheets/refonte.scss */
.resource-groups ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line 1131, app/assets/stylesheets/refonte.scss */
.resource-groups a {
  font-size: 13.5px;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.5;
}

/* line 1132, app/assets/stylesheets/refonte.scss */
.resource-groups a:hover {
  color: var(--accent);
  text-decoration: underline;
}