/*
 * Maquettes du site tetr4.ch : sections propres aux pages du bureau, en complément d'outils.css
 * (charte, en-tête, scène, fiches, pied de page). Préfixe « st- » ; mêmes variables que la page Outils.
 */

/* ------------------------------------------------------------------ */
/* Communs                                                             */
/* ------------------------------------------------------------------ */

.st-section {
  scroll-margin-top: 24px;
  padding-top: clamp(56px, 9vh, 104px);
}
.st-section:first-child {
  padding-top: 0;
}

.st-h1 {
  font-size: clamp(40px, 7.4vw, 104px) !important;
  max-width: 14ch !important;
}

.st-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.st-h2 em {
  font-style: normal;
  color: var(--accent);
}

.st-muted {
  color: var(--ink-2);
}

.st-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.st-actions .ot-cta:hover {
  gap: 12px;
  background: var(--accent);
}
html[data-theme="dark"] .st-actions .ot-cta:hover {
  color: #000;
}
.st-ghost {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.25s, color 0.25s;
}
.st-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.st-nav-cta {
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.st-link:hover {
  color: var(--accent);
}

.st-read {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Services                                                            */
/* ------------------------------------------------------------------ */

.st-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.st-sketch {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 55%, var(--surface));
}
/* Les épures ne se dessinent qu'au survol ; au repos elles restent tracées */
.st-service .ot-draft-lines path {
  animation: none;
  stroke-dashoffset: 0;
}
.st-service:hover .ot-draft-lines path {
  animation: st-redraw 1.4s calc(var(--i) * 0.12s) var(--ease-out) both;
}
@keyframes st-redraw {
  from {
    stroke-dashoffset: 1;
  }
}
/* Numéros de parcelle et autres inscriptions : ils apparaissent après le tracé */
.ot-draft-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
  fill: var(--ink-3);
}
.st-service:hover .ot-draft-label {
  animation: st-label 0.6s 0.6s both;
}
@keyframes st-label {
  from {
    opacity: 0;
  }
}

.st-service-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.st-service h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.st-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.st-items li {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.st-service:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.st-service:hover::before {
  opacity: 1;
}

.st-service--cta {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
}
.st-service--cta .st-service-body {
  justify-content: center;
  gap: 4px;
}
.st-service--cta h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 18px;
}
.st-service--cta .ot-cta {
  align-self: flex-start;
}
.st-service--cta:hover .ot-cta {
  gap: 12px;
  background: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Le bureau                                                           */
/* ------------------------------------------------------------------ */

.st-bureau-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.st-prose p {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.st-prose .st-intro {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}

.st-aside {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.st-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
.st-stats div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 24px;
}
.st-stats div + div {
  border-left: 1px solid var(--line);
}
.st-stats b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.st-stats span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Portrait : le cadre suit les fiches, la légende se pose sur la photo */
.st-bureau .st-aside {
  position: static;
}
.st-portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
}
.st-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.st-portrait figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 2px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 12px;
  background: rgba(10, 12, 11, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}
.st-portrait figcaption b {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.st-portrait figcaption span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Cartouche : tableau à filets fins, comme le bloc titre d'un plan */
.st-cartouche {
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--surface);
  font-size: 13.5px;
}
.st-cartouche > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  border-top: 1px solid var(--line-2);
}
.st-cartouche > div:first-child {
  border-top: 0;
}
.st-cartouche dt,
.st-cartouche dd {
  margin: 0;
  padding: 10px 14px;
}
.st-cartouche dt {
  border-right: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.st-cartouche-head {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  border-bottom: 1.5px solid var(--ink);
}
.st-cartouche-head .ot-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* Bandeau Outils                                                      */
/* ------------------------------------------------------------------ */

.st-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
}
.st-tools-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(26px, 4vw, 52px);
}
.st-tools-text .ot-cta {
  margin-top: 8px;
}
.st-tools-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  border-left: 1px solid var(--line);
}
.st-tools-thumbs .ot-visual {
  aspect-ratio: auto;
  min-height: 260px;
  border-bottom: 0;
}
.st-tools-thumbs .ot-visual + .ot-visual {
  border-left: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* Blog                                                                */
/* ------------------------------------------------------------------ */

.st-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.st-post {
  padding: 24px;
}
.st-post--lead {
  grid-column: span 2;
  padding: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.st-post-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.st-post-meta span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.st-post h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.st-post--lead h3 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.st-post p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.st-post--lead p {
  max-width: 60ch;
  font-size: 15.5px;
}

/* ------------------------------------------------------------------ */
/* Contact                                                             */
/* ------------------------------------------------------------------ */

.st-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
}
.st-form {
  gap: 16px;
  padding: clamp(24px, 3.4vw, 44px);
}
.st-form .st-h2 {
  margin-bottom: 8px;
}
.st-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.st-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.st-form label span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.st-form input,
.st-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.st-form input:focus,
.st-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.st-form button {
  align-self: flex-start;
  margin-top: 6px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.st-form button:hover {
  gap: 12px;
  background: var(--accent);
}

.st-coords {
  display: grid;
  gap: 2px;
}
.st-coord {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.st-coord b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
a.st-coord:hover b {
  color: var(--accent);
}
.st-access {
  margin-top: 18px;
  padding: 20px 22px;
}
.st-access p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Article du blog                                                     */
/* ------------------------------------------------------------------ */

.st-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
}

.st-stage--short {
  min-height: 0;
}
.st-article-head {
  padding-top: clamp(32px, 7vh, 80px);
  padding-bottom: clamp(48px, 9vh, 96px);
}
.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.st-crumbs a {
  color: var(--accent);
}
.st-crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ot-hero .st-article-title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 24ch;
  text-wrap: balance;
}
.st-article-head .ot-facts a:hover b {
  color: var(--accent);
}

.st-article {
  padding-bottom: 0;
  display: grid;
  grid-template-columns: minmax(200px, 270px) minmax(0, 68ch);
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* Sommaire : intertitres numérotés, le courant surligné par site.js */
.st-toc {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 14px;
}
.st-toc-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.st-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line-2);
}
.st-toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  margin-left: -1px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
  transition: color 0.2s, border-color 0.2s;
}
.st-toc a span {
  font-family: var(--font-mono);
  font-size: 11px;
  padding-top: 2px;
}
.st-toc a:hover {
  color: var(--ink);
}
.st-toc a.is-current {
  color: var(--ink);
  border-left-color: var(--accent);
}
.st-toc a.is-current span {
  color: var(--accent);
}
.st-search input {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.st-search input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Corps de l'article */
.st-body > p:first-child {
  margin-top: 0;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}
.st-body p {
  font-size: 16.5px;
  line-height: 1.75;
  margin-top: 18px;
}
.st-body h2 {
  scroll-margin-top: 28px;
  margin: 56px 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.st-h2-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.st-h2-num::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--accent);
}
.st-body figure {
  margin: 36px 0 8px;
}
.st-body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.st-body figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
/* Les deux phrases de conclusion, mises en exergue */
.st-body .st-chute,
.st-body .is-style-exergue {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.st-body .st-chute + .st-chute,
.st-body .is-style-exergue + .is-style-exergue {
  color: var(--accent);
}
.st-body p:has(+ .st-chute):not(.st-chute),
.st-body p:has(+ .is-style-exergue):not(.is-style-exergue) {
  margin-bottom: 30px;
}
.st-body .st-sources,
.st-body .is-style-sources {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.st-sources span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.st-sources a,
.st-body .is-style-sources a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Après l'article : auteur, commentaires, articles récents */
.st-after {
  padding-top: 0;
}
.st-author {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  max-width: calc(68ch + 270px + clamp(32px, 6vw, 96px));
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding: 22px 24px;
}
.st-avatar img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  object-fit: cover;
}
.st-author b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
}
.st-author span:not(.ot-cta) {
  font-size: 13.5px;
  color: var(--ink-2);
}
a.st-author:hover .ot-cta {
  gap: 12px;
  background: var(--accent);
}
.st-note {
  font-size: 13.5px;
  margin-top: -6px;
}
.st-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 13.5px;
  color: var(--ink-2);
}
.st-check input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--accent);
}

@media (max-width: 980px) {
  .st-article {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-toc {
    position: static;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
  }
  .st-after .st-posts > .st-post:nth-child(3) {
    display: none;
  }
}
@media (max-width: 620px) {
  .st-row--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-author {
    grid-template-columns: auto 1fr;
  }
  .st-author .ot-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .st-after .st-posts > .st-post:nth-child(3) {
    display: flex;
  }
}

/* ------------------------------------------------------------------ */
/* Liste du blog                                                       */
/* ------------------------------------------------------------------ */

.ot-hero .st-blog-title {
  margin-top: 18px;
  font-size: clamp(56px, 10vw, 136px);
}
.st-blog-title em {
  color: var(--brand);
}
.st-blog-title em::after {
  content: none !important;
}

/* Filtres : pastilles de catégories et recherche, collés en haut au défilement */
.st-filters {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 calc(var(--gutter) * -1) 28px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.st-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-chips::-webkit-scrollbar {
  display: none;
}
.st-chips button,
.st-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.st-chips button span,
.st-chips a span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.st-chips button:hover,
.st-chips a:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.st-chips button[aria-pressed="true"],
.st-chips a[aria-current] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.st-chips button[aria-pressed="true"] span,
.st-chips a[aria-current] span {
  color: inherit;
  opacity: 0.6;
}
.st-filter-search {
  flex: 0 1 260px;
  min-width: 160px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.st-filter-search:focus {
  outline: none;
  border-color: var(--accent);
}

/* Fiches avec image à la une */
.st-post--img {
  padding: 0;
}
.st-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.st-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
a.ot-card:hover .st-thumb img {
  transform: scale(1.04);
  filter: none;
}
.st-post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
a.st-post:hover {
  transform: translateY(-4px);
}

/* À la une : image à gauche, texte à droite */
.st-feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  padding: 0;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.st-feature .st-thumb {
  aspect-ratio: auto;
  min-height: 360px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.st-feature .st-post-body {
  justify-content: center;
  padding: clamp(26px, 3.4vw, 48px);
}
.st-feature h3 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.st-feature p {
  -webkit-line-clamp: 4;
  font-size: 15.5px;
}
.st-feature .ot-cta {
  align-self: flex-start;
  margin-top: 26px;
}
a.st-feature:hover .ot-cta {
  gap: 12px;
  background: var(--accent);
}

/* Deuxième article : fiche large, image à gauche */
.st-post--wide {
  grid-column: span 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.st-post--wide .st-thumb {
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.st-post--wide h3 {
  font-size: 24px;
}
.st-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-3);
}
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Catégorie et recherche                                              */
/* ------------------------------------------------------------------ */

.ot-hero .st-cat-title {
  margin-top: 18px;
  font-size: clamp(40px, 7.4vw, 104px);
  max-width: none;
  overflow-wrap: anywhere;
}
.st-cat-title em {
  color: var(--brand);
}
.st-cat-title em::after {
  content: none !important;
}
.st-search-title {
  color: var(--accent);
}
.st-filter-form {
  display: flex;
  flex: 0 1 260px;
  min-width: 160px;
}
.st-filter-form .st-filter-search {
  flex: 1;
  min-width: 0;
}
.st-filter-form--wide {
  flex: 1;
  max-width: 560px;
}

.st-results {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.st-result {
  display: grid;
  gap: 8px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.st-result:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.st-result h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 40ch;
}
.st-result:hover h3 {
  color: var(--accent);
}
.st-result p {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.st-result .st-read {
  padding-top: 4px;
}
.st-results mark {
  padding: 0 0.12em;
  border-radius: 3px;
  background: var(--highlight);
  color: inherit;
}
.st-noresult {
  display: grid;
  gap: 10px;
  margin-top: 56px;
  padding: 28px;
  border: 1px dashed var(--line-2);
  border-radius: 22px;
}
.st-noresult > p:not(.ot-num) {
  color: var(--ink-2);
}
.st-mock-note {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.st-noresult .st-chips {
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Page introuvable (404)                                              */
/* ------------------------------------------------------------------ */

.st-404-search {
  display: grid;
  gap: 10px;
  max-width: 420px;
  margin-top: 40px;
}
.st-404-search .ot-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.st-404-search div {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.st-404-search div:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.st-404-search input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.st-404-search input:focus {
  outline: none;
}
.st-404-search button {
  display: grid;
  place-items: center;
  width: 46px;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.st-404-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ------------------------------------------------------------------ */
/* Badum Tss                                                           */
/* ------------------------------------------------------------------ */

.st-badum-card {
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) 24px;
  text-align: center;
}
.st-badum-btn {
  position: relative;
  padding: 22px 42px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb), 0.8);
  transition: transform 0.15s var(--ease-out), box-shadow 0.3s;
}
.st-badum-btn:hover {
  transform: translateY(-2px);
}
.st-badum-btn:active,
.st-badum-btn.is-hit {
  transform: scale(0.94);
}
/* Onde qui part du bouton à chaque vanne */
.st-badum-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--brand);
  opacity: 0;
}
.st-badum-btn.is-hit::after {
  animation: st-ripple 0.7s var(--ease-out);
}
@keyframes st-ripple {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}
.st-badum-hint {
  color: var(--ink-2);
}
.st-badum-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}
.st-badum-count b {
  display: inline-block;
  min-width: 2ch;
  color: var(--accent);
  font-size: 18px;
}

/* ------------------------------------------------------------------ */
/* Mentions légales et confidentialité                                 */
/* ------------------------------------------------------------------ */

.st-legal {
  padding-bottom: clamp(56px, 9vh, 104px);
}
.st-legal ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.st-legal li {
  font-size: 16px;
  line-height: 1.7;
}
.st-legal li::marker {
  color: var(--accent);
}
.st-legal a {
  color: var(--accent);
}
.st-legal a:hover {
  text-decoration: underline;
}
.st-draft {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px dashed var(--accent);
  border-radius: 16px;
  background: var(--accent-soft);
}
.st-draft p {
  margin: 0 !important;
  font-size: 14.5px !important;
}
.st-draft .ot-num {
  font-family: var(--font-mono);
  font-size: 11px !important;
  color: var(--accent);
}
.st-todo {
  padding: 1px 6px;
  border-radius: 6px;
  background: #f6e7b8;
  color: #5a4710;
  font-family: var(--font-mono);
  font-size: 0.82em;
}
html[data-theme="dark"] .st-todo {
  background: #3a3112;
  color: #f1dc95;
}
.st-pref {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.st-pref p {
  display: grid;
  gap: 4px;
  margin: 0 !important;
}
.st-pref .ot-num {
  font-family: var(--font-mono);
  font-size: 11px;
}
.st-pref small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.st-pref button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Accès au bureau                                                     */
/* ------------------------------------------------------------------ */

.ot-hero .st-acces-title {
  max-width: 16ch;
  font-size: clamp(40px, 6.6vw, 92px);
}
.st-acces {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: start;
}

/* Carte : plan schématique ou vue aérienne */
.st-map {
  position: sticky;
  top: 24px;
  margin: 0;
}
.st-map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.st-map-tabs {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.st-map-tabs button {
  padding: 6px 11px;
  white-space: nowrap;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.st-map-tabs button:hover {
  color: var(--ink);
}
.st-map-tabs button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-2), 0 0 0 1px var(--line);
}
.st-map-view {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-2);
}
.st-plan,
.st-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.45s var(--ease-out);
}
.st-photo {
  object-fit: cover;
  opacity: 0;
}
.st-map[data-view="photo"] .st-photo {
  opacity: 1;
}
.st-map[data-view="photo"] .st-plan {
  opacity: 0;
}

/* Plan : traits fins de plan de situation, couleurs de la charte */
.st-plan-green {
  fill: url(#st-hatch);
}
#st-hatch line {
  stroke: rgba(var(--accent-rgb), 0.22);
  stroke-width: 1;
}
.st-plan-water {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.16);
  stroke-width: 12;
}
.st-plan-bati rect {
  fill: color-mix(in srgb, var(--ink) 7%, var(--surface));
  stroke: var(--line-2);
  stroke-width: 1;
}
.st-plan-roads path,
.st-plan-roads circle {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 15;
  stroke-linejoin: round;
}
.st-plan-roads--in path,
.st-plan-roads--in circle {
  stroke: var(--surface);
  stroke-width: 12;
}
.st-plan-parking rect {
  fill: color-mix(in srgb, var(--ink) 22%, var(--surface));
}
.st-plan-parking .st-plan-lot {
  fill: var(--surface);
  stroke: var(--line-2);
}
.st-plan-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
}
.st-plan-route-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Les tirets avancent vers le bureau au survol de la carte */
.st-map:hover .st-plan-route {
  animation: st-march 1.1s linear infinite;
}
@keyframes st-march {
  to {
    stroke-dashoffset: -32;
  }
}
.st-plan-p circle {
  fill: var(--ink);
}
.st-plan-p text {
  fill: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-anchor: middle;
}
.st-plan-here rect {
  fill: var(--accent);
}
.st-plan-ring {
  fill: rgba(var(--accent-rgb), 0.14);
  stroke: var(--accent);
  stroke-width: 1;
}
.st-plan-label text {
  fill: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.st-plan-label .st-plan-strong {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.st-plan-north circle {
  fill: var(--surface);
  stroke: var(--line-2);
}
.st-plan-north path {
  fill: var(--ink);
}
.st-plan-north text {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: middle;
}

.st-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.st-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.st-legend-route {
  width: 22px;
  border-top: 3px dashed var(--accent);
}
.st-legend-here {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}
.st-map-note {
  margin-left: auto;
  color: var(--ink-3);
}
.st-map[data-view="photo"] .st-map-note {
  visibility: hidden;
}

/* Itinéraire : étapes numérotées le long d'un trait pointillé */
.st-steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.st-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0 26px;
}
.st-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 66px;
  bottom: -6px;
  left: 21px;
  border-left: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
}
.st-step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.st-steps li:last-child .st-step-num {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}
.st-steps h3 {
  margin-top: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -0.02em;
}
.st-steps p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.st-steps p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 3px;
}
.st-steps p a:hover {
  color: var(--accent);
}
.st-maplink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 13px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: border-color 0.2s, color 0.2s, gap 0.2s;
}
.st-maplink svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.st-maplink:hover {
  gap: 9px;
  border-color: var(--accent);
  color: var(--accent);
}

.st-acces-cartouche {
  margin-top: 18px;
}
.st-acces-cartouche a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Petits écrans                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 980px) {
  .st-services,
  .st-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-bureau-grid,
  .st-contact,
  .st-acces,
  .st-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-aside,
  .st-map {
    position: static;
  }
  /* Le portrait passe avant la biographie ; chiffres et cartouche restent après */
  .st-bureau .st-aside {
    display: contents;
  }
  .st-portrait {
    order: -1;
    max-width: 440px;
  }
  .st-tools-thumbs {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  .st-post--wide {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .st-post--wide .st-thumb {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .st-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-feature .st-thumb {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .st-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .st-filter-search,
  .st-filter-form {
    flex: none;
  }
  .st-filter-form--wide {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .st-services,
  .st-posts,
  .st-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-post--lead {
    grid-column: auto;
  }
  .st-tools-thumbs .ot-visual {
    min-height: 170px;
  }
  .st-nav-cta {
    display: inline-block !important;
  }
  .st-map-note {
    margin-left: 0;
  }
  .st-map-bar > .ot-num {
    display: none;
  }
  .st-map-tabs {
    flex: 1;
  }
  .st-map-tabs button {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Menu des petits écrans (construit par site.js)                      */
/* ------------------------------------------------------------------ */

.st-menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.st-menu-btn svg,
.st-menu-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.st-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--paper);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}
.st-menu.is-open {
  opacity: 1;
  transform: none;
}
.st-menu[hidden] {
  display: none !important;
}
html.st-menu-open {
  overflow: hidden;
}
.st-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.st-menu-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.st-menu ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.st-menu li a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.st-menu li a span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.st-menu li a[aria-current] {
  color: var(--accent);
}
.st-menu-foot {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
}
.st-menu-foot a:first-child {
  color: var(--accent);
}

@media (max-width: 560px) {
  .st-menu-btn {
    display: inline-flex;
  }
  .ot-nav .st-nav-cta {
    display: none !important;
  }
}

/* Pied de page : cinq liens qui passent à la ligne sur téléphone */
.ot-foot nav {
  flex-wrap: wrap;
  gap: 8px 20px;
}
.ot-foot div a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Sommaire des maquettes (index.html)                                 */
/* ------------------------------------------------------------------ */

.st-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}
.st-index-card {
  gap: 10px;
  padding: 22px 22px 24px;
}
.st-index-card .ot-card-meta {
  gap: 12px;
}
.st-index-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
}
.st-index-card h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.st-index-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.st-index-todo {
  max-width: 880px;
}
.st-index-todo > div:not(.st-cartouche-head) {
  grid-template-columns: 130px 1fr;
}
.st-index-todo dd {
  line-height: 1.55;
}
.st-index-todo code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ */
/* Choix des épures des services (icones.html)                         */
/* ------------------------------------------------------------------ */

.st-pick .ot-section-head {
  flex-wrap: wrap;
}
.st-pick-items {
  margin-top: 0;
}
.st-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.st-pick-card {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.st-pick-card p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.st-pick-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.st-pick-check {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.st-pick-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-pick-card[aria-pressed="true"] .st-pick-check {
  opacity: 1;
  transform: none;
}
.st-picks.is-replay .ot-draft-lines path {
  animation: st-redraw 1.4s calc(var(--i) * 0.12s) var(--ease-out) both;
}
.st-picks.is-replay .ot-draft-label {
  animation: st-label 0.6s 0.6s both;
}
.st-replay {
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.st-pick-summary {
  position: sticky;
  bottom: 16px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: clamp(40px, 6vh, 64px);
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-float);
}
.st-pick-summary .ot-num {
  font-family: var(--font-mono);
  font-size: 11px;
}
.st-pick-summary ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.st-pick-summary li.is-set {
  color: var(--ink);
}
.st-pick-summary button {
  margin-left: auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 980px) {
  .st-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .st-pick-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-pick-summary button {
    margin-left: 0;
  }
}

.st-index-todo a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Prestations des services : variantes sans bulles (services-listes)  */
/* ------------------------------------------------------------------ */

.st-items[class*="st-items--"] {
  display: block;
  margin-top: 16px;
}
.st-items[class*="st-items--"] li {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* A · Filets : une ligne par prestation, comme une nomenclature */
.st-items--filets {
  border-top: 1px solid var(--line);
}
.st-items--filets li {
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* B · En ligne : une phrase, séparateurs verts */
.st-items--ligne li {
  display: inline-block;
  line-height: 1.65 !important;
  white-space: nowrap;
}
.st-items--ligne li:not(:last-child)::after {
  content: "·";
  margin: 0 8px;
  color: var(--accent);
  font-weight: 700;
}

/* C · Repères a, b, c en police technique */
.st-items--reperes {
  counter-reset: st-rep;
}
.st-items--reperes li {
  display: grid;
  grid-template-columns: 22px 1fr;
  padding: 4px 0 !important;
  counter-increment: st-rep;
}
.st-items--reperes li::before {
  content: counter(st-rep, lower-alpha) ".";
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--accent);
}

/* D · Tirets d'annotation */
.st-items--tirets li {
  position: relative;
  padding: 4px 0 4px 20px !important;
}
.st-items--tirets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 11px;
  height: 2px;
  background: var(--accent);
}

/* Les sous-titres de section longs passent à la ligne sur téléphone */
@media (max-width: 560px) {
  .ot-section-head .ot-count {
    white-space: normal;
  }
}


/* ------------------------------------------------------------------ */
/* WordPress : contenu réel des articles, commentaires, formulaires    */
/* ------------------------------------------------------------------ */

/* Article sans intertitre : pas de sommaire, une seule colonne centrée */
.st-article--solo {
  grid-template-columns: minmax(0, 68ch);
}

.st-body h3 {
  margin: 36px 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.st-body h4 {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}
.st-body ul,
.st-body ol {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.7;
}
.st-body ul {
  list-style: disc;
}
.st-body ol {
  list-style: decimal;
}
.st-body li::marker {
  color: var(--accent);
}
.st-body li > ul,
.st-body li > ol {
  margin-top: 8px;
}
.st-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.st-body strong {
  color: var(--ink);
}
.st-body blockquote {
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
}
.st-body hr {
  margin: 40px 0 0;
  border: 0;
  border-top: 1px solid var(--line-2);
}

/* Images et légendes de l'éditeur : numérotées « Fig. 01 » */
.st-body {
  counter-reset: st-fig;
}
.st-body figure.wp-block-image,
.st-body figure.wp-block-table {
  margin: 36px 0 8px;
}
.st-body .wp-block-image img {
  max-width: 100%;
}
.st-body figure.wp-block-image:has(figcaption) {
  counter-increment: st-fig;
}
.st-body figcaption.wp-element-caption::before {
  content: "Fig. " counter(st-fig, decimal-leading-zero) " — ";
  color: var(--accent);
}

/* Tableaux */
.st-body .wp-block-table {
  overflow-x: auto;
}
.st-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}
.st-body th,
.st-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.st-body thead th,
.st-body tr:first-child th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--ink);
}

/* Commentaires publiés */
.st-comments {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.st-comments .children {
  display: grid;
  gap: 12px;
  margin: 12px 0 0 28px;
  padding: 0;
  list-style: none;
}
.st-comment {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.st-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.st-comment-head b {
  font-family: var(--font-display);
  font-size: 16px;
}
.st-comment-head span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.st-comment-body p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.st-comment .comment-reply-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* Formulaire de commentaire de WordPress : titre au-dessus de la fiche */
.comment-respond .st-h2 {
  margin-bottom: 18px;
}
.comment-respond .st-h2 small {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.comment-respond .st-h2 small a {
  color: var(--accent);
}
.st-form .form-submit {
  margin: 0;
}

/* Messages du formulaire de contact */
.st-form-note {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.st-form-note--ok {
  background: var(--accent-soft);
  color: var(--accent);
}
.st-form-note--erreur {
  background: color-mix(in srgb, #c0392b 12%, transparent);
  color: #b03a2e;
}
html[data-theme="dark"] .st-form-note--erreur {
  color: #f1a399;
}

/* WP Armour : champ piège invisible (sa feuille de styles n'est pas chargée) */
#altEmail_container,
.altEmail_container {
  position: absolute !important;
  overflow: hidden !important;
  display: inline !important;
  height: 1px !important;
  width: 1px !important;
  z-index: -1000 !important;
}
.wpa-test-msg {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 13px;
}